安裝Vue之前漱挎，需要安裝npm力细，npm類似iOS的cocopods, 而npm在node里面睬澡，所以直接安裝node，就相當于安裝了npm眠蚂。
一：vue安裝步驟：
安裝VUE教程猴贰，我另一篇文章，有介紹npm是什么河狐？如何安裝Node.js和npm米绕？
這里做簡要介紹。
1馋艺，Node.js安裝
安裝好noedeJS然后繼續(xù)安裝下一步
2栅干、全局安裝vue-cli，執(zhí)行npm install --global vue-cli捐祠，這個過程很慢碱鳞。如果報錯，多運行幾次踱蛀。
npm install --global vue-cli
因為默認是從國外服務器下窿给，可以使用阿里巴巴在國內(nèi)的鏡像服務器。為了提高我們的效率率拒，可以使用淘寶的鏡像崩泡。
產(chǎn)生通過config命令設置默認下載路徑：
npm config set registry https://registry.npm.taobao.org
即可安裝npm鏡像，以后再用到npm的地方直接用cnpm來代替就好了猬膨。也就是：npm = cnpm角撞。
然后再執(zhí)行：
npm install --global vue-cli
3、安裝后，檢查是否安裝成功
vue -V (在此注意V為大寫)
二：創(chuàng)建新項目
1谒所、使用vue建一個項目名叫xxxx（vue init webpack xxxx）热康，注意項目名不能有大寫。
注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比較復雜專業(yè)的項目劣领，他的配置并不全放在根目錄下的 webpack.config.js中姐军。
image.png
- 1，Project name 工程項目名稱
- 2尖淘，Project description 工程項目描述
- 3庶弃，Author 作者名稱
2 、注意：
項目建立過程中德澈，有如下選擇，選擇NO固惯。
(該選項為使用ESLint規(guī)范你的代碼梆造，一個空格錯誤都將報錯，不開啟葬毫，避免不必要的麻煩)镇辉。
后兩項為單元測試，可以選擇No.
image.png
3贴捡、項目建立完成后忽肛，目錄結(jié)構(gòu)如下：
image.png
4、進入項目目錄文件夾（xYVuProject）中烂斋，就可以使用vue進行開發(fā)啦
5屹逛、使用npm run dev，便可以打開本地服務器實時查看效果（http://localhost:8080）
①：如果瀏覽器打開之后汛骂，沒有加載出頁面罕模，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js
image.png
建議將端口號改為不常用的端口帘瞭。如修改端口號8080改為：8081淑掌。如下圖。
另外我還將 build的路徑前綴修改為 ./（原本為/）蝶念，是因為打包之后抛腕，外部引入 js 和 css 文件時，如果路徑以 / 開頭媒殉，在本地是無法找到對應文件的（服務器上沒問題）担敌。所以如果需要在本地打開打包后的文件，就得修改文件路徑廷蓉。
如果上述①沒法做到柄错，那么就不管上面的①，直接進行②進行修改。
②：如圖中修改端口號8080改為：8081
image.png
然后售貌，按F5運行項目给猾，項目運行起來去網(wǎng)頁上修改端口號8080改為：8081，即可颂跨。
image.png
6敢伸、初始效果
image.png
三：項目結(jié)構(gòu)：
Vue項目開發(fā)的目錄結(jié)構(gòu)保持一致，容易理解并方便構(gòu)建與管理恒削，方便日后的維護和其他同事的閱讀池颈。
在初入前端的時候，一個項目中的文件夾會非常多钓丰，與Vue官網(wǎng)的簡單demo相差非常大躯砰，實際開發(fā)中會增加很多文件。
1携丁，Vue目錄結(jié)構(gòu)
image.png
image.png
2琢歇，主要項目目錄介紹
①.build目錄是webpack主要的配置目錄
image.png
其中比較重要是 webpack.base.conf.js
兼容ES6配置
image.png
配置地址常量
image.png
配置自定義loader
image.png
②.config目錄是對webpack和node最基礎的配置，定義了當前所屬環(huán)境梦鉴，監(jiān)聽的端口號李茫，生成靜態(tài)文件目錄位置等
image.png
其中比較重要是index.js
配置node監(jiān)聽端口、靜態(tài)文件位置肥橙，靜態(tài)文件引用前綴魄宏、node代理等
image.png
③js目錄是項目開發(fā)過程中的自行開發(fā)或引用的小型js庫
image.png
其中比較重要的是http.js，封裝了axios庫的常見用法存筏，可以配置統(tǒng)一的request攔截器和response攔截器宠互，其他的有類似日期類庫，echarts封裝類椭坚，vue的mixin庫等
4名秀，stylus目錄是css預處理語言目錄
image.png
主要的樣式文件
base --- 基礎組件樣式
mixin --- 混合函數(shù)庫
reset --- 重置樣式庫
variable --- 全局變量聲明
5，其他components藕溅、router匕得、store目錄
這三個目錄結(jié)構(gòu)是vue項目開發(fā)過程中獨有的，分別代表vue組件目錄巾表，vue-router配置目錄汁掠、以及vuex配置目錄。
具體規(guī)范見
vue組件開發(fā)規(guī)范
vue-router配置規(guī)范
vuex配置規(guī)范
6集币，vue文件結(jié)構(gòu)
image.png
