天天看點

Vue搭建項目的過程

Vue搭建項目的過程

目錄包括如下:

a. 安裝node.js

b. 安裝cnpm

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

d. 用vue-cli建構項目

e. 安裝項目所需的依賴

f. 運作項目

一、安裝node.js

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

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

Vue搭建項目的過程

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

Vue搭建項目的過程

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

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

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

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

二、 cnpm 安裝

在指令行中執行:

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

如下圖所示,即安裝成功

Vue搭建項目的過程

三、安裝vue-cli腳手架

在指令行中執行:

cnpm install -g vue-cli

(注意,這裡使用cnpm來替代npm,npm相比較有點慢)

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

四、建構項目

標明檔案目錄,cd切換到相對應的檔案下(這個是在桌面下)

Vue搭建項目的過程

指令行中執行:

vue init webpack firstVue

(初始化一個項目,webpack是建構工具,firstVue指的是檔案的名稱)

Vue搭建項目的過程

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

cd firstVue

npm install

npm run dev

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

五、安裝項目的依賴:

打開firstVue的檔案夾,目錄如下:

Vue搭建項目的過程

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

Vue搭建項目的過程

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

cnpm install 或者npm install

Vue搭建項目的過程

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

Vue搭建項目的過程

六、運作項目

指令行中執行:

npm run dev

Vue搭建項目的過程

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

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

Vue搭建項目的過程

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