VueCli3构建TS项目的方法步骤(2)
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 /> 对应路由表中的children路由
router 中的meta
配置每个路由的单独特性
title, keepalive, main, desc, icon, hidden, auth
keep-alive
vue中的<keep-alive></keep-alive>其它生命周期不执行，只执行：activated 和 deactivated
axios改造
npm i axios --save
typings
在根目录创建typings文件，里面定义, 全局注入。
需要哪些接口引入哪些接口文件。
创建ajax.d.ts文件，并声明后台返回的数据格式。
declare namespace Ajax {
// axios return data
export interface AxiosResponse {
data: AjaxResponse
}
// reqposne interface
export interface AjaxResponse {
id: number
error: null | object
jsonrpc: string
result: any
}
}
内容版权声明：除非注明，否则皆为本站原创文章。