Vue CLI 3.X 初體驗

時間 2019-11-25

標籤 vue cli 3.x 體驗欄目快樂工作简体版

原文原文鏈接

因爲近期剛學習了typescript，想找個項目來看看，加之據說vue-cli 3.0開始已經支持自動搭建基於typescript的開發環境，因此也安裝了一個體驗一下，下面會簡單說一下體驗的整個流程，多圖預警！多圖預警！css

vue-cli 3.0已經更名字了，變成了@vue/cli，咱們先全局安裝一下vue

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

裝完以後能夠查看一下是否已經安裝，我這裏安裝的版本是 @vue/cli@3.0.0-beta.6git

npm list -g --depth 0
複製代碼

建立項目

接下來運行一下命令建立一個項目github

vue create <project-name>
複製代碼

選擇配置，默認配置仍是手動，這裏我選擇手動Manually vue-router

配置相關插件和功能

這裏選擇本身須要的一些插件和功能，我想試一下typescript，因此選上，vuex

typescriptvue-cli
vue-routertypescript
vuexnpm
css預處理器json
格式檢查
單元測試

是否使用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);
  }
}
複製代碼