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

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

news 2025/11/12 15:18:27

构建项目目录

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

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

【AI学习】三、AI算法中的向量

在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...

编程新知 2025/8/12 22:58:13

React---day11

14.4 react-redux第三方库提供connect、thunk之类的函数以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2025/9/13 7:43:29

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/11/12 13:39:03

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36