如何用vue-cli3腳手架搭建一個基於ts的基礎腳手架

[TOC]

忙裏偷閒，整理了一下關於如何藉助 vue-cli3 搭建 ts + 裝飾器 的腳手架，並如何自定義 webpack 配置，優化。

準備工做

• @vue/cli@4.1.1
• vue 2.6
• node v12.13.0

安裝 node

• 安裝 node
• 全局安裝 nrm，npm 的鏡像源管理工具。

npm i nrm -g // 安裝
nrm ls // 查看可用源，及當前源，帶*的是當前使用的源
nrm use taobao // 切換源，使用源
nrm add <registry> <url> // 其中reigstry爲源名，url爲源的路徑
nrm del <registry> // 刪除對應的源
nrm test npm // 測試源的響應速度

安裝 vue-cli3

• 參考官方文檔：https://cli.vuejs.org/zh/guide/

npm i @vue/cli -g // 全局安裝

vue --version // 檢查是否安裝

補充

npm list -g --depth 0 // 查看全局安裝的包
npm outdated -g --depth=0 // 查看須要更新的全局包
npm update 包名 -g // 更新全局安裝的包

搭建項目

可參考：使用Vue-cli 3.0搭建Vue項目

新建一個基於 ts 的 vue 項目

vue create vue-cli3-ts

備註：若是是 window 系統，用 git bash 交互提示符（切換）不會工做，用如下命令，便可解決：

winpty vue.cmd create vue-cli3-ts

• 自定義選項 - Manually select features
• 添加 ts 支持 - TypeScript
• 基於類的組件 - y
• tslint
• 根據須要添加 router、vuex、css（less 或 scss） 預處理器、單元測試（jest）

交互說明：

• 上下箭頭鍵切換
• 空格鍵選中
• 回車肯定

在已存在的項目中添加 ts

vue add @vue/typescript

會把全部 .js 更改成 .ts

script 命令

// - 啓動服務
npm run serve
// - 打包編譯
npm run build
// - 執行lint
npm run lint
// - 執行單元測試
npm run test:unit

npm run serve 啓動服務：http://localhost:8080/#/

vue 中 ts 語法

demo: src/components/HelloWorld.vue

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

和普通的 vue 項目不同的就是.vue 文件中 script 的 寫法。

主要用到的一個庫：vue-property-decorator

用法可參考：

• npm
• vue-property-decorator用法
• ts 官方文檔

1. 類型註解，類型推論

• 變量後面經過 冒號+類型 來作類型註解。
• 編譯時類型檢查，寫代碼時代碼提醒。
• 類型推論，根據賦值類型推論出被賦值變量的類型，進行類型限制。

let title: string; // 類型註解
title = 'ts'; // 正確
title = 4; // 錯誤

let text = 'txt'; // 類型推論
text = 2; // 錯誤

錯誤時，vscode 編輯器會有紅色波浪號提示。

數組

let names: string[]; // Array<string>
names = ['Tom'];

任意類型，沒有類型限制

let foo: any;
foo = 'foo';
foo = 3;

let list: any[];
list = [1, true, 'free'];
list[1] = 100;

函數中使用類型

function greeting (person: string): string {
    return 'Hello, ' + person;
}

// void 類型，經常使用於沒有返回值的函數
function warnUser (): void {
    alert('This is msg');
}

案例：vue demo

<template>
  <div class="hello">
    <input type="text" placeholder="請輸入新特性" @keyup.enter="addFeature" />
    <ul>
      <li v-for="feature in features" :key="feature">{{feature}}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class Demo extends Vue {

  // 至關於 data 中的數據項
  features: string[];
  constructor () {
    super();
    this.features = ['類型註解', '類型推論', '編譯型語言'];
  }

  // 至關於 methods 中的方法
  addFeature (event: any) {
    console.log(event);
    this.features.push(event.target.value);
    event.target.value = '';
  }
}
</script>

2.類

ts 中的類和 es6 中的大致相同，關注特性 訪問修飾符

• private 私有屬性，不能在類的外部訪問
• protected 保護屬性，能夠在類的內部和派生類的內部訪問，不能在類的外部訪問
• public 公有屬性，能夠在任意地方訪問，默認值
• readonly 只讀屬性，必須在聲明時或構造函數裏初始化，不可改變值

構造函數：初始化成員變量，參數加上修飾符，可以定義並初始化一個屬性

constructor (private name = 'Tom') {
    super();
}

等同於

name: string;
constructor () {
    super();
    this.name = 'Tom';
}

存取器，暴露存取數據時可添加額外邏輯；在 vue 中可用做計算屬性

get fullName () { return this.name; }
set fullName (val) { this.name = val; }

案例：vue demo

<template>
    <p>特性數量：{{count}}</p>
</template>
<script lang="ts">
    export default class Demo extends Vue {
        // 定義 getter 做爲計算屬性
        get count () {
            return this.features.length;
        }
    }
</script>

接口

接口僅約束結構，不要求實現

interface Person {
    firstName: string;
    lastName: string;
}
function greeting (person: Person) {
    return `Hello, ${person.firstName} ${person.lastName}`;
}
const user = {firstName: 'Jane', lastName: 'user'};
console.log(greeting(user));

案例：vue demo，聲明接口類型約束數據結構

<template>
    <li v-for="feature in features" :key="feature.id">{{feature.name}}</li>
</template>
<script lang="ts">
    // 定義一個接口約束feature的數據結構
    interface Feature {
        id: number;
        name: string;
    }
    
    export default class Demo extends Vue {
        private features: Feature[];
        
        constructor () {
            super();
            
            this.features = [
                {id: 1, name: '類型註解'},
                {id: 2, name: '類型推論'},
                {id: 3, name: '編譯型語言'}
            ]
        }
    }
</script>

泛型

泛型 是指在定義函數、接口或類的時候，不預先指定具體的類，而是在使用時才指定類型的一種特性。

interface Result<T> {
    data: T;
}

// 不使用泛型
interface Result {
    data: Feature[];
}

案例：使用泛型約束接口返回類型

function getData<T>(): Result<T> {
  const data: any = [
      {id: 1, name: '類型註解'},
      {id: 2, name: '類型推論'},
      {id: 3, name: '編譯型語言'} 
  ];
  return {data};
}

// 調用
this.features = getData<Feature[]>().data;

案例：使用泛型約束接口返回類型 Promise

function getData<T>(): Promise<Result<T>> {
  const data: any = [
      {id: 1, name: '類型註解'},
      {id: 2, name: '類型推論'},
      {id: 3, name: '編譯型語言'} 
  ];
  return Promise.resolve<Result<T>>({data});
}

// 調用 async 方式
async mounted () {
    this.features = (await getData<Feature[]>()).data;
}

// 調用 then 方式
mouted () {
    getData<Feature[]>().then((res: Result<Feature[]>) => {
      this.features = res.data;
    })
}

裝飾器

裝飾器用於擴展類或者它的屬性和方法。

屬性聲明：@Prop

除了在 @Component 中聲明，還能夠採用@Prop的方式聲明組件屬性

export default class Demo extends Vue {
    // Props() 參數是爲 vue 提供屬性選項
    // !稱爲明確賦值斷言，它是提供給ts的
    @Prop({type: String, require: true})
    private msg!: string;
}

事件處理：@Emit

// 通知父類新增事件，若未指定事件名則函數名做爲事件名（駝峯變中劃線分隔）
@Emit()
private addFeature(event: any) {//     若沒有返回值形參將做爲事件參數
    const feature = { name: event.target.value, id: this.features.length + 1 };
    this.features.push(feature);
    event.target.value = "";
    return feature;// 如有返回值則返回值做爲事件參數
}

template 模板組件上正常寫，@add-feature

變動監測：@Watch

@Watch('msg')
onRouteChange(val:string, oldVal:any){
    console.log(val, oldVal);
}

裝飾器原理

裝飾器本質是工廠函數，修改傳入的類、方法、屬性等

類裝飾器

// 類裝飾器表達式會在運行時看成函數被調用，類的構造函數做爲其惟一的參數。
function log(target: Function) {
    // target是構造函數
    console.log(target === Foo); // true
    target.prototype.log = function() {
    console.log(this.bar);
}
// 若是類裝飾器返回一個值，它會使用提供的構造函數來替換類的聲明。
}
@log
class Foo {
    bar = 'bar'
}
const foo = new Foo();
// @ts-ignore
foo.log();

實戰一下 Component，新建 Decor.vue

<template>
    <div>{{msg}}</div>
</template>
<script lang='ts'>
    import { Vue } from "vue-property-decorator";
    function Component(options: any) {
        return function(target: any) {
            return Vue.extend(options);
        };
    }
    
    @Component({
        props: {
            msg: {
                type: String,
                default: ""
            }
        }
    })
    export default class Decor extends Vue {}
</script>

源碼簡單瞭解

類裝飾器主要依賴庫：vue-class-component，深刻源碼，瞭解其背後究竟作了什麼。

vue-property-decorator.js

import Vue from 'vue';
import Component, { createDecorator, mixins } from 'vue-class-component';
export { Component, Vue, mixins as Mixins };

createDecorator、applyMetadata 是核心，後續實現都依賴它，好比 Prop、Watch、Ref。

Prop 源碼實現：

export function Prop(options) {
    if (options === void 0) { options = {}; }
    return function (target, key) {
        applyMetadata(options, target, key);
        createDecorator(function (componentOptions, k) {
            ;
            (componentOptions.props || (componentOptions.props = {}))[k] = options;
        })(target, key);
    };
}

applyMetadata，見名知義，就是將裝飾器中的信息拿出來放到 options.type 中。

/** @see {@link https://github.com/vuejs/vue-class-component/blob/master/src/reflect.ts} */
var reflectMetadataIsSupported = typeof Reflect !== 'undefined' && typeof Reflect.getMetadata !== 'undefined';
function applyMetadata(options, target, key) {
    if (reflectMetadataIsSupported) {
        if (!Array.isArray(options) &&
            typeof options !== 'function' &&
            typeof options.type === 'undefined') {
            options.type = Reflect.getMetadata('design:type', target, key);
        }
    }
}

Reflect.getMetadata 獲取設置在類裝飾器上的元數據。可參考文章理解：

• Decorators
• TypeScript：理解 Reflect Metadata
• JavaScript Reflect Metadata 詳解

createDecorator，見名知義，就是建立裝飾器。本質是在類上定義一個私有屬性

export function createDecorator(factory) {
    return function (target, key, index) {
        var Ctor = typeof target === 'function'
            ? target
            : target.constructor;
        if (!Ctor.__decorators__) {
            Ctor.__decorators__ = [];
        }
        if (typeof index !== 'number') {
            index = undefined;
        }
        Ctor.__decorators__.push(function (options) { return factory(options, key, index); });
    };
}

項目代理及 webpack 性能優化

在項目根目錄下新建 vue.config.js

本地開發 api 代理

module.exports = {
    devServer: {
        proxy: {
          '/api': {
            target: '<url>',
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
          }
        }
    }
}

本地開發 api 模擬

devServer: {
    before (app) {
        before (app) {
            app.get('/api/getList', (req, res) => {
                res.json({data: [{id: 1, name: 'vue'}]})
            })
        }
    }
}

性能優化

查看打包依賴

在 package.json 文件 script 中加入命令：

"build:report": "vue-cli-service build --report"

會在 dist 目錄下生成 report.html，可直接打開，查看打包依賴，進行分析，進行打包優化

打包優化 - cdn 引入公共庫

在 vue.config.js 中加入配置：

configureWebpack: {
    externals: { // cdn 外鏈，避免包太大，首屏優化
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex'
    }
}

在 public/index.html 中加入 cdn 庫地址

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js"></script>

<!-- built files will be auto injected -->

再次優化，html head 信息中加，dns 域名預解析，js 庫 reload 預加載。

<link rel="dns-prefetch" href="cdnjs.cloudflare.com" >
<link href="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js" rel="preload" as="script">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js" rel="preload" as="script">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.2/vuex.min.js" rel="preload" as="script">

其餘

修改本地開發端口號，在 vue.config.js 中加入配置：

devServer: {
    port: 8888
}

體驗優化-打包完成提示：

const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
const path = require('path');

module.exports = {
    // 鏈式操做
    chainWebpack: config => {
        // 移除 prefetch 插件，移動端對帶寬敏感
        // 路由懶加載，只對用戶頻繁操做的路由，經過 註釋 提早獲取
        // component: () => import(/* webpackChunkName: "about" */ /* webpackPrefetch: true */'../views/About.vue')
        config.plugins.delete('prefetch');
    
        // 生產打包才提示，開發不提示
        if (process.env.NODE_ENV === 'production') {
          config.plugin('build-notify').use(WebpackBuildNotifierPlugin, [{
            title: "My Project Webpack Build",
            logo: path.resolve("./img/favicon.png"),
            suppressSuccess: true
          }])
        }
    }
}