搭建Vue项目和启动

搭建Vue项目和启动@TOC

创建项目

1、安装vue脚手架
npm i –g @vue/cli
2、创建项目名字
在要创建项目的父文件夹下 vue create 项目名字

安装路由

1、安装vue-router
npm install vue-router --save
2、在main.js配置路由，名字必须是router

	import Vue from 'vue'
	import App from './App.vue'
	import router from './router/index'  //导出路由的index.js文件
	
	Vue.use(router)
	Vue.config.productionTip = false;
	
	new Vue({
	  router,
	  render: h => h(App),
	}).$mount('#app')

3、修改app.vue，添加路由插槽

在此项目报错
是由于未导出router实例，看第4
4、创建路由文件
(1)、src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routers from './router'//同级下的router.js,其中包括path，name等

Vue.use(Router)

export default new Router({
    mode: 'history',
  //基路径
    base: '/',
    scrollBehavior: () => ({ y: 0 }),
    routes: routers
})

(2)、src/router/router.js
注：
parent-view/parent-view

parent-view/index.js

	import ParentView from './parent-view.vue'
	export default ParentView

router.js

import parentView from '@/components/parent-view/index'
export default [
    {
      path: '/',
      redirect:'/redirect',
      name: 'helloWorld',
      component: parentView,
      children: [
        {
          path: '/redirect',
          name: 'home',
          component: () => import('@/views/home/home'),
        },
      ]
    },
    {
        path:'/135',
        name: 'childPage',
        component: () => import('@/views/childPage/childPage')
    },
]