typescript vuex_将已有的Vue项目升级支持TypeScript
TypeScript是js的超集,是由微软开发的。越来越多的项目使用TypeScript。像现在很火的Visual Studio Code就是使用TypeScript开发。
本人开发过一段Angular的项目,Angular就是基于TypeScript开发的,很喜欢这种,可以快速的从一个Java开发者无缝的切换到前端开发。
Vue也随应时代的大潮流,支持了TypeScript。在使用Vue CLI创建新项目的时候就可以直接选择TypeScript,就会创建一个基于TypeScript的基本的Vue项目。使用了一段时间感觉还可以,就着手把原来的项目升级为支持TypeScript。
1. 安装typescript
首先需要在项目中增加TypeScript语法支持:
npm install -D typescript
2. 安装Vue插件
Vue官方为我们提供了一个插件,用来聚合eslint和tslint
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript
3. 安装Vue TypeScript注解支持
在开发后端项目的时候,使用了大量的Spring注解,同样在开发Angular项目的时候,也使用Angular提供的装饰器。既然Vue集成了TypeScript,我们就需要使用官方提供的Vue TypeScript装饰器来替换原来的js方式来创建组件:
npm -S vue-class-component vue-property-decorator
4. 新建tsconfig.json
增加TypeScript编译参数配置:
{ "compilerOptions": { "noImplicitAny": false, "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", "examples/**/*.ts", //-- examples相关配置为项目特殊配置,可以不需要 "examples/**/*.tsx", "examples/**/*.vue" ], "exclude": ["node_modules"]}
5. 将main.js转换为main.ts
main.ts
import Vue from 'vue';import App from './App.vue';import router from './router';import store from './store';import axios from 'axios';import FinD from '@weus/fuc-design';import '@weus/fuc-design/lib/theme-default/index.css';import MerakUI from '../packages';Vue.use(FinD);Vue.use(MerakUI);Vue.prototype.$http = axios;Vue.config.productionTip = false;new Vue({ router, store, render: h => h(App)}).$mount('#app');
6. 添加vue声明文件
shims-vue.d.ts
declare module '*.vue' { import Vue from 'vue'; export default Vue;}
shims-tsx.d.ts
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; } }}
7. 修改项目入口配置
此配置是因为我的项目入口不是原来的src下面的,所以需要单独配置。
vue.config.js
pages: { index: { entry: 'examples/main.ts', template: 'public/index.html', filename: 'index.html' } },
8. 修改lint配置
.eslintrc.js
module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint' ], parserOptions: { // parser: 'babel-eslint' // -- ecmaVersion: 2020 }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' }};
原来项目中的配置为parser: 'babel-eslint' ,此时在TypeScript文件中声明一个实例为null 会校验提示错误。
9. 结束
到此为止,我们就可以很愉快的使用TypeScript方式去开发Vue项目了。如果使用了Vuex,还需要单独去配置Vuex的装饰器依赖。当然,不使用装饰器,我们也可以使用原来的方式使用Vue的一些特性。前端开发就是这么随性。
typescript vuex_将已有的Vue项目升级支持TypeScript相关推荐
- vue项目升级(01):全面解析vuecil3/vuecil4的vue.config.js等常用配置
前言 前端变化日新月异,层出不穷,公司原项目使用vuecil2版本开发,elementUI等一系列库版本太低,也脱离世界很久远了,新版本库需要webpack4等环境,而老版本配置起来bug很多,在使用 ...
- vue 安装 less_解决旧Vue项目升级less-loader 6.0.0报错
作为一个爱折腾的主,我的package随时都是ncu -u! 何为ncu,就是检查nodejs npm/yarn项目依赖最新版本package.json一个插件! 这不,前几天less-loader ...
- TypeScript深度剖析:Vue项目中应用TypeScript?
一.前言 与link类似 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, 其是基于vue-class-component库而来,这个库vue官 ...
- 如何在Vue项目中应用TypeScript?
一.前言 在VUE项目中应用typescript,我们需要引入一个库vue-property-decorator, # npm 下载 npm i vue-property-decorator -s # ...
- 在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)
直接进入正题(我这儿是属于cube-ui普通编译) 1,在你的vue项目中找到package.json文件安装cube-ui 终端输入命令 npm install cube-ui --save 2 ...
- Vue - 使用 腾讯云SCF部署Vue项目(支持GitHub Action)
一.前提条件 1.本地已有一个Vue2/Vue3项目 腾讯云SCF本身支持使用模板创建(模板创建参考)一个Vue项目并部署,但本文主要讲解将本 地原有的Vue项目改造为支持Serverless SCF ...
- vue项目 升级依赖包
项目维护过程中,可能会因为依赖包存在漏洞而升级依赖,或者因为需要高本版中提供的新特性而升级依赖. 在升级依赖之前,可以先执行 npm outdated 命令,查看当前哪些已安装软件包版本过时了. 标签 ...
- Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件 因为Typescript默认不能识别. ...
- docker+jenkins构建vue项目
目录 1.安装docker 2.安装Docker Compose 3.配置docker-compose.yml 4.通过 Compose 创建 jenkins 5.配置 jenkins 6.手动备份J ...
最新文章
- infer的用法_typescript高级用法之infer的理解与使用
- Spring如何解决循环依赖问题
- 【Java 笔记】 java 格式化输出
- 通用即插即用监视器驱动下载_电脑设备驱动程序有问题,教你3招,快速修复...
- anaconda和python区别_初学 Python 者自学 Anaconda 的正确姿势是什么?
- Chart 控件 for vs2008的安装
- 学习笔记: ES7(ES2016)新功能
- Maven-Eclipse使用maven创建HelloWorld Java项目,maven常用的命令解析
- 一文看懂有刷电机与无刷电机的工作原理及区别
- cmd 实用快捷键。。
- 微信视频提取及接收文件路径
- 透过年报看区块链股的含金量:无一披露此业务营收 近5成停留在研究
- (转)安装完Fedora 18后需要做的事情
- Window10 IoT家庭物联网网关系统设计
- 2022-2028年中国中医医疗机构行业投资策略探讨及市场规模预测报告
- 关于硕士毕业直接工作还是继续读博的一些思考
- 手机版python3h如何自制游戏_Python 飞机大战|10 分钟学会用 python 写游戏
- windows num_workers
- 计算机主机内部同步传输,北航网教计算机网络与应用习题-考查课
- 南通大学计算机专业分数线2020,南通大学医学院2020年招生录取分数线