Vue CLI 3.X 初體驗

由於近期剛學習了typescript，想找個專案來看看，加之聽說vue-cli 3.0開始已經支援自動搭建基於typescript的開發環境，所以也安裝了一個體驗一下，下面會簡單說一下體驗的整個流程，多圖預警！多圖預警！

vue-cli 3.0已經改名字了，變成了@vue/cli，我們先全域性安裝一下

npm install -g @vue/cli
或者
yarn add global @vue/cli
複製程式碼

裝完之後可以檢視一下是否已經安裝，我這裡安裝的版本是 @vue/cli@3.0.0-beta.6

npm list -g --depth 0
複製程式碼

建立專案

接下來執行一下命令建立一個專案

vue create <project-name>
複製程式碼

選擇配置，預設配置還是手動，這裡我選擇手動Manually

配置相關外掛和功能

這裡選擇自己需要的一些外掛和功能，我想試一下typescript，所以選上，

typescript
vue-router
vuex
css前處理器
格式檢查
單元測試
是否使用class風格的元件語法，這裡選y，腳手架就會幫我們安裝以下元件
vue-class-component
vue-property-decorator
是否使用babel做轉義，選y
選擇一種css預處理語言，這裡我選擇LESS
選擇一種校驗規則，我選擇TSLint
選擇校驗的時機
儲存的時候校驗
提交的時候校驗

我選擇第一項
選擇單元測試的配置，這裡選擇Mocha + Chai
這裡是詢問怎麼存放babel,postcss,eslint等的配置檔案
單獨存放
整合在package.json

我選擇第一項，單獨存放
詢問是否儲存當前配置，我選擇否
選擇一個包管理器來安裝，這個看自己喜好吧，我選擇yarn
配置好了，開始安裝
安裝完畢，執行命令啟動服務

yarn serve
複製程式碼

服務啟動後，在瀏覽器中開啟相應網址，就可以看到效果了

專案分析

我們看一下生成的專案的目錄，可以看到專案精簡了不少，沒有了config和build等目錄，由於我配置的是typescript專案，所以在專案的view目錄下多出了一個 shims.d.ts 宣告檔案，根目錄下多出了一個ts的配置檔案 tsconfig.json

我們點開package.json 檔案可以看到目錄下加了一些修飾符的元件

看到這裡問題來了，沒有了build目錄，我們怎麼修改專案的配置呢？比如說我想修改一下除錯的埠，其實我們可以在專案根目錄下增加一個vue.config.js檔案，配置如下

module.exports = {
  devServer: {
    port: 8989
  }
}
複製程式碼

儲存以後重啟伺服器，就可以看到埠已經變成了我們修改的了，關於vue.config.js的詳細配置項請點選這裡

專案初體驗

接下來我們嘗試用typescript寫點東西，體驗一下。點開component目錄下的HelloWorld.vue檔案，發現編輯器居然畫了紅線，這不科學啊

我們修改一下程式碼就好了

其實這個問題是由於我編輯器上的vetur外掛引起的，完全是誤傷友軍。關於這個問題請檢視報錯原因

下面我們來點ts程式碼，這裡我定義了一個資料，然後去改變它，再監聽這個事件

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { watch } from 'fs';

@Component
export default class HelloWorld extends Vue {
  protected testdata: number = 666;
  @Prop() private msg: string|any;
  @Watch('testdata')
  public onTestDataChanged(val: number, oldVal: number) {
    alert(`當前的值為：${val}`);
  }
  private mounted() {
    alert(`當前的值為: ${this.testdata}`);
    setTimeout(() => {
      this.testdata = 999;
    }, 500);
  }
}
複製程式碼

執行結果如下，可以看到結果是按預想的實現了

結語

本文簡單介紹了用Vue CLI 3.X來搭建typescript開發環境的配置過程，關於其中深層次的開發實現還有待去實踐

參考文件

10分鐘上手最新vue腳手架

Vue CLI 3.X 初體驗

建立專案

配置相關外掛和功能

專案分析

專案初體驗

結語

相關文章