脚手架搭建项目

使用脚手架非常容易地创建项目，使用它快速开发。Vue官方提供了一个官方的cli,为单页应用快读搭建复杂的脚手架。
官方cli地址：cli.vuejs.org/
官方cli的githb地址：github.com/vuejs/vue-c…

如果你使用element UI，可以使用element的cli快速生成项目，直接集成了element UI

element cli地址：github.com/ElementUI/e…

使用element脚手架生成项目

git clone https://github.com/ElementUI/element-starter.git
cd element-starter
npm install
npm run dev

到此vue项目已经生成，包含有目录结构，以及引入element ui

配置vue-router

• 配置router,在src/main.js的入口文件中引入 安装vue-router

npm install vue-router@2 
// 如果安装失败。npm从版本7开始在某些方面比之前版本更严格，可以使用
npm install vue-router --legacy-peer-deps

• 配置router在main文件

import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes =[
    {
    path: '/',
    component: HomeComponent
    }
]
// 注意：vue2使用new VueRouter创建路由，vue3变成createRouter
const router = new VueRouter({
    routes,
})
new Vue({
router
render: h => h(App)
})

注意：创建路由后，在使用之前确保VueRouter正确挂载，告知vuejs您正在使用VueRouter,在使用之前Vue.use(VueRouter)

• 插槽router-view
  router-view将显示与url对应的组件，你可以把它放在任何地方，适应你的布局
  这里将他放在App.vue中
  官网地址：router.vuejs.org/zh/guide/#r…