提示:以下是本篇文章正文内容,下面案例可供参考

一、创建页面

在这里插入图片描述

1.1 页面内容

在这里插入图片描述

<template>
    <div>
        welcom to aaa page !
    </div>
</template>

1.2 路由配置

在这里插入图片描述

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/views/home.vue'
import Aaa from '@/components/views/aaa.vue'
import Bbb from '@/components/views/bbb.vue'

Vue.use(Router)

export default new Router({
  routes: [
    // eslint-disable-next-line spaced-comment
    /*{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },*/
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/a',
      name: 'Aaa',
      component: Aaa
    }, {
      path: '/b',
      name: 'Bbb',
      component: Bbb
    }
    // eslint-disable-next-line spaced-comment
    /*{
      path: '/b',
      name: 'Bbb',
      component: (resolve) => require(['@/pages/bbb.vue'], resolve)
    }*/
  ],
  mode: 'history'
})

1.3 其他配置/config/index.js

在这里插入图片描述

二、显示页面

2.1 对应初始化页面home.vue

在这里插入图片描述

2.2 对应页面aaa.vue

在这里插入图片描述

2.3 对应页面bbb.vue

在这里插入图片描述

三、简单错误问题解决

3.1 案例一

Newline required at end of file but not found.

在这里插入图片描述

3.2 案例二

Strings must use singlequote.

在这里插入图片描述

3.3 案例三

Missing space before function parentheses.
.eslintrc.js下新增配置 "space-before-function-paren": 0,

在这里插入图片描述

3.4 案例四

Unexpected trailing comma.

在这里插入图片描述

总结思考

前端总体编码规范方面在开发时需要去注意的。
其次具体页面就具体开发,当然路由拦截,代理,跨域等问题也需要去注意。
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐