一、安裝node環境
1、下載地址為：https://nodejs.org/en/
2、檢查是否安裝成功：node -v 如果輸出版本號，說明我們安裝node環境成功。
npm包管理器是集成在Node.js中了，所以在安裝Node.js的時候就已經自帶了npm。
輸入npm -v可得到npm的版本。
由於資源的限制，安裝npm依賴包的時候經常失敗，建議使用npm的國內鏡像cnpm 命令行工具代替默認的npm。國內npm鏡像 https://npm.taobao.org/
3、國內npm鏡像：npm install -g cnpm ––registry=https://registry.npm.taobao.org
檢查是否安裝成功：cnpm -v
二、搭建vue項目環境
1、cnpm 全局安裝vue-cli， 輸入命令：cnpm install --global vue-cli 安裝vue-cli；
驗證是否安裝成功：vue，出來vue的信息，及說明安裝成功；
2、開始建一個新項目：不想敲cmd路徑的，進入你創建的項目目錄，按Shift+右鍵，
創建一個基於 webpack 模板的新項目，輸入命令: vue init webpack my_vue ，my_vue是文件夾的名字。
Project name vue-demo // 你的項目名稱 Project description A Vue.js project // 你的項目描述 Author Samiu // 作者的名稱 Vue build standalone // 打包方式，默認，直接回車 Install vue-router? Yes // 是否安裝 vue-router，路由，選(Y) Use ESLint to lint your code? No // 是否安裝 eslint管理代碼，不推薦，不然你還會想辦法關掉它，選(N)
Setup unit tests with Karma + Mocha? No // 是否安裝Karma + Mocha 單元測試工具，選（N）
Setup e2e tests with Nightwatch? No // 是否安裝e2e端到端測試工具，選（N）
項目目錄下輸入命令：
npm i // 安裝項目依賴 npm run dev // 開始！
8080是默認的端口，要訪問的話，直接在瀏覽器輸入localhost:8080就可以打開默認的模板了；
三、vue項目目錄講解
1、build：構建腳本目錄
1）build.js ==> 生產環境構建腳本；
2）check-versions.js ==> 檢查npm，node.js版本；
3）utils.js ==> 構建相關工具方法；
4）vue-loader.conf.js ==> 配置了css加載器以及編譯css之后自動添加前綴；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack開發環境配置；
7）webpack.prod.conf.js ==> webpack生產環境配置；
2、config：項目配置
1）dev.env.js ==> 開發環境變量；
2）index.js ==> 項目配置文件；
3）prod.env.js ==> 生產環境變量；
3、node_modules：npm 加載的項目依賴模塊（依賴包都在這里）
4、src：這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：
1）assets：資源目錄，放置一些圖片或者公共js、公共css。這里的資源會被webpack構建；
2）components：組件目錄，我們寫的組件就放在這個目錄里面；
3）router：前端路由，我們需要配置的路由路徑寫在index.js里面；
4）App.vue：根組件；
5）main.js：入口js文件；
5、static：靜態資源目錄，如圖片、字體等。不會被webpack構建
6、index.html：首頁入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
8、README.md：項目的說明文檔，markdown 格式
9、.xxxx文件：這些是一些配置文件，包括語法配置，git配置等
四、基本配置說明
vue自動打開瀏覽器默認為false與端口號修改。
解決：1）打開config ==> index.js
2）module.exports配置中找到autoOpenBrowser，改為true，執行 npm run dev 就會自動打開瀏覽器。
3）module.exports 配置中找到 port: 8080，可修改端口。