vue-cli3+typescript新建一个项目的思路分析

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)Babel, TS, PWA, Router, Vuex, CSS Pre-process
ors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback 
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n

module.exports = {
 baseUrl: '/',
 devServer: {
  before: app => {
  },
  proxy: {
   '/api': {
    target: 'http://api.com',
    changeOrigin: true
   }
  }
 },
 configureWebpack: {
  resolve: {
   alias: {
    'coms': '@/components'
   }
  }
 }
}

<!-- 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>

@Watch("page")
 onPageChanged(newValue: number) {
  //doSomething
 }

@Emit('msg')
 dosomething() {
 }

get route() {
  return this.$route;
 }