vue-cli(教程)

Vue2簡單上手容易，的確，看了官方文檔確實以爲上手很快，除了ES6語法和webpack的配置讓你感到陌生，重要的是思路的變換，之前用jq隨便拿全局變量和修改dom的錘子不能用了，vue只用關心數據自己，不用再頻繁繁瑣的操做dom，註冊事件、監聽事件、取消事件。。。。（確實很煩）。vue的官方文檔仍是不錯的，由淺到深，若是不使用構建工具確實用的很爽，可是這在實際項目應用中是不可能的，當用vue-cli構建一個工程的時候，發現官方文檔仍是不夠用，須要熟練掌握es6，而vue的全家桶(vue-cli,vue-router,vue-resource,vuex)仍是都要上的。

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。

vue-cli這個構建工具大大下降了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，至關於啓動了一個請求服務器，給你搭建了一個測試環境，只關注開發就OK。

1.安裝vue-cli

① 使用npm（須要安裝node環境）全局安裝webpack，打開命令行工具輸入：npm install webpack -g或者（npm install -g webpack），安裝完成以後輸入 webpack -v，以下圖，若是出現相應的版本號，則說明安裝成功。

注意：webpack 4.X 開始，須要安裝 webpack-cli 依賴 ,因此使用這條命令  npm install webpack webpack-cli -g

② 全局安裝vue-cli，在cmd中輸入命令:

1.  
    
2.  
   npm install --global vue-cli
3.  
    

（我已經安裝過，爲了更直觀我在電腦上從新演示下）

 

安裝成功：

 

安裝完成以後輸入 vue -V（注意這裏是大寫的「V」），以下圖，若是出現相應的版本號，則說明安裝成功。

 

打開C:\Users\Andminster\AppData\Roaming\npm目錄下能夠看到：

打開node_modules也能夠看到：

2.用vue-cli來構建項目

① 我首先在D盤新建一個文件夾（dxl_vue）做爲項目存放地，而後使用命令行cd進入到項目目錄輸入：

vue init webpack baoge 

baoge是自定義的項目名稱，命令執行以後，會在當前目錄生成一個以該名稱命名的項目文件夾。

 

輸入命令後，會跳出幾個選項讓你回答：

• Project name (baoge)： -----項目名稱，直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫 ，能夠參考一下。
• Project description (A Vue.js project)： ----項目描述，也可直接點擊回車，使用默認名字
• Author ()： ----做者，輸入你的大名
  接下來會讓用戶選擇：
• 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 僅運行時，已經有推薦了就選擇第一個了
• Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數狀況下都使用，這裏就輸入「y」後回車便可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，通常項目中都會使用。
  接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車
• Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
• Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車

回答完畢後上圖就開始構建項目了。

② 配置完成後，能夠看到目錄下多出了一個項目文件夾baoge，而後cd進入這個文件夾：
安裝依賴：

npm install 

 ( 若是安裝速度太慢。能夠安裝淘寶鏡像，打開命令行工具，輸入：
 npm install -g cnpm --registry=https://registry.npm.taobao.org
 而後使用cnpm來安裝 )

npm install ：安裝全部的模塊，若是是安裝具體的哪一個個模塊，在install 後面輸入模塊的名字便可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件裏面是不容許有任何註釋的），每一個使用npm管理的項目都有這個文件，是npm操做的入口文件。由於是初始項目，尚未任何模塊，因此我用npm install 安裝全部的模塊。安裝完成後，目錄中會多出來一個node_modules文件夾，這裏放的就是全部依賴的模塊。

而後如今，baoge文件夾裏的目錄是這樣的：

解釋下每一個文件夾表明的意思(仔細看一下這張圖）：

image.png

3.啓動項目

npm run dev

若是瀏覽器打開以後，沒有加載出頁面，有多是本地的 8080 端口被佔用，須要修改一下配置文件 config裏的index.js

還有，若是本地調試項目時，建議將build 裏的assetsPublicPath的路徑前綴修改成 ' ./ '（開始是 ' / '），由於打包以後，外部引入 js 和 css 文件時，若是路徑以 ' / ' 開頭，在本地是沒法找到對應文件的（服務器上沒問題）。因此若是須要在本地打開打包後的文件，就得修改文件路徑。
個人端口沒有被佔用，直接成功（服務啓動成功後瀏覽器會默認打開一個「歡迎頁面」）：

注意：在進行vue頁面調試時，必定要去谷歌商店下載一個vue-tool擴展程序。

 

4.vue-cli的webpack配置分析

• 從package.json能夠看到開發和生產環境的入口。

• 能夠看到dev中的設置，build/webpack.dev.conf.js，該文件是開發環境中webpack的配置入口。
• 在webpack.dev.conf.js中出現webpack.base.conf.js，這個文件是開發環境和生產環境，甚至測試環境，這些環境的公共webpack配置。能夠說，這個文件至關重要。
• 還有config/index.js 、build/utils.js 、build/build.js等，具體請看這篇介紹：
  https://segmentfault.com/a/1190000008644830

5.打包上線

注意，本身的項目文件都須要放到 src 文件夾下。
在項目開發完成以後，能夠輸入 npm run build 來進行打包工做。

npm run build

另：

1.  
    
2.  
   1.npm 開啓了npm run dev之後怎麼退出或關閉？
3.  
   ctrl+c
4.  
   2.--save-dev
5.  
   自動把模塊和版本號添加到模塊配置文件package.json中的依賴裏devdependencies部分
6.  
   3. --save-dev 與 --save 的區別
7.  
   --save 安裝包信息將加入到dependencies（生產階段的依賴）
8.  
   --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），因此開發階段通常使用它
9.  
    

打包完成後，會生成 dist 文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看。項目上線時，只須要將 dist 文件夾放到服務器就好了。