每一次学习，虽然学习的进度非常慢，但是要多做笔记，做多了，自然就掌握的多一点！
有一个痕迹，回头复习的时候，你会很开心，因为是你自己写的，及时很烂，但是都没有任何关系，坚持就好！
好，我们开始！
1， 新建一个目录：
1， npm init -y
这个时候：
为啥用webpack 打包写，因为可以采用es6 的模块化写！
2， npm i vue vue-router css-loader style-loader -D
3, webpack.config.js
var path = require('path');
module.exports = {
mode:"development",
// entry: {
// app: './src/action.js',
// vendors: './src/action2.js'
// },
entry:"./src/vm.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader','css-loader'] }
]
}
};4, src 目录下的vm.js
这个是入口文件：
import Vue from "vue/dist/vue.esm.js";
import VueRouter from "vue-router";
// import '../css/my.css'
import router from "./router"
Vue.use(VueRouter);
new Vue({
el: "#app",
data:{
name:"action"
},
router
});上面的写法，就是和我们的写法差不多！ 只是变成模块化的写法了！
以前的写法：
<!DOCTYPE html>
<html>
<head>
<title>action</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="c">
<label for="id1">dsfsdfsd</label>
<input id = "id1" type="radio" v-model="name" value="text"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#c",
data:{
name:'text'
}
});
</script>
</body>
</html>以上是直接引用库的方式，现在是es6模块化的方式
现在我们看下
显然，最后我们的webpack 还是会把我们所写的代码全部打包到 dist/bundle.js 中！
3， 路由列表的写法！
router.js
import VueRouter from 'vue-router';
import a from '../routers/a.js';
// import b from '../routers/b.js';
import header from '../routers/headerComp.js';
import {router2 ,r} from "../routers/b.js"
var router = new VueRouter({
routes:[
{
path:"/a",
components:{
default: a,
news:header
}
},
{
path:"/b",
components:{
default: r,
news:header
},
children:router2
}
]
});
export default router;
我先把 这个 几个组件先给它贴出来！
a.js
export default {
template:"<h2>aaa</h2>"
}b.js
import VueRouter from 'vue-router';
export let r = {
template:`
<div>
<h2>bbb</h2></br>
<router-view></router-view>
</div>
`
}
export let router2 = [
{
path:"b1",
component:{
template:"<h2>b1</h2>"
}
},
{
path:"b2",
component:{
template:"<h2>b2</h2>"
}
}
]
;
headerComp .js
// es6 writeStyle
export default {
template:"<h2>header</h2>"
}
都贴出来之后，就好看了！
1， 一个URL地址中，有多个视图，那么多个视图的写法如下：
我们重新理解下， 一个/b 的URL地址， 有两个视图 需要填充，每个视图都有name 属性，那么就根据那么属性
找到对应的组件进行填充就行了！
嵌套路由的写法！
在/b 下有子路由，那么就在/b 路由下挂载子路由，同时也要提供要填充的容器！
以上写法有点乱，所以下一节，我会把原来没有使用模块化的写法，贴出来！
实际上，上面都是vue1.x 写法，还是不常用，最后还是要用2.x 写法！