如何用vue-cli3脚手架搭建一个基于ts的基础脚手架

忙里偷闲，整理了一下关于如何借助 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

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

用法可参考：

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 获取设置在类装饰器上的元数据。可参考文章理解：

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
          }])
        }
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342