6-5 vue-router、vue-cli和单文件组件-模块化开发
目录：
- vue-router 模块化
- axios模块化
- 自定义组件添加事件
一、vue-router 模块化
我们在安装webpack的时候，并没有默认安装 vue-router，所以我们这会需要安装 vue-router，并且实现vue-router的模块化。
目录结构：
vue-cli-demo //项目名
|-node_modules //插件安装目录
|-src
|-assets //项目所需的资源目录(静态资源)
|-logs.png
|-components //手动创建我们需要 路由 跳转的组件(分别是home和news)
|-MyButton.vue //自定义按钮组件,在App.vue中调用，并且 绑定事件
|-Home.vue //<template><div id="home"><h1>这是主页</h1></div></template>
|-News.vue //<template><div id="news"><h1>这是新闻</h1></div></template>
|-App.vue
|-main.js //入口文件
|-routes.config.js //单独手动创建配置路由的文件
|-.babelrc
|-editorconfig
|-.gitignore
|-index.html //挂载文件
|-package.json //工程文件
|-package-lock.json
|-README.md
|-webpack.config.js //webpack配置文件
思路图：
1.1、vue-router安装
#进入webpack项目 D:\PycharmProjects\vue>cd vue-cli-demo #安装生产需要的 vue-router 模块，-S：指的是生产需要 D:\PycharmProjects\vue\vue-cli-demo>npm install vue-router -S
1.2、编辑main.js
说明：当我们导入 vue-router的时候需要使用 Vue.use()安装插件，具体使用方法：Vue.use(plugin)
import Vue from 'vue'
import App from './App.vue'
#'vue-router' 是固定的，是我们安装vue-router的名字,VueRouter 是别名
import VueRouter from 'vue-router'
//使用VueRouter
Vue.use(VueRouter);
new Vue({
el: '#app',
render: h => h(App)
})
1.3、 编辑 App.vue
说明：vue-router路由组件导入之后，router-link标签就可以在任何组件中使用
<template>
<div id="app">
{{msg}}
<!--设置路由指向-->
<div>
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</div>
<!--路由显示的内容-->
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
//export default{}
</script>
1.4、编辑router.config.js
//专门搞一个路由配置文件
import Home from './components/Home.vue'
import News from './components/News.vue'
export default { //之前我们定义在外面的，现在我们把它定义在对象里面
routes: [
{
path:'/home',
component: Home
},
{
path:'/news',
component: News
}
]
}
1.5、在main.js中导入router.config.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//导入路由配置文件
import routerConfig from './routes.config.js'
Vue.use(VueRouter);
//创建路由实例
const router = new VueRouter(routerConfig);
new Vue({
el: '#app',
render: h => h(App),
router //创建好的路由实例，需要在vue实例中适配一下
});
1.6、对路由监视，编写App.vue
说明: 主要通过 watch选项，监视 $route的路由变化。关于watch的使用：实例方法/数据
<template>
//html内容，上面的App.vue中有
</template>
<script>
export default {
name: 'app',
data() {
//数据
},
mounted(){
console.log(this.$route); //$route是router-link自身提供的，获取当前路由信息
},
watch:{ //对路由监视
$route: (newValue,oldValue) => { //newValue,oldValue都是对象
console.log('旧值:'+oldValue.path,'新值:'+newValue.path);
}
}
}
</script>
知识点：(非常重要！！！)
就是说我们在模块化开发的过程中，一个js文件需要导入其他js文件中的 属性或者方法也好，需要在定义完成属性和方法之后，需要以对象的方式进行导出后，再去引用：
//1.routes.js 定义
//定义常量
const routes= [....]
//必须导出单个对象
export default routes
//必须导出多个对象，这样其他js文件才能使用
export default {routes，....}
//2.main.js中引用
//必须导入路由对象
import routes from './routes.js'
//引用导入的路由对象
const router = new VueRouter(routes);
好了，路由配置结束了。
二、axios模块化
2.1、axios的安装
注：-S表示生产依赖，-D表示开发依赖，安装axios目的是给后端项目发送ajax请求
D:\PycharmProjects\vue>cd vue-cli-demo #安装 axios插件 D:\PycharmProjects\vue\vue-cli-demo>npm install axios -S
2.2、axios的使用
说明：axios跟vue-router是不一样的，vue-router只要我在main.js入口文件引入，并且 Vue.use()使用就可以。axios就不一样了，axios是没有办法采用 Vue.use(axios)方式去全局引用。
- 方式1：在每个组件中引入axios
- 方式2：在main.js中全局引入axios并添加到Vue原型中
方式1：在每个组件中都需要引入axios
//1.在App.vue中引用
<template>
<div id="app">
<!--触发事件按钮-->
<button @click="send">发送AJAX请求</button>
</div>
</template>
<script>
//导入axios
import axios from 'axios'
//在组件对象中使用
export default {
methods:{
send(){ //请求ajax方法
axios.get("url").then(resp=>{}).catch(err=>{});
}
}
}
</script>
//2.其他组件中使用也必须要引如axios插件，如New.vue组件中
<template>
//html代码
</template>
<script>
//必须导入axios
import axios from 'axios'
</script>
方式2：在main.js中全局引入axios并添加到Vue原型中
1、编写main.js入口文件
import Vue from 'vue'
import App from './App.vue'
.....
//导入axios插件
import axios from 'axios'
//添加到vue的原型中，Vue.prototype.方法名(自定义)=引入插件名
Vue.prototype.axios = axios; //一般定义为Vue.prototype.$http = axios,这个随便你自己定义
.....
new Vue({
.....
});
分析 Vue.prototype.axios = axios：其实就是给Vue的原型加一个方法，Vue.prototype.方法名(自定义)=引入插件名，这个类似Vue.component一样都是Vue的原型上加的方法。
2、在App.vue组件中使用：
说明: this.axios.get()，可以写 this.axios也可以写Vue.axios，因为在main.js中对所有Vue的原型，也就是说对所有的Vue对象加了一个axios方法。
//1.在任何组件中引用,无需导入
<template>
.....
</template>
<script>
//直接使用，无需导入axios
export default {
methods:{
send(){ //请求ajax方法
this.axios.get("url").then(resp=>{}).catch(err=>{});
}
}
}
</script>
axios模块化到此结束啦！！！
三、自定义组件添加事件
之前我们都是在组件内部绑定事件，比如说一个button按钮，绑定一个 事件，但是我们有的时候需要自定义一些组件，但是这些组件恰好是我们想要的按钮之类的组件，然后我们在组件上绑定事件，那这个时候我们怎么操作呐？
1、先自定义一个 Button按钮 组件 => MyButton.vue
<template>
<button>自定义按钮</button>
</template>
<style scoped>
button{
width: 100px;
height: 30px;
background-color: #ccc;
color: red;
}
</style>
2、在App.vue组件中引入并绑定事件
说明：MyButto组件绑定事件，绑定事件需要以 @click.native="事件名" 方式绑定。修饰符：.native - 监听组件根元素的原生事件。更多修饰符，请详细查看 v-on 指令。
<template>
<div id="app">
<!--3.MyButto组件绑定事件，绑定事件需要以 @click.native="事件名"-->
<MyButton @click.native="send"></MyButton>
<br>
<!--组件内部绑定事件-->
<button @click="send">发送AJAX请求</button>
</div>
</template>
<script>
//1.导入button按钮
import MyButton from './components/MyButton.vue'
export default {
...,
components:{
MyButton //2.导入后注册
},
methods:{
send(){
this.axios.get("https://api.github.com/users/tangyang8942").then(resp => {
console.log(resp.data);
}).catch(err => {
console.log(err);
});
}
}
}
</script>
<style>
浙公网安备 33010602011771号