vue-cli3+typescript新建一个项目

  最近在用vue搭一个后台管理的单页应用的demo，由于以前只用过vue-cli2+javascript进行开发，而vue-cli3早在去年8月就已经发布，而且对于typescript有了很好地支持。因此为了熟悉新技术，我选择使用vue-cli3+typescript进行新应用的开发。这里是新技术的学习记录。

初始化项目

  卸载老版本脚手架，安装新版本脚手架后，开始初始化项目。初始化的命令跟2.x版本的略有不一样，之前是vue init webpack project-name，而如今是vue create project-name。vue-cli3已经彻底把webpack绑定了，这也就意味着没法像之前那样选择别的打包工具好比webpack-simple。若是必定要用webpack-simple，能够额外安装@vue/cli-init，能够在不卸载cli3的状况下使用init命令进行初始化。输入create命令后，能够选择初始配置。为了学习，我选择自定义，并把全部可选内容都勾选上。其他配置项基本就按默认的来，最终的配置状况以下。

? 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

  而后须要一点时间来下载npm包，初始化完成后，看一下工程目录，能够看到跟vue-cli2的仍是有不少不同的地方。router和store都变成了单独的文件，而不是之前的文件夹，固然若是有须要的话能够本身建这两个文件夹。

  最大的区别在于webpack配置都被隐藏起来了，默认没有了那些config文件，如今若是须要修改webpack配置项，能够在根目录新建一个 vue.config.js进行配置。这种的配制方法在2.x版本也能够用，内容也跟以前的相似。

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的用法以下

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

另外计算属性的写法也有所不一样，再也不须要computed关键字，而是直接用get写法

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

至于生命周期钩子，则跟原来的都差很少。只不过写的时候，要注意typescript语法。在对象声明的时候，要加上msg : string类型标识。在有一些对象引用的地方，对于一些未知类型的引用，能够加上(msg as any)的标识。不加这些的话，会有错误提醒，可是不影响运行。

测试

todo