基本概念

vue-cli：A simple CLI for scaffolding Vue.js projects. 一個簡單的Vue.js工程命令行腳手架工具。

官網：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build

?

文件結構?

一個比較典型的用webpack管理的vue項目應該有如下文件和文件夾：

文件夾：

config/：定義代理的域名

dist/: 整個前端項目用webpack打包后的目標存放文件夾，里面一般有bundle.js文件

lib/: 開發時引用的一些依賴文件，最經典的就是jquery

node_modules/：上面介紹的用npm對項目依賴組件進行安裝時就放在這個文件夾里。

src/：自己寫的源代碼

文件：

index.html：主頁入口文件

package.json：定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。

webpack.config.js：【可以改名】管理webpack打包的配置文件

【webpack中文網：https://www.webpackjs.com/】

啟動步驟

（1）git clone已建的vue項目

（2）安裝nodejs，在任意路徑下用cmd查"node --version"或者"npm -v"都能給出版本號即可。

（3）切換npm鏡像：在任意路徑下用cmd輸入“npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org”

注：這樣就能用淘寶的npm鏡像代替國外的資源，懶得用代理同學的福音。以后就可以用cnpm命令來全部代替npm。不設置代理的話，在后續項目的npm install的時候，容易因為超時而失敗。

有教程把這條命令的“--registry”寫成只有一個“-”，注意是兩個“--”。

（4）npm全局安裝vue-cli：在任意路徑的cmd下輸入“cnpm install vue-cli -g”，安裝vue-cli。在任意路徑下輸入vue能出來信息即可。

（5）npm項目依賴組件安裝：cmd進入前端vue項目的根目錄，輸入命令“cnpm install”，會根據前端項目的package.json文件中配置的依賴關系下載好相關的組件，存在項目目錄的node_modules文件夾下。

注：一般git庫會gitignore依賴組件，也就是沒有node_modules文件夾，不然太大了，而且文件零碎不易復制... 這步容易發生err，遇見了就要打回去重弄，不要掩耳盜鈴，具體錯誤排查stackoverflow...。

（6）npm編譯打包：第一次運行前，要對項目進行編譯，cmd進入前端vue項目的根目錄，輸入命令“npm run build”，此時會對根目錄下的package.json對build命令的定義進行編譯。

注：也有"build" = "webpack -p"。?

（7）啟動項目：cmd進入前端vue項目的根目錄，輸入命令“npm run dev”，此時會用nodejs啟動這個前端的vue項目。

第一次配置好后，以后啟動只用一步：

進入前端項目根目錄，cmd運行npm run dev

?

參考文章

https://blog.csdn.net/qq_27680317/article/details/71123051

http://javascript.ruanyifeng.com/nodejs/packagejson.html

https://blog.csdn.net/WYpersist/article/details/80496259

總結

以上是生活随笔為你收集整理的Vue——Windows 10下Vue项目启动步骤[vue-cli-service启动版本]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。