安装
-
创建
vue
项目文件,保留vue-router,参考vue init webpack Vue-TypeScript-Template
-
安装
typescript
:npm install --save-dev typescript ts-loader
-
安装
tslint
静态语法检查:npm i --save-dev tslint tslint-loader tslint-config-standard
-
运行,访问host测试:
npm run dev
配置
build/webpack.base.conf.js
中的:
entry: {
app: './src/main.js'
}
复制代码
改为:
entry: {
app: './src/main.ts'
}
复制代码
src/index.js
文件名也改成相应的src/index.ts
。
build/webpack.base.conf.js
中的resolve.extensions
改为:
resolve: {
extensions: ['.ts', '.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
复制代码
- 配置
ts-loader
,build/webpack.base.conf.js
中的module.rules
添加:
{
test: /\.tsx?$/,
use: [{
loader: 'babel-loader'
}, {
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
],
exclude: /node_modules/
}
复制代码
- 项目根目录下添加
tsconfig.json
文件,文件内容为:
{
"compilerOptions": {
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es6",
"allowSyntheticDefaultImports": true,
"lib": [
"es2017",
"dom"
]
},
"include": [
"./src/*"
]
}
复制代码
- 运行测试
npm run dev
,如果发现控制台报这个错误时:
error in ./src/main.ts
Module build failed: TypeError: Cannot read property 'afterCompile' of undefined
at successfulTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:147:28)
at Object.getTypeScriptInstance (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/instances.js:48:12)
at Object.loader (/Users/baidu/Github/Vue-TypeScript-Template/node_modules/ts-loader/dist/index.js:16:41)
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.ts
复制代码
ts-loader官方问题issue,修改package.json中版本"ts-loader": "3.5.0"
,重新安装解决,不过这也是个临时的解决方式,后续等官方兼容解决后记得要升级。
- 配置
tslint
,在build/webpack.base.conf.js
中的module.rules
添加:
{
test: /\.tsx?$/, // tslint 代码检查, 打开注释可用
loader: 'tslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
exclude: /node_modules/
}
复制代码
build/vue-loader.conf.js
文件中修改为:
// ...
const merge = require('webpack-merge')
module.exports = {
loaders: merge(utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: isProduction
}), {
ts: ['ts-loader', 'tslint-loader']
}),
// ...
}
复制代码
- 在
src/
文件夹下添加tslint.json
文件,文件内容为:
{
"extends": "tslint:recommended",
"globals": {
"require": true
},
"rulesDirectory": ["src/"],
"rules": {
"no-consecutive-blank-lines": false,
"object-literal-sort-keys": false,
"no-trailing-whitespace": false,
"no-unused-expression": [true, "allow-new"]
}
}
复制代码
代码修改
- 在
src/
文件下创建vue-shims.d.ts
文件,内容为:
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
复制代码
-
src/
文件中所有的.js
改为.ts
-
src/App.vue
文件改为:
<script lang="ts">
import Vue from "vue";
const App = Vue.extend({
name: "App",
});
export default App;
</script>
复制代码
定义组件的时候要先在<srcipt>
标签里添加<script lang="ts">
,按照这种写法创建类Vue.extend({})
- 修改所有的对
*.vue
文件的引用:
import App from "./App";
import HelloWorld from "../components/HelloWorld";
复制代码
改为:
import App from "./App.vue";
import HelloWorld from "@/components/HelloWorld.vue";
复制代码
所有的引用*.vue
结尾的都要写全*.vue
运行测试
运行npm run dev
测试效果
总结
以上的配置过程,是基于vue官方脚手架创建vue项目后,在项目中逐步添加typescript、ts-loader、tslint的过程,并且运行成功。后续会把vuex加入进来,再将vue-class-component、vuex-class、vue-property-decorator等整合到项目中,进一步做项目实践。
Github
项目参考地址:github.com/liuchunhui/…