基本概念

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

官網(wǎng)：https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build

?

文件結(jié)構(gòu)?

一個(gè)比較典型的用webpack管理的vue項(xiàng)目應(yīng)該有如下文件和文件夾：

文件夾：

config/：定義代理的域名

dist/: 整個(gè)前端項(xiàng)目用webpack打包后的目標(biāo)存放文件夾，里面一般有bundle.js文件

lib/: 開發(fā)時(shí)引用的一些依賴文件，最經(jīng)典的就是jquery

node_modules/：上面介紹的用npm對(duì)項(xiàng)目依賴組件進(jìn)行安裝時(shí)就放在這個(gè)文件夾里。

src/：自己寫的源代碼

文件：

index.html：主頁入口文件

package.json：定義了這個(gè)項(xiàng)目所需要的各種模塊，以及項(xiàng)目的配置信息（比如名稱、版本、許可證等元數(shù)據(jù)）。npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境。

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

【webpack中文網(wǎng)：https://www.webpackjs.com/】

啟動(dòng)步驟

（1）git clone已建的vue項(xiàng)目

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

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

注：這樣就能用淘寶的npm鏡像代替國(guó)外的資源，懶得用代理同學(xué)的福音。以后就可以用cnpm命令來全部代替npm。不設(shè)置代理的話，在后續(xù)項(xiàng)目的npm install的時(shí)候，容易因?yàn)槌瑫r(shí)而失敗。

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

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

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

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

（6）npm編譯打包：第一次運(yùn)行前，要對(duì)項(xiàng)目進(jìn)行編譯，cmd進(jìn)入前端vue項(xiàng)目的根目錄，輸入命令“npm run build”，此時(shí)會(huì)對(duì)根目錄下的package.json對(duì)build命令的定義進(jìn)行編譯。

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

（7）啟動(dòng)項(xiàng)目：cmd進(jìn)入前端vue項(xiàng)目的根目錄，輸入命令“npm run dev”，此時(shí)會(huì)用nodejs啟動(dòng)這個(gè)前端的vue項(xiàng)目。

第一次配置好后，以后啟動(dòng)只用一步：

進(jìn)入前端項(xiàng)目根目錄，cmd運(yùn)行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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。