vue 项目 将 javascript 切换 typescript
·
vue 项目 将 javascript 切换 typescript
步骤:
1:添加 tsconfig.json 文件
// tsconfig.json 文件
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": 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"]
}
2:修改vue.config.js文件中的入口地址
module.exports = {
// 修改 pages 入口
pages: {
index: {
// 修改这,以前是 main.js 修改成 main.ts
entry: 'src/main.ts', // 入口
template: 'public/index.html', // 模板
filename: 'index.html' // 输出文件
}
},
...
}
3:添加main.ts 文件
// main.ts
import "./main.js"
4:package.json文件中添加依赖
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
...
}
5:更新依赖
npm install
6:项目中的使用
// A.vue 文件
<template>
...
</template>
<script lang="ts">
import Vue from "vue";
// 注意点 在引入vue文件时,需要添加 .vue 后缀,ts 文件则不需要
import B from "./B.vue"
export default Vue.extend({
...
});
更多推荐


所有评论(0)