VueCli3构建TS项目的方法步骤

"no-console": false

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

"semicolon": [true, "never"]

/**
 * 开发环境载入文件
 * @param fileName 文件路径，不包括文件名
 * @param viewPath 视图目录
 */

module.exports = (file: string, viewPath: string = 'views') => {
 return require(`@/${viewPath}/${file}.vue`).default
}

/**
 * 生产环境载入文件
 * @param fileName 文件路径，不包括文件名
 * @param viewPath 视图目录
 */

module.exports = (file: string, viewPath: string = 'views') => {
 return import(`@/${viewPath}/${file}.vue`)
}

/**
 * 路由处理逻辑
 */

import router from '@/router/index'


router.beforeEach((to: any, from: any, next: any) => {
 if (to.name === 'login') {
 next({name: 'home/index'})
 } else {
 next()
 }
})

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
 }
}

let res: Ajax.AxiosResponse = {
 data: {"id": "1533610056745", "result": 1, "error": null, "jsonrpc": "2.0"}
}

/**
 * 操作 cookie, localStorage, sessionStorage 封装
 */
import Cookies from 'js-cookie'
import { isNil } from 'lodash'

const prefix = process.env.VUE_APP_PREFIX

/**
 * ============ Cookie ============
 */

export function getCookie (name: string): string {
 return Cookies.get(prefix + name)
}

export function setCookie (name: string, value: any, params= {}): void {
 if (isEmpty(value)) return
 Cookies.set(prefix + name, value, params)
}

export function removeCookie (name: string, params= {}): void {
 Cookies.remove(prefix + name, params)
}

/**
 * ============ localStorage ============
 */

export function setLocalStorage (name: string, value: any): void {
 if (isEmpty(value)) return
 window.localStorage.setItem(prefix + name, value)
}

export function getLocalStorage (name: string) {
 return window.localStorage.getItem(prefix + name)
}

export function removeLocalStorage (name: string) {
 window.localStorage.removeItem(prefix + name)
}

export function clearLocal () {
 window.localStorage.clear()
}

/**
 * ============ sessionStorage ============
 */

export function setSessionStorage (name: string, value: any): void {
 if (isEmpty(value)) return
 window.sessionStorage.setItem(prefix + name, value)
}

export function getSessionStorage (name: string) {
 window.sessionStorage.getItem(prefix + name)
}

export function removeSessionStorage (name: string) {
 window.sessionStorage.removeItem(prefix + name)
}

/**
 * 判断值是否为null或者undefined或者''或者'undefined'
 * @param val value
 */
function isEmpty (val: any) {
 if (isNil(val) || val === 'undefined' || val === '') {
 return true
 }
 return false
}

import axios from 'axios'

/**
 * 创建 axios 实例
 */
const service = axios.create({
 timeout: 3000
})

/**
 * req 拦截器
 */
service.interceptors.request.use((config: object): object => {
 return config
}, (error: any): object => {
 return Promise.reject(error)
})

/**
 * res 拦截器
 */
service.interceptors.response.use((response: any) => {
 const res = response.data
 if (res.error) {
 if (process.env.NODE_ENV !== 'production') {
 console.error(res)
 }
 return Promise.reject(res)
 }
 return Promise.resolve(res)
})

export default service

/**
 * 统一参数处理
 * 请求url处理
 */

const qs = require('qs')
import { merge, isPlainObject } from 'lodash'
import { getCookie } from '@/utils/cookies'

/**
 * 接口参数拼接
 * @param opts 接口参数
 * @param opsIdParams 是否传递opsId
 * @param requestType post 还是 get 参数处理
 * @param otherParams 是否传有其它参数
 * @example
 * commonParams({
 * 'method': cmdName.login,
 * 'params': params
 * }, false, undefined, false)
 */
export function commonParams (opts: object, opsIdParams: boolean= true, requestType: string= 'post', otherParams: boolean= true): object {
 const params = {
 json: JSON.stringify(merge({
 id: new Date().getTime(),
 jsonrpc: '2.0',
 params: dealParams(opsIdParams, otherParams),
 }, opts || {})),
 }
 return requestType === 'post' ? qs.stringify(params) : params
}

/**
 * 请求接口的地址处理
 * @param urlData 请求接口
 * @param type 请求路径
 * @example url(cmdName.login)
 */
export function url (urlData: string, type: any = process.env.VUE_APP_API_PATH) {
 // @example https://example.com + agsgw/api/ + auth.agent.login
 return process.env.VUE_APP_API_URL + type + urlData
}

/**
 * params 参数的处理
 * @param opsIdParams 是否传递opsId
 * @param otherParams 是否传有其它参数
 */
function dealParams (opsIdParams: boolean, otherParams: boolean | object): object {
 let obj: any = {}
 // opsIdParams 默认传opsId
 if (opsIdParams) {
 obj.opsId = getCookie('token') || ''
 }
 // otherParams其他默认参数, 如sn
 if (otherParams === true) {
 // obj.sn = getCookie('switchSn') || ''
 } else {
 // 其他object
 if (isPlainObject(otherParams)) {
 obj = {...obj, ...otherParams}
 }
 }
 return obj
}

/**
 * 后台接口名称
 */

const cmdName = {
 login: 'auth.agent.login'
}

export default cmdName

/**
 * 组合请求http的请求
 */

import fetch from '@/utils/fetch'
import cmdName from './cmdName'
import { commonParams, url } from './commonParams'

export {
 fetch,
 cmdName,
 commonParams,
 url
}

import { fetch, cmdName, url, commonParams } from '@/api/common'

export function login (params: object) {
 return fetch({
 url: url(cmdName.login),
 method: 'post',
 data: commonParams({
 method: cmdName.login,
 params
 })
 })
}

import * as API from '@/api/index'

API.login(params).then(res => {
})

this.$store.getters[XXX] => this.$store.getters[namespaced/XXX]
this.$store.dispatch(XXX, {}) => this.$store.dispatch(namespaced/XXX, {})
this.$store.commit(XXX, {}) => this.$store.commit(namespaced/XXX, {})

<template>
 <div>
 <div>用户名：<input type="text" v-model="username" /></div>
 <div>密码：<input type="password" v-model="passwd" /></div>

 <div>{{computedMsg}}</div>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Provide } from 'vue-property-decorator'

// 引入组件
@Component({
 components: {
 // input
 }
})
export default class Login extends Vue {
 // data
 @Provide() private username: string = ''
 @Provide() private passwd: string = ''

 // methods
 login (u: string, p: string) {
 }

 // computed
 get computedMsg () {
 return 'username: ' + this.username
 }

 // life cycle
 mounted () {
 }
}
</script>

Vue.component(modal.name, modal) // dialog
Vue.component(pagination.name, pagination) // 分页
Vue.component(dateRange.name, dateRange) // 日期
Vue.component(proxyAutocomplete.name, proxyAutocomplete) // 远程模糊搜索
Vue.component(card.name, card) // el-tabs
Vue.component(tabLoad.name, tabLoad) // el-tabs

import '@/components/useElement'

// 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.
// 不能直接new一个函数，通过重新as一个变量，或者new其原型的constructor 都可以解决
// const encodePsw = new Encode.prototype.constructor().encodePsw(this.passwd)
const E = Encode as any
const encodePsw = new E().encodePsw(this.passwd)

import * as filters from '@/filters/index'

// 全局filter
const F = filters as any
Object.keys(filters).forEach(item => {
 Vue.filter(item, F[item])
})

declare var Chart: any;

@Component({
 selector: 'my-component',
 templateUrl: './my-component.component.html',
 styleUrls: ['./my-component.component.scss']
})

export class MyComponent {
 //you can use Chart now and compiler wont complain
 private color = Chart.color;
}

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const VueConf = require('./src/assets/js/libs/vue_config_class')
const vueConf = new VueConf(process.argv)

module.exports = {
 baseUrl: vueConf.baseUrl, // 根域上下文目录
 outputDir: 'dist', // 构建