vue3+ts ts插件安装
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3+ts ts插件安装相关的知识,希望对你有一定的参考价值。
参考技术A Typescript 版本和vue3兼容的问题,编译没问题,但是会警告解决方法: vscode 禁用Vetur插件, 安装使用 volar 插件
点击插件商店右侧,从vsix安装
出现与版本不兼容的情况
解决方法:修改安装包内的package.json文件中的版本号与vscode版本号对应即可.
1.用压缩软件打开vsix安装包
2.打开extension文件夹修改package.json
3.再次从vsix安装
vue+ts搭建工程
1.安装必要的插件
npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
2.配置webpack修改webpack.base.conf.js文件
entry: { app: ‘./src/main.ts‘ // main.js->main.ts }, resolve: { extensions: [‘.js‘, ‘.vue‘, ‘.json‘, ‘.ts‘], // 增加.ts alias: { ‘@‘: resolve(‘src‘) } }
module.rules里增加如下配置
{ test: /.ts$/, exclude: /node_modules/, enforce: ‘pre‘, loader: ‘tslint-loader‘ }, { test: /.tsx?$/, loader: ‘ts-loader‘, exclude: /node_modules/, options: { appendTsSuffixTo: [/.vue$/], } },
3. 在src下面创建vue.shim.d.ts文件
declare module "*.vue" { import Vue from "vue"; export default Vue; }
4. 添加tsconfig.json文件 运行: tsc --init
如果没有全局安装ts,就先安装一下: npm install -g typescript
一个模板tsconfig.json例子
{ "include":[ "src/**/*", "vue.shim.d.ts" ], "exclude":["node_modules"], "compilerOptions": { "target": "es5", "module": "commonjs", "lib": [ "dom", "es5", "es2015.promise" ], "allowJs": true, "strict": true, "baseUrl": "./", "paths": { "@/*":["src/*"] }, "esModuleInterop": true, "experimentalDecorators": true, } }
5.然后再去把src下面的js文件改成tswenjian
6.在index.ts跟main.ts文件里面把引入vue文件的引入路径的.vue后缀加上
7.修改vur文件例子
<script lang="ts"> import { Vue, Component } from ‘vue-property-decorator‘ @Component export default class App extends Vue { // 初始化数据 msg = 123 // 生命周期钩子 mounted () { this.greet() } // 计算属性 get computedMsg () { return ‘computed ‘ + this.msg } // 方法 greet () { alert(‘greeting: ‘ + this.msg) } } </script>
以上是关于vue3+ts ts插件安装的主要内容,如果未能解决你的问题,请参考以下文章