• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue cli4.0项目引入typescript

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

  现有的项目是采用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 文件

  <script>替换为<script lang="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!");
        },
        "报警详情",
        "确定"
      );
    }
}

....


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
初识TypeScript发布时间:2022-07-18
下一篇:
TypeScript(02):安装发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap