1. 介紹搭建 Vue 環(huán)境的方法

搭建 Vue 環(huán)境常用的有兩個(gè)方法：
1、在 Vue.js 的官網(wǎng)上直接下載 vue.min.js，并用 “script” 標(biāo)簽引入（就像引入其它 js 文件一樣）。這種方式簡(jiǎn)單明了（建議：初期學(xué)習(xí)時(shí)使用）

2、使用 npm 方法。這種方式是使用了官方提供的一個(gè) vue-cli 腳手架工具來(lái)自動(dòng)生成一個(gè)項(xiàng)目模板（在命令行中使用）。這種方式更易于構(gòu)建大型應(yīng)用（建議：后期使用）

之前剛接觸 Vue 時(shí)，使用 vue-cli 搭建 Vue 環(huán)境，走了很多彎路?，F(xiàn)在，為了更多的人不重蹈覆轍，我將其搭建步驟記錄下來(lái)。

【注意】：這里所使用的環(huán)境

Vue 版本：2.9.6
前端工具：VsCode

Vue 版本2 和版本 3 的部分命令有些不同，但不影響學(xué)習(xí)使用！

2. 使用 vue-cli 搭建 Vue

2.1 設(shè)置 Node 環(huán)境

1、下載Node.js
到 Node.js 官網(wǎng) 去下載 Node.js

2、安裝Node.js

雙擊Node.js安裝包，進(jìn)行安裝。傻瓜式安裝，一路“Next”

【注意】：默認(rèn)安裝完成以后，系統(tǒng)環(huán)境變量會(huì)自動(dòng)把 node 的安裝路徑添加到 path 中。如果沒有，請(qǐng)自行添加。記得路徑不要錯(cuò)，是指到有 node.exe 的目錄。

3、驗(yàn)證Node.js是否安裝成功

進(jìn)入 dos 命令行，查看所安裝的 node 是否可以正常使用。其中 npm 是 node 下載安裝完成后自帶的包管理器?？梢允褂?npm 進(jìn)行安裝一些常用 modules。

查看 node 版本：

node -v

查看 npm 版本：

npm -v

4、設(shè)置nodejs prefix（全局）和cache（緩存）路徑

設(shè)置nodejs prefix（全局）：

// 設(shè)置全局模塊存放路徑
npm config set prefix " D:\profession\frontEnd\Node"

【注意】：node.js 會(huì)自動(dòng)尋找該路徑下的 node_modules 文件夾為實(shí)際存放全局模塊的路徑。以后安裝的全局模塊（npm install ××× -g安裝的模塊）都會(huì)被放到 “D:\profession\frontEnd\Node\node_modules” 下，跟 npm 模塊在同一個(gè)文件夾下。

設(shè)置緩存文件夾：
在 Node 文件夾下新建一個(gè) node_cache 文件夾。

npm config set cache " D:\profession\frontEnd\Node\node_cache"

5、修改npmrc文件默認(rèn)值

在D:\profession\frontEnd\Node\node_modules\npm下

修改為：prefix=D:\profession\frontEnd\Node。

如果不做這個(gè)修改，則 npm 運(yùn)行 “npm ls -g” 的時(shí)候，仍然以默認(rèn)的路徑來(lái)查找已經(jīng)安裝的全局模塊

6、全局安裝 express 模塊

npm install express -g

1. 全局安裝的express模塊在node_modules文件夾下

2. Express與npm在同一文件夾下

2.2 基于 Node.js 安裝 cnpm（淘寶鏡像）

1、安裝cnpm

npm install -g cnpm --registry=https://registry.npm.

直接使用npm來(lái)安裝一些工具的話會(huì)比較慢，所以，我們使用淘寶鏡像cnpm。以后，使用到npm可以替換為cnpm

2、驗(yàn)證 cnpm 安裝是否成功

cnpm -v

2.3 安裝vue

cnpm install vue -g

2.4 安裝webpack

cnpm install webpack -g

2.5 安裝vue命令行工具。即：vue-cli

cnpm install vue-cli -g

Vue-cli這個(gè)工具可以幫我們搭建好我們需要的模板，比較簡(jiǎn)單。

2.6 安裝webpack-cli

cnpm install webpack-cli -g

2.7 檢測(cè)安裝是否成功

好了，至此 Vue 的環(huán)境已搭建完畢了。

3. 使用 vue-cli 創(chuàng)建項(xiàng)目

1、新建一個(gè)項(xiàng)目

在硬盤上找一個(gè)文件夾放工程用的，在終端中進(jìn)入該目錄

cd 目錄路徑

2、根據(jù)模板創(chuàng)建項(xiàng)目

vue init webpack helloworld

“helloworld” 是項(xiàng)目名（可隨意?。?/p>

會(huì)有一些初始化的設(shè)置，如下輸入:

（以上命令是生成一個(gè)基于webpack模板的新vue工程，工程的名字是：helloworld；當(dāng)然，名字取啥樣，隨你意）

3、進(jìn)入工程目錄

cd helloworld

工程目錄如圖所示:

這里推薦使用的前端工具是 “VsCdoe”。

至此，一個(gè)新的項(xiàng)目文件夾就創(chuàng)建完成，這個(gè)項(xiàng)目文件是在使用了腳手架vue-cli的前提下創(chuàng)建的，所以使用了這個(gè)工具提供的默認(rèn)版式， 這就是使用腳手架搭建的項(xiàng)目文件的結(jié)構(gòu)

4、安裝項(xiàng)目依賴

因?yàn)楦鱾€(gè)模板間都是相互依賴的，所以要安裝依賴，在命令行輸入 cnpm install ,你會(huì)發(fā)現(xiàn)在已經(jīng)創(chuàng)建的項(xiàng)目結(jié)構(gòu)里面會(huì)多出一個(gè) node_modules 的文件夾，里面就是剛才安裝的所有依賴。

一定要從官方倉(cāng)庫(kù)安裝，npm 服務(wù)器在國(guó)外所以這一步安裝速度會(huì)很慢。

npm install

5、啟動(dòng)項(xiàng)目

npm run dev

此命令是開啟正常開發(fā)模式，會(huì)正常監(jiān)聽 808 0端口，然后打開瀏覽器，地址就是：http://localhost:8080/，當(dāng)然，這里的端口你可以在 config 文件下的index.js 里進(jìn)行更改）

6、再次新建一個(gè)項(xiàng)目

如果已經(jīng)全局安裝過 vue-cli 了，再搭建項(xiàng)目的時(shí)候無(wú)需再安裝一遍，直接使用 vue init webpack 項(xiàng)目名 即可。

vue init webpack 項(xiàng)目名