手动配置自己: webpack+vue-loader webpack加载模块 ------------------------------------- 如何运行此项目？ 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 结尾，之后称呼组件 ---------------------------------------- 路由: vue-router -> 如何查看版本: bower info vue-router 路由使用版本: 0.7.13 配合vue-loader使用: 1. 下载vue-router模块 cnpm install vue-router@0.7.13 2. import VueRouter from 'vue-router' 3. Vue.use(VueRouter); 4. 配置路由 var router=new VueRouter(); router.map({ 路由规则 }) 5. 开启 router.start(App,'#app'); 注意: 之前: index.html -> <app></app> 现在: index.html -> <div id="app"></div> App.vue -> 需要一个 <div id="app"></div> 根元素 home news --------------------------------------------- 路由嵌套: 和之前一模一样 -------------------------------------------- 上线: npm run build -> webpack -p -------------------------------------------- 脚手架: vue-cli——vue脚手架 帮你提供好基本项目结构 本身集成很多项目模板: simple 个人觉得一点用都没有 webpack 可以使用(大型项目) Eslint 检查代码规范， 单元测试 webpack-simple 个人推荐使用, 没有代码检查 √ browserify -> 自己看 browserify-simple -------------------------------------------- 基本使用流程: 1. npm install vue-cli -g 安装 vue命令环境 验证安装ok? vue --version 2. 生成项目模板 vue init <模板名> 本地文件夹名称 3. 进入到生成目录里面 cd xxx npm install 4. npm run dev --------------------------------------------
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"></div> <script src="build.js"></script> <!-- 入口main.js: import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import routerConfig from './router.config.js' Vue.use(VueRouter); //配置路由 const router=new VueRouter(); router.map(routerConfig); routerConfig： //专门配置路由规则 //引入模块 import Home from './components/Home.vue' : Home.vue: <template> <h3>我是主页</h3> <ul> <li><a v-link="{path:'/home/login'}">用户登录</a></li> <li><a v-link="{path:'/home/reg'}">用户注册</a></li> </ul> <div class="box"> <router-view></router-view> </div> </template> <style scope> .box{ border:1px dashed #000; } </style> import News from './components/News.vue' News.vue: <template> <h3>我是新闻</h3> <ul> <li><a v-link="{path:'/news/detail/001'}">第一条新闻</a></li> <li><a v-link="{path:'/news/detail/002'}">第二条新闻</a></li> </ul> <router-view></router-view> </template> import Login from './components/Login.vue' Login.vue： <template> <h3>用户登录</h3> </template> import Reg from './components/Reg.vue' Reg.vue： <template> <h3>用户注册</h3> </template> import Detail from './components/Detail.vue' : <template> <strong> {{$route.params | json}} <br> {{$route.query | json}} </strong> </template> export default{ '/home':{ component:Home, subRoutes:{ 'login':{ component:Login }, 'reg':{ component:Reg } } }, '/news':{ component:News, subRoutes:{ 'detail/:id':{ component:Detail } } } } router.redirect({ '/':'/home' }); router.start(App,'#app'); App.vue: <template> <div id="app"> <h3>vue-loader+ vue-router</h3> <div> <a v-link="{path:'/home'}">主页</a> <a v-link="{path:'/news'}">新闻</a> </div> <router-view></router-view> </div> </template> <script> </script> <style> body{ background: #ccc } .v-link-active{ font-size: 20px; color: #f60; } </style> --> </body> </html>
main.js
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import routerConfig from './router.config.js' Vue.use(VueRouter);//使用vue-router必写 //配置路由 const router=new VueRouter(); router.map(routerConfig); router.redirect({ '/':'/home' }); router.start(App,'#app');
App.vue
<template> <div id="app"> <h3>vue-loader+ vue-router</h3> <div> <a v-link="{path:'/home'}">主页</a> <a v-link="{path:'/news'}">新闻</a> </div> <router-view></router-view> </div> </template> <script> </script> <style> body{ background: #ccc } .v-link-active{ font-size: 20px; color: #f60; } </style>
Menu.vue
<template> <ul> <li v-for="val in list"> {{val}} </li> </ul> </template> <script> export default{ data(){ return { list:['apple','banana','orange'] } } } </script>
router.config.js
//专门配置路由规则 //引入模块 import Home from './components/Home.vue' import News from './components/News.vue' import Login from './components/Login.vue' import Reg from './components/Reg.vue' import Detail from './components/Detail.vue' export default{ '/home':{ component:Home, subRoutes:{ 'login':{ component:Login }, 'reg':{ component:Reg } } }, '/news':{ component:News, subRoutes:{ 'detail/:id':{ component:Detail } } } }
Detail.vue Home.vue Login.vue News.vue Reg.vue
<template> <strong> {{$route.params | json}} <br> {{$route.query | json}} </strong> </template>
<template> <h3>我是主页</h3> <ul> <li><a v-link="{path:'/home/login'}">用户登录</a></li> <li><a v-link="{path:'/home/reg'}">用户注册</a></li> </ul> <div class="box"> <router-view></router-view> </div> </template> <style scope> .box{ border:1px dashed #000; } </style>
<template> <h3>用户登录</h3> </template>
<template> <h3>我是新闻</h3> <ul> <li><a v-link="{path:'/news/detail/001'}">第一条新闻</a></li> <li><a v-link="{path:'/news/detail/002'}">第二条新闻</a></li> </ul> <router-view></router-view> </template>
<template> <h3>用户注册</h3> </template>
webpack.config.js
module.exports={ entry:'./main.js', output:{ path:__dirname, filename:'build.js' }, module:{ loaders:[ {test:/.vue$/, loader:'vue'}, {test:/.js$/, loader:'babel', exclude:/node_modules/} ] }, babel:{ presets:['es2015'], plugins:['transform-runtime'] } };
package.json
{ "name": "vue-loader-demo", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "dev": "webpack-dev-server --inline --hot --port 8083", "build":"webpack -p" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.16.0", "babel-runtime": "^6.11.6", "css-loader": "^0.25.0", "vue-hot-reload-api": "^1.3.2", "vue-html-loader": "^1.2.3", "vue-loader": "^8.5.4", "vue-style-loader": "^1.0.0", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }, "dependencies": { "vue": "^1.0.28", "vue-router": "^0.7.13" } }