vue 2

1.创建项目

1.安装node（步骤省略，一路next即可）

安装成功以后执行命令：node -v

出现如下界面即为安装成功

2.安装vue-cli

npm install -g vue-cli

3.安装webpack

npm install webpack -g

4.安装打包的客户端

npm install webpack-cli -g

5.创建项目

vue create 项目名

键盘上下键移动，空格选择

启动的命令

2.路由

import Vue from 'vue' 
import VueRouter from 'vue-router' 
//使用路由
 Vue.use(VueRouter);
 
b.定义组件使用组件
import index from '../src/components/index'
import con from '../src/components/content'
//暴露路由
export default new VueRouter({
//定义路由的规则
//定义路由的规则
  routes:[
    ///定义路由的规则
    {
      path:"/index",
      name:"index",
      component:index
  },{
    path:"/con",
      name:"con",
    component:con
    }


  ]
})
在组件里面配置路由的链接
<router-link to="/index">首页</router-link>
<router-view></router-view> 组件存放的位置

嵌套路由

3.使用element-ui

npm install element-ui -S 下载element-ui

成功如下图

在main.js里面加入如下代码：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

体验：

在views中创建Element.vue

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
};
</script>

<style>
</style>

添加路由：

启动项目：npm run serve

访问路由：

4.使用axios

下载axios

npm i axios  或者  npm install axios

安装成功后：

引入axios

import axios from 'axios'

使用方法：

axios.get('url'，{

params:{

//参数

key:val

}

})

.then(

//回调成功

function (response) {

//成功回调函数

console.log(response);

}，function(es){

//失败回调函数

}

)

案例将table死数据转换为查询后台接口查询的数据

配置全局axios

在main.js

import ax from "axios";
// 创建实例时配置默认值
const instance = ax.create({
  baseURL: "http://localhost:8080",
});
Vue.prototype.$axios = instance

调用时：

5.拦截器

请求拦截器

//请求拦截器
instance.interceptors.request.use(function (config) {
  let token = localStorage.getItem("token");
  if (token) {
    config.headers['token'] = token;
  } console.log(config);
  return config;

响应拦截器

//响应拦截器
router.beforeEach((to, from, next) => {
  //如果已登陆或者访问登录页面，放行  
  if (to.path == "/login" || localStorage.getItem("token") != null) {
    next()
  } else {
    alert("请先登录")
    next("/login")
  }
})

6.模块化开发

分页模块：

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default{
    data(){
        return{
            // props:['page'],
            
        }
    },
    props:['page'],
    methods: {
        handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    //   alert(JSON.stringify(this.page))
      this.$emit("aaa",{pageSize:val,currentPage:this.page.currentPage})
      
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("aaa",{pageSize:this.page.pageSize,currentPage:val})
    },
    },
}

</script>


<style >
</style>

将模块注册到全局 main.js

//导入分页页面
import fenye from "@/views/fenye.vue"
//配置成全局组件
Vue.component("my-fenye",fenye)

在父页面引入子模块

父传子

子接收

子传父：通过自定义事件

父接收

通过自定义的pagination的方法