VueCli3构建TS项目的方法步骤

│ │ index.ts
│ │
│ ├─scss // 样式
│ ├─store // vuex 配置
│ │ index.ts
│ │
│ ├─typings // 全局注入
│ ├─utils // 工具方法(axios封装，全局方法等)
│ └─views // 页面
│ About.vue
│ Home.vue
│
└─tests // 测试用例
├─e2e
│ ├─plugins
│ │ index.js
│ │
│ ├─specs
│ │ test.js
│ │
│ └─support
│ commands.js
│ index.js
│
└─unit
HelloWorld.spec.ts

eslint 和 tslint

tslint配置

关闭不能

cosole

:

"no-console": false

tslint的函数前后空格：

"space-before-function-paren": ["error", {
 "anonymous": "always",
 "named": "always",
 "asyncArrow": "always"
}]

tslint分号的配置：

"semicolon": [true, "never"]

eslint配置

在项目中是使用

eslint

规范空格：

'indent': 0

路由改造

引入组件方式

dev

使用

require

:

/**
 * 开发环境载入文件
 * @param fileName 文件路径，不包括文件名
 * @param viewPath 视图目录
 */
module.exports = (file: string, viewPath: string = 'views') => {
 return require(`@/${viewPath}/${file}.vue`).default
}

prod

使用

import

:

/**
 * 生产环境载入文件
 * @param fileName 文件路径，不包括文件名
 * @param viewPath 视图目录
 */
module.exports = (file: string, viewPath: string = 'views') => {
 return import(`@/${viewPath}/${file}.vue`)
}

路由处理逻辑

改文件在

app.vue

中引入：

/**
 * 路由处理逻辑
 */
import router from '@/router/index'
router.beforeEach((to: any, from: any, next: any) => {
 if (to.name === 'login') {
  next({name: 'home/index'})
 } else {
  next()
 }
})

router-view

一个

<router-view />

对应一个路由层级，下一级

<router-view />								 
 2/8   首页 上一页 1 2 3 4 5 6 下一页 尾页