搭建AntVue网页项目

1.创建Vue2 项目

vue create  ant-demo

2.安装ant-design-vue组件

npm i --save ant-design-vue
//引用ant  在main.js添加
import Antd from 'ant-design-vue';
Vue.use(Antd);

3.安装vue-router
（1）基础引入

npm install vue-router --save
// 引用 router  在main.js 添加
import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（2）创建router文件夹 创建index.js文件

// import { Layout } from 'ant-design-vue'
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from './BlankLayout'



// 公共路由
export const constantRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: 'home',
    children: [
      {
        path: '/home',
        component:(resolve) => require(['@/views/home/Home.vue'], resolve),
        hidden: true
      },
    ]
  }
]

export default new Router({
  // mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

(3) 修改App.vue文件

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
</a-config-provider>
</template>

<script>
import locale from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {
  name: 'App',
  data() {
    return {
      locale
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

(4)创建Home.vue