vue （vue-cli主要寫構建工具的使用）

vue全家桶:vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成（這里建議使用Axios，尤大大推薦使用Axios，並且放棄了對其官方庫vue-resource的維護，其有很多特性：攔截請求和響應、取消請求、轉換json、客戶端防御XSRF等）。

vue-cli構建工具降低了webpack的使用難度，支持熱更新（webpack-dev-server），相當於啟動了一個服務器（一般默認用8080端口）。

1. 安裝vue-cli
   需要node環境全局安裝webpack，打開cmd（命令輸入工具）
   npm install webpack -g （或者 npm install -g webpack），安裝是否完成可以查看版本 webpack -v，如圖
   
   　　　　　　　　　　　　　　　　①安裝
   

    

    　　　　　　　　　　　　　　　　　②查看版本
   
   

    　　（出現版本號證明安裝成功）

2. 全局安裝vue-cli,在cmd中輸入命令 ：npm install --global vue-cli
   
   

　　　　打開目錄盤可以看到 （我的目錄盤C:\Users\EDZ\AppData\Roaming\npm）
　　　　　　　

　　　　打開node_modules還可以看到vue-cli
                          

　　　　3.使用vue-cli構建項目

　　　　　　①，新建一個項目文件夾（program）可以在你想要的盤新建，（如果不想要存C盤然后）進入到項目（program）存放地

　　　　　　

 

 

 　　　　　　輸入：vue init webpack helloword

　　　　　　helloword是項目自定義名稱，執行命令會生成以此名稱的項目文件夾

 　　　　　　接下來會有選項：

　　　　　　（1）Project name (helloword)： -----項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, 　　　　　　　　name can no longer contain capital letters）

　　　　　　（2）Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字

　　　　　　（3）Author ()： ----作者，輸入Halo（自行選擇填寫）

　　　　　　　　　　再選擇

　　　　　　　　Runtime + Compiler: recommended for most users 運行加編譯，推薦，就選它了
　　　　　　　　Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere 僅運行時，已經有推薦了就選擇第一個了

　　　　　　（3）Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這里就輸入“y”后回車即可。

　　　　　　（4）Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，一般項目中都會使用。
　　　　　　（5）Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車

　　　　　　（6）Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車

　　　　　　（7）Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車

　　　　　　②結合以上新建了一個新文件

　　　　　　

 　　　　　　③配置完成后，cd進入此文件夾

　　　　　　　　安裝依賴      npm install

 　　　　　　　（ps：如果安裝速度太慢或者下載不下來，可以使用淘寶鏡像打開命令行工具，輸入：
 　　　　　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org
 　　　　　　　　然后使用cnpm命令來安裝）

　　　　　　　npm install：是安裝所有的模塊會按照項目根目錄下的package.json文件中依賴的模塊安裝，每個使用npm管理的項目都有這個文件，是npm操作入口文件（如果是安裝的具體模塊，在install后面輸入對應模塊名字）。文件夾中多出的node_modules文件夾即所依賴的模塊。

　　　　　　　　

 

 

 　　　　　　　　④啟動項目 npm run dev

 　　　　　　　　默認8080端口，如果被占用可在config文件夾中修改index.js文件中port：8080 端口號
　　　　　　　　（ps:另建議將build里的assetsPublicPath）的路徑前綴修改為‘./’(原本是‘/’),因為打包之后，外部引入js和css文件時，如果路徑以‘/’開頭，在本地是無法找到對應文件的（服務器可以）。如果在本地打開打包后文件，需修改文件路徑。

　　　　4.打包上線，自己的項目文件都要放到src文件夾下。

　　　　　　npm run build 

　　　　　　打包完成后，會生成dist文件夾，項目上線直接將dist文件夾放到服務器即可。