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

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

news 2025/6/16 13:35:41

构建项目目录

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章传送阵>> 点我查看说明：假设每台服务器已…...

编程新知 2025/6/16 11:27:31

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/6/15 16:22:08

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/6/15 20:38:27

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/6/15 10:50:22

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/6/15 23:16:01

Springboot社区养老保险系统小程序

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

编程新知 2025/6/15 2:01:20

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/6/16 5:44:14

【Linux】Linux 系统默认的目录及作用说明

博主介绍：✌全网粉丝23W，CSDN博客专家、Java领域优质创作者，掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围：SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/6/15 19:46:06

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/6/15 11:47:07

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。前提条件： 在被管理的节点上安装WinRm 准备一张自签名的证书开放防火墙入站tcp 5985 5986端口准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

编程新知 2025/6/15 23:07:59

构建项目目录

基础构建

支持TypeScript

支持vue

支持css + less

代码分包

单独提取css

相关文章：