Vue-Webpack-TypeScript
这是一个Vue2.5+版本兼容TypeScript开发的脚手架，虽然Vue3.0马上就要来了，但是我们还是可以用目前的版本练练手。目前这个是配好没多久的脚手架，也许会有一下问题，但是应该不影响使用，后期有时间将慢慢优化。
git clone地址：git clone https://github.com/Jacky-MYD/Vue-Webpack-TypeScript.git
Build Setup
可以直接clone该脚手架，然后按照以下基本命令即可跑项目了
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
官方Vue-cli
终端输入vue init webpack projectName，直接就可以使用Vue + webpack的脚手架了
引入TypeScript
项目初始化后，我们需要安装一些插件来支持TypeScript
npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
- vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件
- vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
- ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts .tsx文件
- tslint-loader跟tslint：我想你也会在.ts .tsx文件 约束代码格式（作用等同于eslint）
- tslint-config-standard：tslint 配置 standard风格的约束
配置webpack
修改配置文件webpack.base.conf.js，将入口main.js改成main.ts，并且将main.js文件的类名也改成main.ts
// main.js改成main.ts
entry: {
app: './src/main.ts'
}
// 新增.ts
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
'@': resolve('src')
}
}
在module.rules 添加webpack对.ts的解析
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
在根目录添加 tsconfig.json文件
可参考官方推荐配置
参考项
{
// 编译选项
"compilerOptions": {
// 输出目录
"outDir": "./output",
// 是否包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以严格模式解析
"strict": true,
// 采用的模块系统
"module": "esnext",
// 如何处理模块
"moduleResolution": "node",
// 编译输出目标 ES 版本
"target": "es5",
// 允许从没有设置默认导出的模块中默认导入
"allowSyntheticDefaultImports": true,
// 将每个文件作为单独的模块
"isolatedModules": false,
// 启用装饰器
"experimentalDecorators": true,
// 启用设计类型元数据（用于反射）
"emitDecoratorMetadata": true,
// 在表达式和声明上有隐含的any类型时报错
"noImplicitAny": false,
// 不是函数的所有返回路径都有返回值时报错。
"noImplicitReturns": true,
// 从 tslib 导入外部帮助库: 比如__extends，__rest等
"importHelpers": true,
// 编译过程中打印文件名
"listFiles": true,
// 移除注释
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允许编译javascript文件
"allowJs": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 指定特殊模块的路径
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 编译过程中需要引入的库文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
在根目录添加 tslint.json文件
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
让ts识别vue 重中之重
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts，意思是告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
vue文件用ts改造
之前我们有安装vue-class-component插件，那么我们就直接在vue页面中引入该插件，这里我就直接上代码了，ts语法可看官方文档或者w3c的教程等。但是记得将script标签中加lang="ts"，表示引入ts语法
配置vuex
先安装依赖npm i vuex vuex-class --save，然后我们逐个文件的配置，需要注意的是我们项目中除了配置文件外，将原来所以js文件改成ts文件
index.ts(modules)
import actions from './actions.ts'
import { state, mutations } from './mutations.ts'
import getters from './getters.ts'
const store = {
state,
getters,
actions,
mutations
}
export default store
action.ts
import ajax from '../../ajax.ts'
import { Demo } from './type'
import Api from './api.ts'
import { Commit, Action, ActionTree } from 'vuex'
const stateVal: Action = (context: { commit: Commit }, data: any) => {
context.commit('SET_HELLO_WORD', data)
}
const actions: ActionTree = {
stateVal
}
export default actions
getters.ts
import { Demo } from './type'
import { GetterTree } from 'vuex'
const getters: GetterTree = {
helloWord: (state: Demo) => state.helloWord
}
export default getters
mutations.ts
import { Demo } from './type'
import { MutationTree } from 'vuex'
const state: Demo = {
helloWord: 'helloWord'
}
const mutations: MutationTree = {
SET_HELLO_WORD (state: Demo, data: string) {
state.helloWord = data
}
}
export { state, mutations }
type.ts
export interface Demo {
helloWord: string;
}
dispatches.ts
import api from './api.ts'
import ajax from '../../ajax.ts'
export const postDemo = (params) => {
return ajax.post(api.postDemo, params)
}
export const getDemo = (params) => {
return ajax.get(api.getDemo + params)
}
api.ts(接口名配置文件)
const api = {
postDemo: 's?wd=demo',
getDemo: 's?wd='
}
export default api
1548120727163.jpg
1548120694525.jpg