昨天我們對項目所用的環(huán)境和框架工具進行安裝。今天我們將利用這些工具構(gòu)建我們的項目目錄。
搭建項目之前，去看了別人的文章，試著擼了一遍代碼，也就是個重復造輪子的過程，感覺沒有意思，所以才萌生出寫個自己的項目的想法，正好答應(yīng)幫別人做一個npp聊天插件的前端，就拿來練手了。
前面提到了vue-cli腳手架工具，使用起來很簡單，在你想創(chuàng)建項目的目錄下輸入cmd：
vueinitwebpackchat//chat就是項目的名字
在輸入之后會出現(xiàn)許多配置項，一路enter就可以了。
但是其中的ESLint推薦不使用(運行的時候會檢查代碼規(guī)范，規(guī)范什么的太麻煩，畢竟是小demo)。
ESlint是可以配置規(guī)范的，在多人協(xié)作開發(fā)的過程中，代碼的規(guī)范非常的重要。有一套良好的代碼規(guī)范，對于項目的開發(fā)和維護都很友好。我這里不用，是因為配置麻煩，以及運行的時候總報錯很影響心情。
下面對每個配置項做個注釋：
?Projectnamechat
//項目名默認就是caht
?ProjectdescriptionAVue.jsproject
//文檔描述，會在README.md文件上生成輸入的內(nèi)容，默認AVue.jsproject
?Author_****<****@**.com>
//作者，如果有g(shù)it，就是讀取git的User信息
?Vuebuildstandalone
//有兩個選項，第一個選項寫著recommendedformostusers果斷選了（至于干什么用到并不知道）
?UseESLinttolintyourcode?Yes
//是否使用ESlint默認是
?PickanESLintpresetStandard
//選這一個ESlint類型
?SetupunittestswithKarma+Mocha?Yes
//使用單元測試工具karma和mocha默認是
?Setupe2etestswithNightwatch?Yes
//使用e2e測試框架NightWatch默認是
打開我們的項目，可以看到如下的目錄結(jié)構(gòu)：
build：webpack打包配置文件夾
config： 同樣是打包配置的文件夾，只是職能不同
src：源碼存放文件夾
static： 靜態(tài)文件存放位置
test：測試代碼存放位置，展開可以看到單元測試和e2e測試兩個目錄
.babelrc： babel的配置文件，有關(guān)babel可參見：http://www.ruanyifeng.com/blo...
index.html: 單頁應(yīng)用的html文件，可以看成是一個窗口(window)
package.json: npm的配置文件，配置項目信息，需要安裝的模塊之類
README.md： 項目說明文檔
目錄分析完了，怎么啟動這個項目呢？
在啟動之前還需要安裝我們的依賴模塊，也就是package.json里面的模塊，在根目錄下cmd：
npm install
這個過程有點久，建議將npm配置為國內(nèi)鏡像，比如我之前說得淘寶鏡像安裝完了之后我們的項目目錄會多出一個node_modules目錄，里面會有很多很多文件夾，賊大。
安裝完之后就運行我們項目了，在根目錄下cmd：
npm run dev
這個命令可以在package.json中找到：
{
"name":"chat","version":"1.0.0",
"description":"A Vue.js project",
"author":"GGwujun <13786278418@163.com>",
"private":true,
"scripts":{
? ? "dev":"node build/dev-server.js",//就是這里
? ? ? "build":"node build/build.js",
? ? ? "unit":"cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
? ? ? "e2e":"node test/e2e/runner.js",
? ? ? "test":"npm run unit && npm run e2e"
},
"dependencies":{"vue":"^2.1.0"},
.....
然后瀏覽器中輸入localhost:6060（其實會自動彈出），就可以看到如下頁面
我們這里把端口改成6060了，其實默認是8080，因為我本地8080端口被占用了
改端口就在下圖所示文件
大功告成?。∵@一章就到這里了。
