Vue cli4.0 项目引入 TypeScript

    

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 文件

  <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!");
        },
        "报警详情",
        "确定"
      );
    }
}

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post WEB前端常见受攻击方式及解决办法
Next post   已到最新一篇

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://aiylqy.com
个性签名:毁掉一个人最好的方式就是放纵他的缺点。

  近期评论

很多东西宁缺毋滥,流星的光芒短暂而灼热闪耀。

让你变得更好的那个人,往往是你觉得很难与之相处的那个人。—— by 小宇

觉得自己做的到和不做的到,其实只在一念之间。

路在自己脚下,没有人可以决定我的方向。

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。