第一个vue+webpack模块化之使用路由

一、vue模块化开发之使用路由

1. 生成项目

命令：vue init webpack-simple vue-cli-model

2. 进入项目目录后，安装项目需要的模块

命令：cnpm install

3. 引入路由router

3.1 先安装vue-router
    命令：cnpm install vue-router -S

3.2 操作步骤
    1). 在main.js内引入vue-router
        import VueRouter from 'vue-router' //  引入vue-router模块

    2). 使用路由，vue.use()方法：
        Vue.use(VueRouter)

    3). 在App.vue中加上路由跳转和渲染
        主页
        新闻

                
                 // 路由内容展示区
        

    4). 分别创建Home.vue和News.vue模版，内容如下
        Home:
        

        News:
        

    5). 创建一个路由配置文件：router.config.js，内部配置代码如下：
        import Home from "./components/Home.vue"    // 引入Home模版
        import News from "./components/News.vue"    // 引入News模版
        export default{                             // 配置路由跳转
            routes:[
                {
                    path:"/home",
                    component:Home
                },
                {
                    path:"/news",
                    component:News
                }
            ]
        }
    6). 在main.js里面再引入路由配置文件
        import routerConfig from './router.config.js'

    7). 在main.js里面创建路由实例
        // 创建路由实例
        var router = new VueRouter(routerConfig)        
        /* 
        *  routerConfig就是刚刚引入的路由配置文件内的内容
        */

    8). 在main.js里面，vue实例上注入路由
        new Vue({
            el: '#app',
            render: h => h(App),
            router: router    //  注入路由
        })

4. 运行测试项目

命令：npm run dev

5. 项目打包发布线上

命令：npm run build  // 将项目打包输出到dist目录，项目上线的时候，
                    // 将dist目录里面的内容上传到服务器即可

二、axios模块化

1.axios安装模块

cnpm install axios -S

2.引入axios

axios不是全局的，使用起来有些麻烦，有两种方式：
1.在每个需要使用axios的地方引入一次axios（太麻烦）
    import axios from 'axios'

2.在main.js中全局引入axios，并添加到vue实例的原型上(prototype)
    main.js中：
        import axios from 'axios'   // 全局引入
        Vue.prototype.axios = axios;    // 在vue原型上添加一个axios的方法
    
    调用：Vue.axios.get() , this.axios.get()

         Vue.prototype.$http = axios;    // 一般在vue原型上添加一个$http的方法
         Vue.$http.get() , this.$http.get()

3.自定义组件如果要监听一个原生的事件

使用修饰符 .native， 不加修饰符.native 是无法触发的
   // 点击这个自定义组件调用原生事件 必须要加上 .native修饰符，不然无法调用