当前位置：首页 > news >正文

第二十章 TypeScript（webpack构建ts+vue3项目）

news 2025/9/16 14:41:03

构建项目目录

src
-- main.ts
-- App.vue
--shim.d.ts
webpack.config.js
index.html
package.json
tsconfig.json

基础构建

npm install webpack -D
npm install webpack-dev-server -D
npm install webpack-cli -D

package.json 添加打包命令和启动服务的命令

{"scripts": {"build": "webpack","dev": "webpack-dev-server"}
}

编写webpack.config.js 配置文件测试打包

const { Configuration } = require('webpack')
const path  = require('path')
/*** @type {Configuration}*/
const config = {mode:"development", //开发模式entry:'./src/main.ts', //入口output:{path: path.resolve(__dirname, 'dist'), //出口目录filename: 'main.js', //出口文件}
}module.exports = config

tsconfig.json 增加配置项

  "include": ["src/**/*"]

运行npm run build 打包成功

支持TypeScript

增加依赖

npm install ts-loader -D
npm install typescript -D

const { Configuration } = require('webpack')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},module: {rules: [{test: /\.ts$/,use: 'ts-loader' //支持解析ts文件}]}
}module.exports = config

支持vue

安装依赖

npm install vue-laoder -D
npm install html-webpack-plugin -D

main.ts 引入Vue

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

让ts识别.vue后缀

declare module "*.vue" {import { DefineComponent } from "vue"const component: DefineComponent<{}, {}, any>export default component
}

初始化index.html 模板

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"></div>
</body>
</html>

增加vue-loader 和插件

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],module: {rules: [{test: /\.ts$/,use:{loader: 'ts-loader',options:{appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'}]}
}module.exports = config

支持css + less

安装依赖

npm install css-loader style-loader less less-loader -D

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js',},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],module: {rules: [{test: /\.ts$/,use:{loader: 'ts-loader',options:{appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: ['style-loader', 'css-loader'] //从右向左解析},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
}module.exports = config

代码分包

性能优化默认把所有代码打包到一个js文件体积太大了我们可以进行代码分包减少体积

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: '[chunkhash].js',clean: true},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'})],optimization: {splitChunks: {cacheGroups: {moment: {name: "moment",test: /[\\/]node_modules[\\/]moment[\\/]/,chunks: "all"},common:{name: "common",chunks: "all",minChunks: 2}}}},module: {rules: [{test: /\.ts$/,use: {loader: 'ts-loader',options: {appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: ['style-loader', 'css-loader'] //从右向左解析},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]}
}module.exports = config

单独提取css

目前是通过js动态插入style标签的方式进行的，但是我们希望通过link标签引入

安装依赖

npm install mini-css-extract-plugin -D

const { Configuration } = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWepackPlugin = require('html-webpack-plugin')
const MimiCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
/*** @type {Configuration}*/
const config = {mode: "development",entry: './src/main.ts',output: {path: path.resolve(__dirname, 'dist'),filename: '[chunkhash].js',clean: true},stats: 'errors-only',plugins: [new VueLoaderPlugin(),new HtmlWepackPlugin({template: './index.html'}),new MimiCssExtractPlugin()],optimization: {splitChunks: {cacheGroups: {moment: {name: "moment",test: /[\\/]node_modules[\\/]moment[\\/]/,chunks: "all"},common:{name: "common",chunks: "all",minChunks: 2}}}},module: {rules: [{test: /\.ts$/,use: {loader: 'ts-loader',options: {appendTsSuffixTo: [/\.vue$/]}}},{test: /\.vue$/,use: 'vue-loader'},{test: /\.css$/,use: [MimiCssExtractPlugin.loader, 'css-loader'] //从右向左解析},{test: /\.less$/,use: [MimiCssExtractPlugin.loader, 'css-loader', 'less-loader']}]}
}module.exports = config

第二十章 TypeScript（webpack构建ts+vue3项目）

构建项目目录 src-- main.ts-- App.vue--shim.d.tswebpack.config.jsindex.htmlpackage.jsontsconfig.json 基础构建 npm install webpack -D npm install webpack-dev-server -D npm install webpack-cli -D package.json 添加打包命令和启动服务的命令 {"scripts…...

编程日记 2024/3/25 17:25:47

白酒：陈酿过程中的老熟度评价与品质提升方法

在豪迈白酒的酿造过程中，陈酿是一个至关重要的环节。陈酿不仅能使白酒老熟，提品质，还能发展出与众不同的风味和口感。云仓酒庄深知陈酿的重要性，并进行了深入的研究和实践。本文将探讨陈酿过程中的老熟度评价与品质提升方法。首先…...

编程日记 2024/3/25 17:23:44

BoostSeacher

前言： 基于Boost库的搜索引擎为何基于Boost库？ 从技术上说：这个项目用了很多Boost库的接口从搜索引擎存储内说：存储的内容是Boost库的内容预期效果预期效果:用户在浏览器输入关键词，浏览器显示相关结果 STEP1&#x…...

编程日记 2024/3/25 17:16:36

我的算法刷题笔记（3.18-3.22）

我的算法刷题笔记（3.18-3.22） 1. 螺旋矩阵1. total是总共走的步数2. int[][] directions {{0, 1}, {1, 0}, {0, -1}, {-1, 0}};方位3. visited[row][column] true;用于判断是否走完一圈 2. 生命游戏1. 使用额外的状态22. 再复制一份数组 3. 旋转图像观…...

编程日记 2024/3/25 17:07:26

初探Ruby编程语言

文章目录引言一、Ruby简史二、Ruby特性三、安装Ruby四、命令行执行Ruby五、Ruby的编程模型六、案例演示结语引言大家好，今天我们将一起探索一门历史悠久、充满魅力的编程语言——Ruby。Ruby是由松本行弘（Yukihiro Matsumoto）于1993年发明…...

编程日记 2024/3/25 17:05:24

深圳MES系统如何提高生产效率

深圳MES系统可以通过多种方式提高生产效率，具体如下： 实时监控和分析：MES系统可以实时收集并分析生产数据，帮助企业及时了解生产状况，发现问题并迅速解决，避免问题扩大化。这种实时监控和分析功能可以显著…...

编程日记 2024/3/25 17:03:22

QT常见Layout布局器使用

布局简介为什么要布局？通过布局拖动不影响鼠标拖动窗口的效果等优点.QT设计器布局比较固定，不方便后期修改和维护；在Qt里面布局分为四个大类 ： 盒子布局：QBoxLayout 网格布局：QGridLayout 表单布局&am…...

编程日记 2024/3/25 16:59:18

Elasticsearch8 - Docker安装Elasticsearch8.12.2

前言最近在学习 ES，所以需要在服务器上装一个单节点的 ES 服务器环境：centos 7.9 安装下载镜像目前最新版本是 8.12.2 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.12.2创建配置新增配置文件 elasticsearch.yml http.host…...

编程日记 2024/3/25 16:58:16

还在为不知道怎么学习网络安全而烦恼吗？这篇文带你从入门级开始学习网络安全—认识网络安全

随着网络安全被列为国家安全战略的一部分，这个曾经细分的领域发展提速了不少，除了一些传统安全厂商以外，一些互联网大厂也都纷纷加码了在这一块的投入，随之而来的吸引了越来越多的新鲜血液不断涌入。不同于Java、C/C等后端开发岗…...

编程日记 2024/3/25 16:57:15

DFS基础——迷宫

迷宫配套视频讲解关于dfs和bfs的区别讲解。对于上图，假设我们要找从1到5的最短路，那么我们用dfs去找，并且按照编号从大到小的顺序去找，首先找到的路径如下， 从节点1出发，我们发现节点2可以走&#xff…...

编程日记 2024/3/25 16:55:13

iOS开发进阶（九）：OC混合开发嵌套H5应用并互相通信

文章目录一、前言二、嵌套H5应用并实现双方通信2.1 WKWebView 与JS 原生交互2.1.1 H5页面嵌套2.1.2 常用代理方法2.1.3 OC调用JS方法2.1.4 JS调用OC方法 2.2 JSCore 实现原生与H5交互2.2.1 OC调用H5方法并传参2.2.2 H5给OC传参 2.3 UIWebView的基本用法2.3.1 H5页面嵌套2.3.2 …...

编程日记 2024/3/25 16:54:11

新人应该从哪几个方面掌握大数据测试？

什么是大数据大数据是指无法在一定时间范围内用传统的计算机技术进行处理的海量数据集。对于大数据的测试则需要不同的工具、技术、框架来进行处理。大数据的体量大、多样化和高速处理所涉及的数据生成、存储、检索和分析使得大数据工程师需要掌握极其高的技术功底。需要你…...

编程日记 2024/3/25 16:53:10

linux debian运行pip报错ssl tsl module in Python is not available

写在前面 ① 在debian 8上升级了Python 3.8.5 ② 升级了openssl 1.1.1 问题描述在运行pip命令时提示如下错误 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.尝试了大神推荐的用如下方法重新编译安装python，发…...

编程日记 2024/3/25 16:52:08

宝塔设置限制ip后，ip改了之后，登陆不上了

前言今天作死，在宝塔面板设置界面，将访问面板的ip地址限制成只有自己电脑的ip才能访问，修改之后直接人傻了，“403 forbidden”。吓得我直接网上一通搜索，还好，解决方法非常简单。解决方法打开ssh客户…...

编程日记 2024/3/25 16:51:07

解锁新功能，Dynadot现支持BITPAY平台虚拟货币

Dynadot现已支持虚拟货币付款！借助与BitPay平台的合作，Dynadot为您提供了多种安全的虚拟货币选择。我们深知每位客户都有自己偏好的支付方式，因此我们努力扩大了支付方式范围。如果您对这一新的支付方式感兴趣，在结账时您可以尝试…...

编程日记 2024/3/25 16:47:02

Android下的Touch事件分发详解

文章目录一、事件传递路径二、触摸事件的三个关键方法2.1 dispatchTouchEvent(MotionEvent ev)2.2 onInterceptTouchEvent(MotionEvent ev)2.3 onTouchEvent(MotionEvent event) 三、ViewGroup中的dispatchTouchEvent实现四、总结在Android系统中，触摸事件的分发和…...

编程日记 2024/3/25 16:43:57

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等 main.js 入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pag…...

编程日记 2024/3/25 16:42:56

B端设计：如何让UI组件库成为助力，而不是阻力。

首发2023-09-24 15:42贝格前端工场 Hi，我是大千UI工场，网上的UI组件库琳琅满目，比如elementUI、antdesign、iview等等，甚至很多前端框架，也出了很多UI组件，如若依、Layui、bootstrap等等，作为U…...

编程日记 2024/3/25 16:41:55

敏捷开发最佳实践：学习与改进维度实践案例之会诊式培养敏捷教练

自组织团队能够定期反思并采取针对性行动来提升人效，但2022年的敏捷调研发现，70%的中国企业在学习和改进方面仍停留在团队级。本节实践案例将分享“会诊式培养敏捷教练”的具体做法，突出了敏捷以人为本的学习和改进，强调了通过人员…...

编程日记 2024/3/25 16:39:52

C#宿舍信息管理系统

简介功能 1.发布公告 2.地理信息与天气信息的弹窗 3.学生信息的增删改查 4.宿舍信息的增删改查 5.管理员信息的增删改查 6.学生对宿舍物品的报修与核实 7.学生提交请假与销假 8.管理员对保修的审批 9.管理员对请假的审批技术 1.采用C#\Winform开发的C\S系统 2.采用MD5对数据…...

编程日记 2024/3/25 16:38:50

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/14 10:44:36

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/15 18:06:39

springboot 百货中心供应链管理系统小程序

一、前言随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...

编程新知 2025/9/16 1:39:16

简易版抽奖活动的设计技术方案

1.前言本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/9/15 13:18:16

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述上一节对安装和使用有个基本介绍。根据这个 issue 的描述，后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作，其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/9/12 20:53:43

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略背景Solution --- 分表背景使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...

编程新知 2025/9/11 12:54:52

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29