vue-6-5 模块化开发

1.建立项目

1.1初始化项目

会自动建立项目文件

其中webpack-simple是模板，另外一个常用的是webpack

vue init webpack-simple demo

1.2安装package.json里面的所有依赖模块

cnpm install

1.3项目下，命令行输入

npm run dev

可以看到demo页面

2.模块安装和使用

2.1vue-router模块化

-S表示 生产环境的需要，--save  写入dependencies

-D 开发需要 --save-d 写入devDependencies

cnpm install vue-router -S

①编辑main.js首先引入vue-router

import引入module里面的内容，直接加在引号里

加载组件，要使用'./目录'

import VueRouter from 'vue-router'

②使用vue-router的全局方法

Vue.use(VueRouter)

③在src目录下建立components文件，里面建立组件Home和News组件，只需要写template部分进行展示

④在src目录下建立配路由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
    }
  ]
}

⑤编辑App.vue 

这部分是用来展示看见的内容

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

 <h3>
      <router-link to="/home">主页</router-link>
      <router-link to="/news">新闻</router-link>
    </h3>
    <div>
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>

⑥继续编辑main.js路由注册

import routerConfig from './router.config.js'

import Vue from 'vue'
import VueRouter from 'vue-router'  /*后面的名字固定*/
import App from './App.vue'
import routerConfig from './router.config.js'
import axios from 'axios'

/*使用vue-router,要使用vue-router全局方法*/
Vue.use(VueRouter);
/*axios好的办法应该是全局引入后，使用Vue.use('axios'),然后在每个组件中都可以使用*/
Vue.prototype.$http=axios;  /*习惯叫$http*/
//创建路由实例
const router=new VueRouter(routerConfig);
new Vue({
  el: '#app',
  render: h => h(App),
  /*注入路由*/
  router
});

⑦npm run dev可以看到效果

⑧获取路由参数$route更进一步，可以查看vue路由变化的值，可以在实例挂载的时候输出this.$route  也可以侦听这个值的变化

  mounted(){
    console.log(this.$route)
  },
  watch:{
    $route:function (newValue,oldValue) {
      console.log("新的路由是："+oldValue.path)
    }
  }

2.2axios的模块化

①安装

cnpm install axios -S

axios不是一个成熟的插件，不能使用Vue.use来使用

②使用的两种方式

方式1：在每个组件中引入axios,每个组件都要引用

引用的位置是组件里的scripts部分的开头

import axios from 'axios'

然后就是普通的，在模板template里面，用按钮点击事件

<button @click="send">click</button>

 methods:{
    send:function () {
      axios.get('https://api.github.com/users/tangyang8942')
        .then(resp=>{
          console.log(resp.data);
        }).catch(err=>{
        console.log(err);
      });
    }
  }

方式2：全局引入axios,在main.js,在使用Vue的全局方法添加axios,其实就是在vue的原型上加一个方法

不能使用Vue.use使用全局，这是axios需要改进的地方

首先全局引入

然后在Vue的原型上添加方法，等于是加个一个全局的方法

Vue.prototype.axios=Axios;

所以使用的时候要用this.axios

 methods:{
    send:function () {
      this.axios.get('https://api.github.com/users/tangyang8942')
        .then(resp=>{
          console.log(resp.data);
        }).catch(err=>{
        console.log(err);
      });
    }
  }

一般都会写成Vue.prototype.$http=axios;

使用的时候就是this.$http

2.3为自定义组件添加事件

①自定义一个button组件，myButton

②在需要的组件中的script里面导入，比如App.vue

③在的components里面注册，即在App.vue 下的scripts部分

④然后在<template>里面展示

即会把组件展示出来

⑤绑定方法的时候，一把思路是是直接绑定方法@click='send',但经过测试并不能用，默认绑定不了

方法：加个修饰符.native  @click.native='send'