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是否引入成功！