Vue.js在近兩年來的熱門程度想必大家都了解。因其輕量、具有簡單、靈活的 API和強大的社區(qū)被許多開發(fā)者所青睞。學(xué)習(xí)Vue首先你要明白你該如何從無到有去構(gòu)建一個項目，Vue官方建議使用Vue-cli腳手架工具。官方推薦的性能什么的就不用說了。廢話不多說，現(xiàn)在開始我們的項目構(gòu)建。
1.全局安裝vue-cli
cmd進入控制臺，鍵入命令 npm install -g vue-cli全局安裝vue-cli腳手架工具（前提是已經(jīng)安裝好了node.js，沒安裝的小伙伴打開鏈接下載安裝，因為node.js安裝都是傻瓜式安裝，一切按著默認步驟走就好，最后在控制臺鍵入命令入 node -v查看是否安裝成功）
2.初始化項目
cd 進入你想要安裝的路徑（我這里默認安裝在user下）鍵入命令 vue init webpack vueProject(vueProject為項目名-自己起，安裝類型為webpack，當(dāng)然如果你們不想用webpack也可以更換成其他的打包工具)
到這里恭喜你已經(jīng)安裝成功~
注意：
- 項目名不能存在大寫，否則會報錯，如圖的sorry,name can no....
- 剛開始接觸Vue開發(fā)，建議不用ESLint，當(dāng)然這個有利于你的代碼編寫規(guī)范。只能說有利有弊，這個需要你們自己去感受。
3.項目結(jié)構(gòu)
如下圖：
4.安裝依賴
- cd vueProject(進入項目名)
- cnpm install(安裝依賴)
注：cnpm是淘寶 NPM 鏡像，在國內(nèi)推薦使用，下載速度比npm要快。
安裝命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功后項目結(jié)構(gòu)會多一個依賴文件，如下圖：
node_modules是依賴加載庫，因為初始化模塊依賴比較多所以我們用cnpm install,它只安裝package.json里有的依賴。如果只需要加載一個依賴的話我們可以：cnpm install 依賴插件名 --save(--save加載依賴的同時能記錄在package.json里)或者也可以先在package.json里寫入要加載的依賴再cnpm install
5.項目運行
cnpm run dev
因為vue-cli默認監(jiān)聽8080端口（可以在config/index.js里面查看或修改監(jiān)聽端口）
運行成功后在瀏覽器輸入：localhost:8080查看
注意：這里是默認服務(wù)啟動的是本地的8080端口，所以請確保你的8080端口不被別的程序所占用。
6.項目打包
鍵入命令：cnpm run build
打包后項目會生成一個dist文件夾如下圖：
打包后的項目就可以部署到服務(wù)器上。
舉個栗子
在用vue+node+express架構(gòu)時可以將打包后的文件放在express/server/pubilc下。當(dāng)運行服務(wù)的時候項目就可以直接跑起來了，文件結(jié)構(gòu)如下圖：
注意：因為這樣拿數(shù)據(jù)是跨域的，所以一般可以用代理接口的做法。在config/index.js下如下圖：
在瀏覽器輸入：localhost:8080/api它請求的是localhost:3001
在這里只是簡單的提一下，但時候有空我會整理一篇完整敘述vue+node+express架構(gòu)實現(xiàn)思路。
7.結(jié)語
至此簡單的一個項目構(gòu)建完畢....后面有時間我會詳細的分享一個vue全家桶+node+express+mysql的實戰(zhàn)項目給大家。今天的分享暫告一段落，希望能給大家?guī)韼椭乙彩菑?開始去學(xué)習(xí)vue其中遇到過很多坑。希望小伙伴們能順利些，當(dāng)然如果有興趣的小伙伴可以在下面留言，我可以給大家推薦一些好的學(xué)習(xí)資料，對于你們的學(xué)習(xí)肯定會有幫助的。
