1.安装依赖
安装 vue 的官方插件 npm i vue-class-component vue-property-decorator -S
typescript 必须安装 npm i typescript -D
ts-loader 必须安装 npm i ts-loader -D
请注意：ts-loader 请与你的 webpack 版本对应，我的 webpack 版本为 3.6.0，因此我应该安装的 ts-loader 版本为 3.x.x，因此我在ts-loader的Github上找到了我最新的 3.x.x 的版本为 3.5.0，所以我的安装命令为npm i ts-loader@3.5.0 -D
2.配置 webpack.base.conf.js
首先找到./build/webpack.base.conf.js
- 找到
entry.app将main.js改成main.ts；并且把项目文件中的main.js也改成main.ts, 里面内容保持不变
entry: {
app: './src/main.ts'
}
- 找到
resolve.extensions，里面加上.ts后缀 （是为了之后引入.ts 的时候不写后缀）
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'], //加入.ts
alias: {
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src')
}
}
- 找到
module.rules添加webpack对.ts的解析
module: {
rules: [
// 从这里复制下面的代码就可以了
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
// 复制以上的
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
}
3.添加 tsconfig.json
在根路径下创建tsconfig.json文件，添加一下配置
{
"include": ["src/**/*"],
"exclude": ["node_modules"],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"allowJs": true,
"module": "esnext",
"target": "es5",
"moduleResolution": "node",
"isolatedModules": true,
"lib": ["dom", "es5", "es6", "es7", "es2015.promise"],
"sourceMap": true,
"pretty": true
}
}
4.让 ts 识别 .vue
由于 TypeScript 默认并不支持 *.vue后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目对应使用目录下，所以新建 src/vue-shim.d.ts，写入以下代码
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
5..js 文件重命名为.ts 文件
将src下的所有**.js文件重命名**.ts，包括src/router/index.js等逐一从.js重命名为.ts
注意：重命名后对
vue文件的import，需添加.vue后缀
因为Typescript默认只识别*.ts文件，不识别*.vue文件
之前：
import App from './App'
import HelloWorld from '@/components/HelloWorld'
需改为：
import App from './App.vue'
import HelloWorld from '@/components/HelloWorld.vue'
6.改造 .vue 文件
要点：
-
<script>标签添加lang="ts"声明 - 使用vue-class-component 对
Vue组件进行封装
之前：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default { name: 'App' }
</script>
<style>
@import './style/app.scss';
</style>
改造后：
<template>
<div id="app">
<router-view />
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {}
</script>
<style>
@import './style/app.scss';
</style>
之后请将所有的.vue按照vue-class-component改造
7.运行 npm run dev
至此运行项目，即可正常运行，vue对typescript的初步引入，基本完成。
8.让vue识别全局方法/变量
因为在项目中，会存在自己写的一些方法是放在 vue.prototype上的。
如：Vue.prototype.$api = myApi，然后想在每个.vue里面这样使用this.$api，然而使用ts改造之后，在.vue里面使用this.$api会报错
Property '$api' does not exist on type 'Text'
请在main.ts里面加上这段： 请放在 new Vue上面
Vue.config.productionTip = false
// 全局方法 this. 的调用方式
declare module 'vue/types/vue' {
interface Vue {
$tool: any
$api: any
}
}
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
然后就能使用 this.$api 和 this.$tool了
项目地址：
vue2.x：https://github.com/momoSph/Vue2.x-ElementUI
vue3.x：https://github.com/momoSph/Vue3.x-ElementUI
