vue-cli
手動(dòng)配置自己:
webpack+vue-loader
webpack加載模塊
如何運(yùn)行此項(xiàng)目塔插？
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
"scripts":{
"dev":"webpack-dev-server --inline --hot --port 8082"
}
以后下載模塊：
npm install <package-name> --save-dev
EADDRINUSE 端口被占用
少了:
webpack-dev-server
webpack
.vue 結(jié)尾，之后稱呼組件
路由:
vue-router
-> 如何查看版本:
bower info vue-router
路由使用版本: 0.7.13
配合vue-loader使用:
下載vue-router模塊
cnpm install vue-router@0.7.13import VueRouter from 'vue-router'
Vue.use(VueRouter);
配置路由
var router=new VueRouter();
router.map({
路由規(guī)則
})開(kāi)啟
router.start(App,'#app');
注意:
之前: index.html -> <app></app>
現(xiàn)在: index.html -> <div id="app"></div>
App.vue -> 需要一個(gè) <div id="app"></div> 根元素
home news
路由嵌套:
和之前一模一樣
上線:
npm run build
-> webpack -p
腳手架:
vue-cli——vue腳手架
幫你提供好基本項(xiàng)目結(jié)構(gòu)
本身集成很多項(xiàng)目模板:
simple 個(gè)人覺(jué)得一點(diǎn)用都沒(méi)有
webpack 可以使用(大型項(xiàng)目)
Eslint 檢查代碼規(guī)范，
單元測(cè)試
webpack-simple 個(gè)人推薦使用, 沒(méi)有代碼檢查 √
browserify -> 自己看
browserify-simple
基本使用流程:
- npm install vue-cli -g 安裝 vue命令環(huán)境
驗(yàn)證安裝ok?
vue --version - 生成項(xiàng)目模板
vue init <模板名> 本地文件夾名稱 - 進(jìn)入到生成目錄里面
cd xxx
npm install - npm run dev
