标签:component 常见 repr width imp plugin route private names
现Vue CLI3经内置了TypeScript工具支持
npm install -g @vue/cli
vue create vue-ts
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
<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>
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",
},
]
};
}
}
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 {
}
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>
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 })
}
}
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";
vue add style-resources-loader
// vue.config.js
pluginOptions: {
‘style-resources-loader‘: {
preProcessor: ‘less‘,
patterns: [
path.resolve(__dirname, ‘./src/common.less‘)
]
}
}
//
标签:component 常见 repr width imp plugin route private names
原文地址:https://www.cnblogs.com/you-uncle/p/13541676.html