1. 程式人生 > >搭建vue腳手架(vue-cil)

搭建vue腳手架(vue-cil)

準備工具:node webpack

1、node的安裝  

node的安裝包從官網獲取,安裝是很簡單的,我目前是已經安裝過的  window+r  然後輸入 cmd  可以到達命令列頁面

輸入 node -v  (注意node後有空格)可以獲得當前的node版本號

npm的全稱:Node Package Manager.(Node包管理器),是Node的包的一個管理工具

1)下載並安裝  npm install

2)升級安裝包  npm update

3)解除安裝安裝包  npm uninstall/rm

由於npm的資源有限制,所以還需要安裝淘寶的npm映象--cnpm  

cnpm是一個完整 npmjs.org 映象,你可以用此代替官方版本(只讀),同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。

可以參照淘寶cnpm網址進行安裝

或者直接輸入 

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

等待安裝完成  輸入 cnpm -v  可以檢視當前cnpm版本號

2、接下來就是安裝vue了

在命令列 輸入 

 cnpm install vue

3、安裝 vue-cil腳手架構建工具

cnpm install --global vue-cli

4、安裝基於webpack的專案

更改目錄到想安裝的地址然後初始化一個專案,有如下兩種方法

 vue init webpack my-project  //初始化一個專案
 vue init webpack-simple my-project  //初始化一個簡單專案

 執行初始化命令的時候會讓使用者輸入幾個問題的選擇,可以根據自己意願自己選擇,嫌麻煩的話可以直接回車選擇預設選項

需要注意的是 專案名稱不是是大寫,否則會報錯

5、剛開始的專案是沒有依賴的  直接 npm run dev 是會報err的

所以首先應該

cnpm install

6、待依賴安裝完成後,執行專案 

npm run dev

7、在瀏覽器中開啟命令列給出的地址(如:我的地址是  http://localhost:8080),若出現下圖,則代表安裝成功