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