module.exports = {
baseUrl: '/',
devServer: {
before: app => {
},
proxy: {
'/api': {
target: 'http://api.com',
changeOrigin: true
}
}
},
configureWebpack: {
resolve: {
alias: {
'coms': '@/components'
}
}
}
}vue组件
项目初始化后的
Home.vue和
HelloWorld.vue很好地举例说明了新的写法。
<!-- home.vue -->
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Component({
components: {
HelloWorld,
},
})
export default class Home extends Vue {}
</script>
<!-- helloworld.vue -->
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
style 部分跟之前的并没有区别， template 部分的自定义组件变成了单标签的写法。最大的变化在于 script 部分。vue-cli3加入了更加流行的class写法，并且引入了许多面向对象语言（比如python）都有的装饰器。
装饰器其实是一个返回函数的高阶函数，接受一个函数对象作为参数，返回一个函数并赋值给原对象，它的作用主要是减少代码量。现在可以把组件的name和引用的别的
component加到 @Component 后面，像Home.vue中那样。其他的方法和属性，可以直接写到class里面。因为是class的写法，所以也不需要
data(){return} ，可以直接写属性和方法。在写的时候，注意还有些地方会用到装饰器，常见的有 @Prop @Watch @Emit ，都需要单独引用。Prop在HelloWorld.vue中就有例子。Watch的使用如下
@Watch("page")
onPageChanged(newValue: number) {
//doSomething
}watch的对象是个字符串，后面跟着的就是watch的操作。这里的函数名并没有任何意义，只要不重复即可。
Emit的用法如下
