『vue-cli知識點』-vue-cli工程中常用的npm命令有哪些？

不管是Vue腳手架2、還是腳手架3，對於一些細節的把握你瞭解嗎？

npm install：下載 node_modules 資源包的命令
思考問題：
爲什麼下載資源包要用npm install？請你談一下
npm run dev：啓動 vue-cli 開發環境的 npm命令（3.0以下😔 ☞ 腳手架2啓動方式）
npm run serve:啓動 vue-cli 開發環境的 npm命令（3.0以上😀 ☛ 腳手架3啓動方式）
npm run build： vue-cli 生成生產環境部署資源的 npm命令（常說的打包文件）
腳手架2打包，生成的是build文件
腳手架3打包，生成的是dist文件
serve build（腳手架2，把你寫好的項目打包，然後在本機測試，查看是否完整）
serve dist（腳手架3，把你寫好的項目打包，然後在本機測試，查看是否完整）
因爲你最後直接給的是打包文件，交工之前直接測試一下，運行打包文件，查看項目是否完整
注意：
腳手架3搭建的項目， serve build運行你的打包文件，雖然可以運行但是瀏覽器顯示如下錯誤界面：

因爲腳手架3生成的打包文件是dist，所以要serve dist 來運行，測試
npm run build–report：用於查看 vue-cli 生產環境部署資源文件大小的 npm命令。
好多大佬說此命令必答，可以加深面試官更好的感覺！！！
命令運行的結果是這個樣子的：

直接運行 npm run build–report報錯，如下
腳手架3以上解決方法：
- 安裝
  npm install webpack-bundle-analyzer -D
- 項目根目錄下創建vue.config.js文件（沒有需要自己創建！！！！）
```
module.exports = {
 chainWebpack: config => {
	config
		.plugin('webpack-bundle-analyzer')
		.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
	},
}
```
  如圖所示：
- 使用npm run serve直接運行（問題解決）
  (這時會執行webpack-bundle-analyzer插件功能完成優化後可自行刪掉配置 )
腳手架2（vue-cli2 ）解決方法：
因爲用vue-cli2 構建的項目中裏已經集成了 webpack-bundle-analyzer可視化插件
所以使用npm run buil --report 命令即可
腳手架2若有報錯，可參考webpack-bundle-analyzer具體配置

安裝模塊：
- save-dev 是指將包信息添加到 package.json 裏的 devDependencies節點，表示開發時依賴的包。
  npm install --save-dev
- save 是指將包信息添加到 package.json 裏的dependencies節點，表示發佈時依賴的包。
  npm install --save

我不覺得人的心智成熟是越來越寬容涵蓋，什麼都可以接受。相反，我覺得那應該是一種逐漸剔除的過程，知道自己最重要的是什麼，知道不重要的是什麼。而後，做一個簡單的人。 ------《阿甘正傳》

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.