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中輸入命令:
安裝成功：
安裝完成之后輸入
vue -V
如下圖，如果出現相應的版本號，則說明安裝成功，
打開C:\Users\Andminster\AppData\Roaming\npm目錄下可以看到：
打開node_modules也可以看到：
2.用vue-cli來構建專案
① 我首先在D盤新建一個檔案夾（dxl_vue）作為專案存放地，然后使用命令列cd進入到專案目錄輸入：
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進入這個檔案夾：
安裝依賴
如果安裝速度太慢，可以安裝淘寶鏡像，打開命令列工具，輸入下面的命令，然后使用cnpm來安裝
?npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊，在install 后面輸入模塊的名字即可，而只輸入install就會按照專案的根目錄下的package.json檔案中依賴的模塊安裝（這個檔案里面是不允許有任何注釋的），每個使用npm管理的專案都有這個檔案，是npm操作的入口檔案，因為是初始專案，還沒有任何模塊，所以我用npm install 安裝所有的模塊，安裝完成后，目錄中會多出來一個node_modules檔案夾，這里放的就是所有依賴的模塊，
然后現在，baoge檔案夾里的目錄是這樣的：
解釋下每個檔案夾代表的意思(仔細看一下這張圖）：
3.啟動專案
還有，如果本地除錯專案時，建議將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 來進行打包作業，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/235367.html
標籤：HTML5
下一篇：uni-app呼叫wifi介面