Vue腳手架初始化專案
阿新 • • 發佈:2018-12-07
Vue專案初始化
在使用webpack之前,需確保安裝好環境,因為我的專案使用npm進行初始化,所以需要先配置node.js的環境,也可以使用yarn進行專案初始化
配置node環境
首先是node.js,到node的官網下載node
node.js官網
在官網中下載長期支援版,不要下載右邊的最新版本,防止版本太新造成bug
下載後安裝
開啟cmd
$ node -v
如果安裝成功,會顯示版本號
安裝完node後,我們開始正式初始化我們的Vue專案
安裝Vue
Vue中文官網
開啟官網,使用npm進行安裝(使用npm前需要有node的環境)
使用Vue官方提供的快速構建腳手架vue-cli
// 使用Vue官方提供的快速構建腳手架vue,這裡進行全域性安裝
$ npm install -g vue-cli
安裝完成後,進行專案的初始化
// 初始化的命令為 $ vue init webpack 專案名,如下例子
$ vue init webpack my-demo
命令開始後,會進行模板建立的資訊的初步建立
第一項:專案名,直接確認(enter鍵)
第二項:專案描述,也是確認
第三項:作者資訊,可以自行設定
第四項:會有選項,選擇第一項 standalone
第五項:vue-router外掛,具體請看vue-router官網,這裡作者因為專案需要,所以選擇了yes(Y)
第六項:ESLint,一種程式碼規範和錯誤檢查工具,能夠幫助我們的vue專案有一個統一的程式碼風格,這裡選擇Y
第七項:在上一項選擇Y後,有安裝選擇項,選擇Standard
第八項:單元測試,作者目前專案不需要,所以選擇N
第九項:好像也是測試,也是選擇N
最後一項:選擇安裝工具,可以使用node提供的npm,也可以使用Yarn, Yarn具體官網,因為之前安裝了node,所以這裡使用npm,確認後等待專案的初始化完成
初始化完成