最近工作上沒(méi)有太多事情，自己就研究了一下 Vue ,以前自己在項(xiàng)目中都是用 Angular,但聽(tīng)盆友說(shuō) Vue的效率更高就想著嘗試做一個(gè)小demo。

首先配置Vue 運(yùn)行環(huán)境 Vue +webpack 構(gòu)建項(xiàng)目

1. 安裝node

2. 全局安裝 vue-cli

npm inatall -g vue-cli

vue : 查看是否安裝成功

vue list : 查看可用的模板

3. 創(chuàng)建一個(gè)基于 “webpack”模板的新項(xiàng)目

vue init webpack project-name(默認(rèn)安裝 2.0 版本)

vue init webpack#1.0 project-name (安裝 1.0 版本)

此時(shí) cd 進(jìn)入到剛剛創(chuàng)建的項(xiàng)目名

-build中配置了webpack的基本配置、開(kāi)發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置等

-config中配置了路徑端口值等

-node_modules為依賴的模塊

-src放置組件和入口文件

-static放置靜態(tài)資源文件

-index.html文件入口

webpack中的一些解釋

new HtmlWebpackPlugin這個(gè)插件的作用是把output輸出的文件自動(dòng)插入到html里

1.cd project-name

2.Npm install

3.Npm run dev

4.在瀏覽器輸入localhost:8080就可以打開(kāi)vue小項(xiàng)目了

（注意） 在運(yùn)行中因?yàn)?npm 的版本小于 （3.0.0） 會(huì)導(dǎo)致不能正常運(yùn)行這里升級(jí)npm版本

然后在運(yùn)行就可以了