前言
四月份已經(jīng)要悄悄過去了拄踪，從三月份辭職到進入新的公司，一切都顯得特別的快拳魁，心情也是越發(fā)的靜不下來惶桐，趁著今天心情特別輕松越快，感緊來寫篇筆記先潘懊。隨便說下姚糊，我的個人網(wǎng)站已經(jīng)換了一套風格了，更加的適合閱讀授舟，有興趣可以去看看啦~zhengyepan.com
首先救恨，做vue的項目，我們如果不用官方提供的腳手架释树，我們就必須自己去搭建項目所需的一切東西肠槽。這些項目所需要的目錄結構啊 ，等等奢啥，感覺有點重復并且做項目的時候老是自己搭建未免太無趣秸仙。
腳手架是指通過輸入簡單指令幫助你快速搭建好一個基本環(huán)境的工具。
vue官方提供了vue-cli腳手架桩盲。下面我把我搭建的步驟和所需要注意的點列出來寂纪，做一個參考，如果你覺得對你有幫助赌结，請一定不要節(jié)省你的贊~.
步驟一捞蛋、安裝vue-cli，配置vue命令環(huán)境
如果你還沒有安裝nodejs的話姑曙，請先安裝nodejs
全局安裝vue-cli
npm install vue-cli -g
當然了襟交，我們是在國內迈倍，npm安裝的速度和下載的時候可能會出問題伤靠，所以我現(xiàn)在用cnpm 安裝
具體安裝
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
然后運行
$ cnpm install [name]
安裝完vue命令環(huán)境后，我們測試是不是安裝成功啼染，直接
vue -version
vue-cli提供了幾個模板給開發(fā)者用于不同類型的項目宴合，我們可以通過查看，一般我們用webpack和webpack-simple的比較多迹鹅，其他幾種卦洽，大家可以去官網(wǎng)了解下具體用法了，這里我選擇用webpack.
vue list
步驟二斜棚、初始化項目阀蒂，生成項目模板
vue init webpack demo
vue init 模板名稱 + 項目名字
上面的意思是该窗，首先我們選擇webpack的模板還有demo作為項目名字
選擇相應的選項，我是直接按Enter就默認了蚤霞，為了演示酗失，如果有特別需要可以進行相關選項，接下來就等待安裝完整即可
步驟三昧绣、進入生成的項目目錄规肴，安裝依賴和運行項目
經(jīng)過一番焦急的等待，我終于等到安裝好的這一刻了夜畴，可以看到element-ui-test目錄下已經(jīng)新建好了一個demo文件夾了拖刃，里面就是我們安裝的目錄結構了。
然后我們可以看到那個命令行提示消息說贪绘，運行這個項目只要進入這個文件夾兑牡，然后run一下就可以了，在這里要說一下兔簇，有的讀者安裝后還多了一步就是在cd [文件名]下面還有個npm install這一步发绢，這一步為啥我沒有呢，原因是我已經(jīng)裝過依賴了垄琐，所有沒有安裝依賴的同學要進行多一步操作就是安裝依賴了边酒，具體做法是
cd demo
cnpm install
npm run dev
還是使用cnpm 安裝 npm 運行，下載的適合就用國內淘寶的鏡像會比較快速狸窘，也不會下載中斷或出錯墩朦。
現(xiàn)在我的demo項目已經(jīng)運行在8080端口了，現(xiàn)在我們打開瀏覽器輸入http://localhost:8080就可以看到效果,當然啦翻擒，如果你的8080端口被其他項目占用了氓涣，vue也會用其他端口的，這個不用擔心陋气。
當然啦劳吠，關于wenpack的只是也是一個大體系，為什么我們需要和webpack一起用呢巩趁，這是因為痒玩，我們用的單文件組件的時候，需要用vue-loader來解析.vue后綴的文件议慰，還有其他不同類型文件也需要不同的loader來解析蠢古，所以vue的項目最好配合webpack。
還有一點就是運行npm run dev 是啟動測試服務别凹，實際上線上線的話是
npm run build
將項目打包輸出dist目錄草讶，這個目錄就拷貝到服務器上即可，相關知識可以百度了解更多哈炉菲，這里就不跑題啦
到此項目的腳手架就搭好了堕战，接下來就是你發(fā)揮的時候了騷年 謝謝大家觀看坤溃，請不要節(jié)省你的贊啊~
歡迎訪問我的個人網(wǎng)站zhengyepan.com
歡迎討論交流~
