Vue搭建項目的過程

目錄包括如下：

a. 安裝node.js

b. 安裝cnpm

c. 安裝vue-cli腳手架建構工具

d. 用vue-cli建構項目

e. 安裝項目所需的依賴

f. 運作項目

一、安裝node.js

從node.js官網下載下傳并安裝node，安裝過程很簡單，點選“下一步“即可

安裝完成之後，打開指令行工具，輸入 node -v，如下圖，如果出現相應的版本号，則說明安裝成功。

npm包管理器，是內建在node中的，是以，直接輸入 npm -v就會如下圖所示，顯示出npm的版本資訊。

OK！node環境已經安裝完成，npm包管理器也有了。

由于有些npm有些資源被屏蔽或者是國外資源的原因，

經常會導緻用npm安裝依賴包的時候失敗，

所有我還需要npm的國内鏡像—cnpm

二、 cnpm 安裝

在指令行中執行：

npm install -g cnpm --registry=http://registry.npm.taobao.org

如下圖所示，即安裝成功

三、安裝vue-cli腳手架

在指令行中執行：

cnpm install -g vue-cli

（注意，這裡使用cnpm來替代npm，npm相比較有點慢）

以上環境和工具都好了，開始來動手建構項目吧！！！

四、建構項目

標明檔案目錄，cd切換到相對應的檔案下（這個是在桌面下）

指令行中執行：

vue init webpack firstVue

（初始化一個項目，webpack是建構工具，firstVue指的是檔案的名稱）

接下來輸入需要執行的指令：

cd firstVue

npm install

npm run dev

一步一步運作完之後，需要填寫項目的名稱、作者、描述等等，這些回車預設即可；

五、安裝項目的依賴：

打開firstVue的檔案夾，目錄如下：

打開檔案package.json檔案，暫時隻是搭建了一個結構架構，項目中的依賴資源還沒有下載下傳

指令行執行，安裝項目所需要的依賴

cnpm install 或者npm install

安裝完成之後，在項目firstVue檔案夾中多出一個node_modules檔案夾，即為我們的依賴包

六、運作項目

指令行中執行：

npm run dev

簡單介紹下 npm run dev 指令，其中的“run”對應的是package.json檔案中，scripts字段中的dev，也就是 node build/dev-server.js指令的一個快捷方式

運作成功之後會自動打開 localhost:8080（如果浏覽器沒有自動打開，可以手動輸入;打開之後，如下圖所示

看到上面的頁面，及項目搭建并運作成功了呢！！！。。。。。