基於Vue-cli 快速搭建項目

Vue-cli能夠快速幫助咱們建立一個項目，這是官方給咱們提供的腳手架。下面我說一下vue-cli的使用方法。

1、準備工做

　　在使用vue-cli時，首先須要安裝nodejs，npm，其次需全局安裝vue和vue-cli

　　一、nodejs和npm安裝方法詳見https://www.cnblogs.com/le220/p/8670349.html

　　二、npm install -g vue

　　三、npm install -g vue-cli

2、vue-cli快速搭建項目

　　安裝完成後，同時在C:\Users\Andminster\AppData\Roaming\npm目錄下爲會生成幾個文件。

3、配置環境變量

　　Vue不是內部或外部命令問題解決

　　表示系統沒有找到vue.cmd的地址，須要將vue.cmd的地址添加到系統環境變量的path中。

　　能夠全局搜索，vue.cmd

 

右鍵選擇「打開文件所在目錄」，將該目錄添加至系統環境變量path中：

電腦——屬性——高級系統設置

 

 

4、安裝完成後，建立本身的工做空間，在cmd切換至剛剛建立好的工做空間，若是已經有工做空間，直接切換到工做空間便可。

　　使用命令建立項目

　　vue init webpack test

　　test是項目名稱，這個名字本身隨便取。

　　命令輸入後，會進入安裝階段，須要用戶輸入一些信息

　　1、Project name (vuetest)            項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters）。

　　2、Project description (A Vue.js project)  項目描述，也可直接點擊回車，使用默認名字

接下來會讓用戶選擇

　　3、接下來也是選擇題Pick an ESLint preset (Use arrow keys)            選擇一個ESLint預設，編寫vue項目時的代碼風格，由於我選擇了使用ESLint

　　4、Standard (https://github.com/feross/standard)    標準

　　5、AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

　　6、none (configure it yourself)    這個不用說，本身定義風格

　　具體選擇哪一個因人而異吧  ，我選擇標準風格

　　7、Setup unit tests with Karma + Mocha? (Y/n)  是否安裝單元測試，我選擇安裝

　　8、Setup e2e tests with Nightwatch(Y/n)?     是否安裝e2e測試 ，我選擇安裝

　　9、完成

5、運行項目

在項目文件夾下執行npm install（安裝依賴包），npm run dev（運行項目）。

在運行項目中若是遇到端口被佔用，找到bulid文件夾下的webpack-dev-server.js修改port便可。