vue cli4.0项目引入typescript的方法

　　现有的项目是采用vue cli4.0脚手架生成的，现在想要引入typescript。

　　1.执行安装命令

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

　　2.根目录下新建 tsconfig.json

{
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "strict": true,
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "baseUrl": ".",
  "allowJs": false,
  "noEmit": true,
  "types": ["webpack-env"],
  "paths": {
   "@/*": ["src/*"]
  },
  "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 },
 "exclude": ["node_modules"]
}

　　3.新增 shims-vue.d.ts
根目录下新建 shims-vue.d.ts，让 ts 识别 *.vue 文件，文件内容如下：

declare module '*.vue' {
 import Vue from 'vue';
 export default Vue;
}

　　4.修改入口文件后缀

代码如下:

src/main.js => src/main.ts

　　5.改造 .vue 文件

src/main.js => src/main.ts

　　加上 lang=ts 可以让webpack识别此段代码为 typescript

　　6.使用装饰器插件

　　vue-class-component：强化 Vue 组件，使用 TypeScript装饰器 增强 Vue 组件，使得组件更加扁平化
　　vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰

　　Demo：

import { Vue, Component ,Watch} from 'vue-property-decorator';
@Component({
 components: { Loading }
})
export default class App extends Vue{
  old_back:object=null,
 transitionName:string = "slide-right";
 get ...mapState("base", ["loadingStatus"]);
 @Watch('$route')
 onChangeValue(to:object, from:object){
   // console.log('$route', to, from)
   const noBack = to.meta.noBack; // 监听路由变化时的状态为前进还是后退
   // 去终节点左，从终节点过来右
   if (to.meta.last) {
    this.transitionName = "slide-left";
   } else if (from.meta.last) {
    this.transitionName = "slide-right";
   } else if (from.meta.leaf) {
    // 从其它叶子页面过来的，往右
    this.transitionName = "slide-right";
   } else {
    if (noBack) {
     // 去到不需要返回的界面往右
     this.transitionName = "slide-right";
    } else {
     this.transitionName = "slide-left";
    }
   }
 }
 @Watch('loadingStatus')
 onChangeValue(newVal: string){
   if (newVal) {
    setTimeout(_ => {
     this.setLoading(false);
    }, 1500);
   }
 }
   // 弹出系统提示对话框
  showAlert(msg:string) {
   plus.nativeUI.alert(
    msg,
    function() {
     // console.log("User pressed!");
    },
    "报警详情",
    "确定"
   );
  }
}

到此这篇关于vue cli4.0项目引入typescript的文章就介绍到这了,更多相关vue cli4.0引入typescript内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vue cli使用typescript后打包巨慢的问题

    前言 最近新开了一个项目,虽然用的是 vue 技术栈,但是为了项目的健壮性,还是强上了 typescript, 于是引出了下面的问题. 问题 之前使用过 ts-loader 打包 react 项目,给我的感觉就是巨慢,开发环境下,每次保存后,需要等10秒钟左右才能构建完成,当时为了解决这个问题,把 ts-loader 替换成了 babel 的 typescript 插件,结果是非常的快,每次保存一秒中之内就能完成构建.这次在 vue 中使用 typescript,开发环境下还算快,但是构建生产包

  • vue-cli3+typescript初体验小结

    前言 气势汹涌,ts似乎已经在来的路上,随时可能敲门. 2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去.后来换工作,现实把脸都打肿了,没做过vue.react.angular?不要! 今天,不能犯这个错了,毕竟时不我与,都快奔三了. vue-cli3 vue-cli3的详细功能推荐官方文档,不在本文介绍范围内. 安装: npm install -g @vue/cli 检查安装成功与否: vue --version 创建项目: vue cre

  • Vue2 Vue-cli中使用Typescript的配置详解

    前言 因为最近公司的团队热衷于vue框架,新项目想着练练typescript,于是开始了vue+ts的踩坑之路...本文意在为和我有一样想法的伙伴们省去踩坑的时间,下面话不多说了,来一起看看关于Vue2 Vue-cli中利用Typescript需要的配置是什么吧. 一.初步配置 首先安装官方插件vue-class-component,vue-property-decorator,配置webpack. webpack配置如下: 修改入口文件 entry: { app: './src/main.ts

  • Vue-cli3项目引入Typescript的实现方法

    前言 假设已经有一个通过 vue-cli3 脚手架构建的 vue 项目 命令行安装 Typescript npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript 编写 Typescript 配置 根目录下新建 tsconfig.json,下面为一份配置实例(点击查看所有配置项).值得注意的是,默认情况下,ts 只负责静态检查,即使遇到了错误,也仅仅在编译时报错,并不会中断编译,最终还是

  • 使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

    前言 Vue3.x 即将来袭,使用 TypeScirpt 重构,TypeScript 将成为 vue 社区的标配,出于一名程序员的焦虑,决定现在 Vue2.6.x 踩一波坑. vue 官方文档已经简略地对 typescript 的支持进行了介绍,我们使用 Vue Cli3 直接生成项目 创建项目 ❓为什么使用 Vue Cli3 构建项目 官方维护,后续升级减少兼容性问题 使用以下配置进行项目的生成: Babel 对 Ts 进行转译 TSLint 对 TS 代码进行规范,后续会使用 prettie

  • vue cli4.0项目引入typescript的方法

    现有的项目是采用vue cli4.0脚手架生成的,现在想要引入typescript. 1.执行安装命令 npm install --save-dev typescript npm install --save-dev @vue/cli-plugin-typescript 2.根目录下新建 tsconfig.json { "compilerOptions": { "target": "esnext", "module": &qu

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • vue 2.0项目中如何引入element-ui详解

    vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

  • vue cli4.0 如何配置环境变量

    vue cli4.0 如何配置环境变量

    目录 1.创建不同环境变量文件 2.给.env文件添加内容 3.在package.json中添加不同环境对应的执行语句 4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli构建的项目中,默认有3种模

  • vue 2.0封装model组件的方法

    vue 2.0封装model组件的方法

    本文介绍了vue 2.0封装model组件的方法,分享给大家,希望对大家有所帮助 单文件组件 使用单文件组件封装model的模板.逻辑和样式,之后就可以在页面中调用此通用组件. 需求 model有两个使用场景: 1.备注/修改密码(简易): 在屏幕中垂直居中 2.添加/修改/展示信息(复杂): 距离屏幕顶部200px,内容过长时可滚动. 3.常规要求(共同点): 标题,关闭icon 点击确定/关闭/遮罩,隐藏model组件 分析上述需求点,得到如下图: wrapper:负责遮盖屏幕 inner:

  • vue cli2.0单页面title修改方法

    一.npm install vue-wechat-title --save  执行命令 二.在main.js中添加 Vue.use(VueWechatTitle); Vue.config.productionTip= false 三.在router/index.js文件中添加 routes: [{ path: '/',redirect: 'Home' },{ path: '/Home',name: 'Home',component: Home, meta:{ title:'银行开户' }},],

  • react项目引入scss的方法

    react项目引入scss的方法

    首先下载依赖 yarn add sass-loader node-sass 然后在项目路径 node_modules/react-scripts/config/webpack.config.js 打开文件 找到 加入红线内的代码 { test:/\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] }, 就可以使用scss了 知识点扩展: React pwa的配置 在到webpack配置文件中添加插件 const Wor

  • 利用vue+elementUI实现部分引入组件的方法详解

    前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网的介绍 iView: 一套基于 Vue.js 的高质量 UI 组件库 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型. 两者各有优缺点,不多评论,根据自己的需求,我最后使用了Element.因为最近公司开发一个很小的后台项目,所以考虑部分引入element的组件,因为第一次单独引入没有

  • VUE.CLI4.0配置多页面入口的实现

    为何需要配置多页面? 在实际工作中,肯定会遇到大型项目,往往一个架构里面会开发多个应用,而这些应用又没有太大的关联,但有可能会共用一些组件或者是样式表等,那么就会出现一个问题,打包的时候会将这些互不相关的应用全部打包. 而因为脚手架VueCli所以构建的项目属于单页面应用,因此我们就需要手动去配置,搭建一个多入口,多应用的体系 需求 首页显示各个应用名称,点击进去各自应用 实现 使用vue/cli生成一个vue项目 npm install -g @vue/cli 个人不建议直接全局安装,因为可能

随机推荐