Vue--项目创建及Router作用

项目创建步骤：

第一步：找到存放项目的文件夹, 输入cmd 弹出小黑窗, 输入vue create 项目名 创建项目

第二步：选择预设 ，按上下键选择Manually select features 回车

第三步：选择项目设置， 按上下键切换 按空格键选择或者取消选择 ，选择Babel,Router,Vuex,CSS Pre-processors然后按回车键

第四步：选择Vue.js的版本 选择2.X 回车

第五步：选择history模式 如果是就输入Y 如果不是 那就是选择了hash模式 那么就输入n，我们选择history模式输入n ，回车

第六步：选择css预处理器，选择less回车

第七步：选择设置存放，询问你是把设置另外放在一个文件夹里 还是放在package.json文件夹里，回车

是否把刚刚的设置都保存下来 ，如果输入Y 表示要存储这些设置， 下一步就给这些设置取个名字

创建成功

项目运行：

“cd 项目名” 进入项目
“npm run serve” 运行项目

VueRoter作用：

作用：

设置路由规则,匹配路由

// 在router/index.js 中,设置路由规则,匹配路由
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)
// routes 表示路由表
// routes数组中的每个对象都对应着一个路由规则
// 每个对象都有两个必填属性path和component,
// path表示路由地址,component表示路由地址对应的页面视图文件
const routes = [
  {
    // 这里表示当地址是"localhost:8080/#/",就进入Home界面
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }

]

const router = new VueRouter({
  routes
})

export default router