以@vue/cli創(chuàng)建的項目
- 創(chuàng)建項目的時候, 選擇typescript, 會自動添加好typescript
- 已有的項目添加typescript, 使用命令
vue add typescript, 相關(guān)鏈接
自行配置webpack的項目
- npm下載依賴包
- 安裝
typescript, ts-loader, tslint, tslint-loader, tslint-config-standard, vue-property-decorator
- 增加 tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
- webpack.base.conf.js 中的配置
resolve: {
extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // 新增了'ts', 'tsx'
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.ts$/, // 用于加載項目中的ts文件
exclude: /node_modules/,
enforce: 'pre',
loader: 'tslint-loader'
},
{
test: /\.tsx?$/, // 用于加載項目中的tsx文件
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}]
- 重命名main.js
- 將main.js重命名為main.ts
- 在webpack.base.conf.js中修改入口的文件名
entry: {app: './src/main.ts'}
- 在main.ts同級目錄下添加
shims-tsx.d.ts 和 shims-vue.d.ts
// vue/cli中的shims-tsx.d.ts
// 作用: 為 JSX 語法的全局命名空間
// 這是因為基于值的元素會簡單的在它所在的作用域里按標(biāo)識符查找
// 此處使用的是無狀態(tài)函數(shù)組件的方法來定義, 當(dāng)在tsconfig內(nèi)開啟了jsx語法支持后, 其會自動識別對應(yīng)的.tsx結(jié)尾的文件
import Vue, { VNode } from 'vue'
declare global {
namespace JSX {
// tslint:disable no-empty-interface
interface Element extends VNode {}
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
interface IntrinsicElements {
[elem: string]: any
}
}
}
// vue/cli中的shims-vue.d.ts
// 作用：為項目內(nèi)所有的 vue 文件做模塊聲明, 畢竟 ts 默認(rèn)只識別 .d.ts卦碾、.ts、.tsx 后綴的文件
import Vue from "vue";
import VueRouter, { Route } from "vue-router";
declare module '*.vue' {
export default Vue
}
declare module "vue/types/vue" {
interface Vue {
$router: VueRouter; // 這表示this下有這個東西
$route: Route;
$https: any;
$urls: any;
$Message: any;
$Modal: any;
}
}
- 接下來就可以開發(fā)了, 開發(fā)的時候依賴 vue-property-decorator
- 提供了
Vue Component, Prop, PropSync, Model, Watch, Provide, Inject, ProvideReactive, InjectReactive, Emit, Ref API
