码迷,mamicode.com
首页 > 其他好文 > 详细

vue ts版本使用的常见问题

时间:2020-08-27 11:47:46      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:component   常见   repr   width   imp   plugin   route   private   names   

一、创建vue-ts项目

现Vue CLI3经内置了TypeScript工具支持

npm install -g @vue/cli

vue create vue-ts

二、基于类的组件 vue-class-component vue-property-decorator

vue-class-component

import Vue from ‘vue‘
import Component from ‘vue-class-component‘
import home from "../views/home.vue";//导入组件

@Component({
    components: { home }
})
export default class App extends Vue {
    // 初始 data
    msg = 123

    // use prop values for initial data
    helloMsg = ‘Hello, ‘ + this.propMessage

    // 生命钩子lifecycle hook
    mounted () {
          this.greet()
    }

    // 计算属性computed
    get computedMsg () {
          return ‘computed ‘ + this.msg
    }

    // 方法method5
    greet () {
          alert(‘greeting: ‘ + this.msg)
    }
}

vue-property-decorator

  • @Component (完全继承于vue-class-component)
  • @Emit
  • @Inject
  • @Provice
  • @Prop
  • @Watch
  • @Model
  • Mixins (在vue-class-component中定义);
<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import MixinHelle from "./MixinHelle";


@Component({
      Mixins: ["MixinHelle"],
})
export default class HelloWorld extends Vue {
      @Prop() private msg!: string;

      @Watch(‘Visible‘)
      getVisible(newVal, oldVal) {
            console.log("newVal", newVal, "oldVal", oldVal)
      };
}
</script>

三、ts vue-class-component 扩展vue默认钩子函数 例: MetaInfo

1、Component.registerHooks

main.ts

import MetaInfo from "vue-meta-info";
import Component from "vue-class-component";

Vue.use(MetaInfo);
// 将 metaInfo 加入到 Component 的事件中  不然 metaInfo 无效
Component.registerHooks([
    "metaInfo",
]);

HelloWorld.vue

import { Component, Vue } from "vue-property-decorator";

@Component // 不加这个,vue事件钩子不能执行
export class HelloWorld extends Vue {
      metaInfo() {
            return {
                  title: "title",
                  meta: [
                        {
                            name: "keywords",
                            content: "keywords",
                        },
                  ]
            };
      }
}
2、declare module "vue/types/options"

shims-vue.d.ts

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    metaInfo?: any;
  }
}

mian.ts

import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);

HelloWorld.vue

import { Component, Vue } from "vue-property-decorator";

@Component({
    metaInfo() {
          return {
                title: "title",
                meta: [
                      {
                            name: "keywords",
                            content: "keywords",
                      },
                ]
          };
    }
})
export class HelloWorld extends Vue {
}

四、Mixins 使用

import { Component, Vue } from "vue-property-decorator";

@Component // 不加这个,vue事件钩子不能执行  metaInfo
export class MetaInfo extends Vue {
    public title: string = "";
    public meta: Array<object> = [];
    
    metaInfo() {
        return {
            title: this.title,
            meta: this.meta,
        };
    }

    public setMetaInfo(key: string): void {
        this.title = key;
        this.meta = [
            {
                name: "viewport",
                content: "width=device-width, user-scalable=yes",
            },
            {
                name: "keywords",
                content: "keywordskeywordskeywords",
            },
            {
                name: "description",
                content: "description",
            },
        ];
    }
}

HelloWorld.vue

<script lang="ts">
import { Component } from "vue-property-decorator";
import { MetaInfo } from "../mixins/metaInfo";

@Component
export default class HelloWorld extends MetaInfo {
    created() {
        this.setMetaInfo("Home1");
    }
}
</script>

五、vuex-class

import { Vue, Component, Prop, Watch } from ‘vue-property-decorator‘;
import { State, Getter, Action, Mutation, namespace } from ‘vuex-class‘;
const missionModule = namespace(‘mission‘);
@Component
export default class ViewMenuConditionComponent extends Vue {
    @missionModule.Getter(‘getTaskProps‘) taskProps;   //模块内getters用法,
    @missionModule.Getter(‘getConditionValues‘) conditionValues;
    @Action(‘foo‘) actionFoo     //全局的action调用方法
    @Mutation(‘foo‘) mutationFoo   //全局的mutation调用方法
 
    created () {
          this.taskProps // -> store.mission.taskProps
          this.conditionValues // -> store.mission.conditionValues
    
          this.actionFoo({ value: true }) // -> store.dispatch(‘foo‘, { value: true })
          this.mutationFoo({ value: true }) // -> store.commit(‘foo‘, { value: true })
    }
}

六、 引入第三方包报错 shims-vue.d.ts

import Vue from "vue";
import { Store } from "vuex";
import VueRouter, { Route } from "vue-router";

// vue.prototype.HOST 声明
declare module "vue/types/vue" {
  interface Vue {
      $router: VueRouter;
      $route: Route;
      $store: Store<any>;
      $util: any;
      $req: any;
      HOST: string;
  }
}

// 与上面内容在同一个文件可能  声明可能不成功,则新建文件 vue-shims.d.ts
declare module "vue-meta-info";

七、tsx 语法

八、全局引入 less style-resources-loader

vue add style-resources-loader

// vue.config.js
pluginOptions: {
    ‘style-resources-loader‘: {
        preProcessor: ‘less‘,
        patterns: [
            path.resolve(__dirname, ‘./src/common.less‘)
        ]
    }
}

// 

vue ts版本使用的常见问题

标签:component   常见   repr   width   imp   plugin   route   private   names   

原文地址:https://www.cnblogs.com/you-uncle/p/13541676.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!