忙里偷闲,整理了一下关于如何借助 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' "htmlcode">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="/UploadFiles/2021-04-02/vue.min.js">再次优化,html head 信息中加,dns 域名预解析,js 库 reload 预加载。
<link rel="dns-prefetch" href="cdnjs.cloudflare.com" rel="external nofollow" > <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 }]) } } }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]