一直在Angular 與 Vue 之間徘徊，之前一直再用Agular 寫東西含蓉，公司再用得也是券盅，但是升級到2之后明顯感覺不如Vue（個人見解）帮哈，所以果斷倒戈Vue，然后這兩天一直在啃Vue锰镀，說真的娘侍，學新東西的感覺是超級爽的，所以趁熱將一些東西記錄下來泳炉。
一憾筏、搭建環(huán)境
由于新的node已經(jīng)集成了npm，所以直接安裝node花鹅，前往node官網(wǎng)下載最新版本的node氧腰，根據(jù)自己的操作系統(tǒng)選擇相應的包，按照步驟一步步走就可以刨肃，這里不做過多介紹古拴。
安裝好后可以打開命令行用 ?npm-v ? node-v 查看是否安裝成功以及版本號
如果以前已經(jīng)安裝過node ?和 npm 最好升級到最新版本，命令行 npm install npm@x.xx.x
首先全局安裝vue-cli,打開CMD命令行真友，npm install -g vue-cli
接下來新建項目黄痪，運行 vue init webpack demo ? 這里的demo是你項目的名字，接下來會有一些初始化的設置盔然，其中vue-router是路由桅打，反正我都會選擇安裝是嗜，其他的可以回車跳過或者選擇no
---按照提示，cd到新建的項目下挺尾，運行npm install
---運行npm run dev
到這里鹅搪，不出意外的話可以在瀏覽器里面看到Vue的初始化模板了，如果沒有可能是端口號被占用潦嘶，這里就將配置文件config/index.js里面的端口號改掉就可以了
另外還要補充一下涩嚣，最后的打包如果在本地起服務器運行打包后的文件是無法運行的崇众，會報錯404掂僵，所以這里將assetsPublicPath里面的 "/"改成"./"，截圖里面沒有改顷歌，懶得再截了锰蓬，哈哈
我們先來看一下運行后的樣子
二、安裝Element
到這里我們就可以愉快的玩耍Vue了眯漩，但是我們之前說的是 Vue + Element 所以接下來我們藥繼續(xù)安裝ElementUI
cd到當前項目 運行 npm i element-ui -S
到這里我們已經(jīng)安裝好了element芹扭，接下來就是在項目里面引用了，打開src目錄下的main.js
下面我們就可以愉快的使用element里面優(yōu)雅的組件了赦抖，這個是element的網(wǎng)址http://element.eleme.io/#/zh-CN/component/form舱卡，也可以自行百度
我們用幾個小東西試一試
這里我們需要注意的是，每一個.vue文件里面只能有一個根目錄队萤，就是說在這個class為hello的div下面不能有并列的元素轮锥，要不然會報錯，好了到這里就真的可以愉快的玩耍了
三要尔、打包
在項目目錄下運行 npm run build ?運行完成之后會在項目里面增加一個dist的目錄舍杜，直接把這個目錄丟給服務器就好了，dist目錄的名字可以自定義在配置文件里面
ok至此赵辕，就是本篇的全部內(nèi)容既绩，剩下的就去vue文檔一步步的學習吧，相信vue會給你帶來很大的樂趣还惠。
