一、搭建vue-cli脚手架
这个过程就不详细说明了不清楚的可以翻阅我以前的有关vue脚手架的文章
二、安装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 特性的装饰器如下:
@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (从 vue-class-component 继承)
-
ts-loader:TypeScript 为 Webpack 提供了 ts-loader,其实就是为了让webpack识别 .ts .tsx文件
-
tslint-loader跟tslint:我想你也会在.ts .tsx文件 约束代码格式(作用等同于eslint)
-
tslint-config-standard:tslint 配置 standard风格的约束
三、配置webpack
(1)找到文件build/webpack.base.conf.js
找到entry.app 将main.js 改成 main.ts, 顺便把项目文件中的main.js也改成main.ts, 里面内容保持不变
(2)找到resolve.extensions 里面加上.ts 后缀 (是为了之后引入.ts的时候不写后缀)
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'],
alias: {
'@': resolve('src')
}
}
(3)找到module.rules 添加webpack对.ts的解析
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
// 开始
{
test: /\.ts$/,
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
// 复制从开始以上的即可
}
}
四、添加配置 tsconfig.json 和 tslint.json文件
(1)在根路径下创建tsconfig.json文件,以下是简单的配置,详细的可访问http://json.schemastore.org/tsconfig
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"allowJs": true,
"module": "esnext",
"target": "es5",
"moduleResolution": "node",
"isolatedModules": true,
"lib": [
"dom",
"es5",
"es2015.promise",
"scripthost"
],
"sourceMap": true,
"pretty": true,
"strictFunctionTypes": false,
"importHelpers": true
}
}
(2)在根路径下创建tslint.json文件,就是 引入 ts 的 standard 规范
{
"extends": "tslint-config-standard",
"globals": {
"require": true
}
}
五、识别 .vue
由于 TypeScript 默认并不支持 *.vue 后缀的文件,所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件,放在项目项目对应使用目录下,例如 src/vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
注意:在引入组件的使用加.vue 因为TypeScript 默认只识别 *.ts 文件,不识别 *.vue 文件:,例如import Component from 'components/component.vue'
六、改造.vue 文件
<template></template>和<style></style>
内的内容和vue一样,主要修改<script lang="ts"></script>
内的代码格式, 注意:在script 标签上加上 lang=“ts”, 意思是让webpack将这段代码识别为typescript 而非javascript,简单的代码格式如下,注意: @Component必须有没有子组件可以为空
(1)parent.vue
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Child from '../../components/Child.vue';
@Component({
components: {
Child
},
})
export default class parent extends Vue {
num = 0;
created(){
}
}
</script>
(2)child.vue(子组件获取父组件的数据@Prop)
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator'
@Component
export class Child extends Vue {
@Prop()
num: number
created(){
console.log(this.num);
}
}
六、使用less
(1)安装 npm install less -s
(2) 找到文件build/webpack.base.conf.js里的module.rules 添加webpack对.ts的解析
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
七、使用Axios
在常规的安装了axios发现报错,后来百度换了一种思路就可以了
因为在ts中,不识别vue下面挂$axios,不可以挂在原型链上
(1)安装axios和vue-axios npm install axios vue-axios
(2)在main.ts中引入全局使用
import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios, axios)
(3)在组件中直接this.axios.get/post
直接使用
八、使用Vuex
今天先到这里改天继续完善,欢迎指正交流