vue cli3引入（vuex、vue-router、ant design vue、axios）

源码链接：https://pan.baidu.com/s/17PV6VCrW9mttXr9FI6YRqQ
提取码：ppmw

---

项目依赖Nojs.js环境，安装教程
如何创建vue cli3项目，创建教程

---

vuex（状态管理模式【全局变量】）
vue-router（路由【页面跳转传参，路由嵌套组件封装】）
ant design vue（UI库【全面覆盖了 React、Angular、Vue 三大前端框架】）
axios（基于promise的HTTP库【get，post请求封装】）

---

引入vuex
1.安装Vuex

npm install vuex

2.src目录下创建store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    title: '人员列表',
}

const mutations = {
    setState (state, data){
        state.title = data.title
    }
}

const getters = {

}

export default new Vuex.Store({
    state,
    mutations,
    getters
})

3.src目录下修改main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

var vm = new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
console.log("测试Vuex：" + vm.$store.state.title)

以下测试Vuex是否引入成功！

---

vue cli3项目引入vue-router
1.安装Vuex

npm install vue-router

2.src目录下创建router.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

3.src目录下修改main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

Vue.config.productionTip = false

var vm = new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')
console.log("测试Vuex：" + vm.$store.state.title)
console.log("测试vue-router：" + vm.$route.name)

4.src目录下修改App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

以下测试vue-router是否引入成功！

---

vue cli3项目引入ant design vue
1.安装Vuex

npm install ant design vue

2.src目录下修改main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'

Vue.use(Antd)
Vue.config.productionTip = false

var vm = new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')
console.log("测试Vuex：" + vm.$store.state.title)
console.log("测试vue-router：" + vm.$route.name)
console.log("测试ant-design-vue：" + JSON.stringify(Antd))

3.src目录下components/修改HelloWorld.vue

<template>
  <div>
    <a-button type="primary">Primary</a-button>
    <a-button>Default</a-button>
    <a-button type="dashed">Dashed</a-button>
    <a-button type="danger">Danger</a-button>
    <a-config-provider :autoInsertSpaceInButton="false">
      <a-button type="primary">按钮</a-button>
    </a-config-provider>
    <a-button type="primary">按钮</a-button>
    <a-button type="link">Link</a-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

以下测试ant design vue是否引入成功！

---

vue cli3项目引入axios
1.安装axios

npm install axios

2.src目录下修改main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'
import axios from 'axios'

Vue.use(Antd)
Vue.config.productionTip = false

Vue.prototype.$http = axios

var vm = new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')
console.log("测试Vuex：" + vm.$store.state.title)
console.log("测试vue-router：" + vm.$route.name)
console.log("测试ant-design-vue：" + JSON.stringify(Antd))
console.log("测试axios：" + vm.$http.get("https://www.dcloud.io/docs/HBuilder.json?timestamp=1585142313800", {}).then(function(ret){
  console.log("请求后的数据为：" +  JSON.stringify(ret.data))
}))

以下测试axios是否引入成功！