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

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

2、使用 npm 方法。這種方式是使用了官方提供的一個 vue-cli 腳手架工具來自動生成一個項目模板（在命令行中使用）。這種方式更易于構建大型應用（建議：后期使用）

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

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

Vue 版本：2.9.6
前端工具：VsCode

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

2. 使用 vue-cli 搭建 Vue

2.1 設置 Node 環(huán)境

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

2、安裝Node.js

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

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

3、驗證Node.js是否安裝成功

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

查看 node 版本：

node -v

查看 npm 版本：

npm -v

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

設置nodejs prefix（全局）：

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

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

設置緩存文件夾：
在 Node 文件夾下新建一個 node_cache 文件夾。

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

5、修改npmrc文件默認值

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

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

如果不做這個修改，則 npm 運行 “npm ls -g” 的時候，仍然以默認的路徑來查找已經(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來安裝一些工具的話會比較慢，所以，我們使用淘寶鏡像cnpm。以后，使用到npm可以替換為cnpm

2、驗證 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這個工具可以幫我們搭建好我們需要的模板，比較簡單。

2.6 安裝webpack-cli

cnpm install webpack-cli -g

2.7 檢測安裝是否成功

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

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

1、新建一個項目

在硬盤上找一個文件夾放工程用的，在終端中進入該目錄

cd 目錄路徑

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

vue init webpack helloworld

“helloworld” 是項目名（可隨意取）

會有一些初始化的設置，如下輸入:

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

3、進入工程目錄

cd helloworld

工程目錄如圖所示:

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

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

4、安裝項目依賴

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

一定要從官方倉庫安裝，npm 服務器在國外所以這一步安裝速度會很慢。

npm install

5、啟動項目

npm run dev

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

6、再次新建一個項目

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

vue init webpack 項目名