使用webpack5，vue3搭建项目

最新推荐文章于 2024-05-14 15:38:41 发布
最新推荐文章于 2024-05-14 15:38:41 发布
阅读量1.8k 收藏 9
点赞数 4
文章标签： vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/layfoo/article/details/123852083
版权

使用webpack5，vue3搭建项目

稳定地enalpro 创建 Web 应用



特性


预配置

UI 框架

  • UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

插件

  • Vue Router
  • Pinia - 直接的, 类型安全的, 使用 Composition api 的轻便灵活的 Vue 状态管理
  • Vue I18n - 国际化

编码风格

开发工具

Git 提交规范

  • 参考 vue 规范 (Angular)

    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

当然，非常推荐大家使用vite

由于这个模板的业务场景非常的局限，下面提供了一个精心策划的列表，列出了社区维护的具有不同偏好和功能集的衍生项目。也可以看看他们。当然也欢迎你 PR 提供自己的项目！

vite - Awesome Vite.js

A curated list of awesome things related to Vite.js

现在可以试试!

enalpro 需要 Node 版本 >=14

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

npx degit rwerplus/enalpro my-app
cd my-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

清单

使用此模板时，请尝试按照清单正确更新您自己的信息

  • 在 LICENSE 中改变作者名
  • 在 App.vue 中改变标题
  • 在 vue.config.ts 更改主机名
  • 在 public 目录下改变favicon
  • 移除 .github 文件夹中包含资助的信息
  • 整理 README 并删除路由

紧接着, 享受吧 😃

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

相关仓库

葬爱家族-tki
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
从0搭建webpack5+vue3开发环境
梅花寺
11-02 1412
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。安装好以后，`package.json`文件的`devDependencies`下就会有我们刚刚安装好的依赖和对应的版本) 这个时候我们发现生成的文件里面有很多注释之类的代码，文件体积很大，我们需要修改webpack配置的`mode`为`production`。
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
webpack5-vue3
03-31
项目运行命令 前端服务npm run dev | 纱线开发 节点端服务npm运行服务| 毛线发球 git提交规范 类型 用于说明commit的类别，只允许使用下面的标识。 壮举：新功能（feature） 修复：修补错误 docs：文档（文档） del：删除某些代码，或者代码文件。 样式：格式（不影响代码运行的移动） 重构：重构（即不是补充功能，也不是修改bug的代码移动） 性能：代码修改为提高性能。 测试：增加测试 琐事：建造过程或辅助工具的变动 merge：合并分支 范围 范围是说明提交影响的范围。数据层，视图层。或者是*，全部。 主题 subject是commit目的的预设描述，不超过50个字符。 体现说明[新功能] feat: 添加新的功能xxx scope: * subject: 平台新增xx功能 项目建成 webpack5 + vue3 + vant @ next
使用webpack5搭建vue3脚手架
weixin_45956954的博客
11-14 224
使用webpack5从0搭建vue-cli
【vue3+webpack5】基于vue3+webpack5配置逐步搭建前端项目
最新发布
qq_32768761的博客
05-14 1319
【vue3+webpack5】搭建前端项目，步骤详尽，满足想要搭建项目的每一个手动党。包含webpack本地服务配置，打包配置，区分环境以及css、js压缩打包，静态资源配置等优化项。
Webpack5 搭建 Vue3 + TS 项目，web网页开发
2401_84093203的博客
04-04 1116
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-7NirTWxN-1712234559064)][外链图片转存中…(img-qBiQqOHt-1712234559064)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
webpack5+vue3环境搭建/附自动化脚本(一键生成)
m0_46439976的博客
08-15 849
0.本案例目录如下 1.安装webpack webpack-cli npm install webpack webpack-cli --save-dev 2.编写webpack.config.js配置文件 const path=require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { VueLoaderPlugin } = require('vue-loader') module.exports
vue3+webpack5项目搭建基础版
05-13
使用vue3 +webpack5 + pina搭建的基础版前端项目。内容详细，包含配置注释等。配合文档（https://blog.csdn.net/qq_32768761/article/details/138844547?spm=1001.2014.3001.5501）实现从vue3创建项目，使用webpack5...
vue2+webpack搭建h5框架
03-12
vue2+webpack搭建h5框架
详解如何使用webpack在vue项目中写jsx语法
11-27
本文介绍了如何使用webpack在vue项目中写jsx语法，分享给大家，具体如下: 我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素，而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的...
webpack搭建vue 项目的步骤
08-28
本文将详细讲解如何使用 Webpack 搭建 Vue 项目，包括前期准备、创建项目、引入 Webpack、引入 Vue、引入 Babel 等步骤。 一、前期准备 在开始搭建 Vue 项目之前，需要安装 Node.js 环境，因为 Vue 项目依赖 Node....
webpack5-vue3:基于Webpack5的Vue3框架
05-13
任务列表 ts 配合 eslint 进行检测（finish） webpack 构建优化（缓存、多核、抽离、拆分）（ 手动 babel-loader 开启缓存（webpack5内置 cache 功能） 忽略打包、按需加载：IngorePlugin 不解析代码：exclude happyPack：多线程打包 提取公共代码和第三方代码 运用 CDN 文件名称使用 内容hash 懒加载 图片引用（设定阀值，根据文件大小选择 base64 格式或者 url 引入） webpack-bundle-analyzer：可视化分析 自动带有 代码压缩 tree-shaking 作用域提升（函数调用） 前端项目配置 webpack 相关 基础 包模块：webpack、webpack-cli 执行命令：webpack 热更新 包模块：webpack-dev-server（热更新所需依赖） 对应配置：webpac
webpack5-vue3::party_popper: 基于 webpack5+vue3 搭建的前端H5模板
08-04
文章介绍 demo地址: yarn install yarn dev 800多道面试题小程序
vue3-webpack5-element-plus
05-24
webpack5-demo 基于webpack5搭建的Vue开发和生产环境，目的在于熟悉webpack5以及优化开发和生产环境。 webpack5新改动 通过持久缓存提高构建性能 使用更好的算法和默认值来改善长期缓存 通过更好的Tree Shaking和代码生成来提高bundle的大小，Commonjs 的 TreeShaking,更好的 TreeShaking 可以生成 ES5 和 ES6 / ES2015 代码 提高与Web平台的兼容性 通过更好的树摇和代码生成来改善捆绑包大 清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5 1. 预设（presets） 预设(presets)的功能主要包括两个： 哪些新语法会被转换，比如@babel/preset-env是指已经纳入标准(ES6-ES1
vue3-element-plus-webpack5:一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 看
03-05
vue3-element-webpack5 一个使用element-plus框架，基于Vue3.x，使用webpack5.x构建（无vue-cli-service，刹车于扩展插件）的脚手架项目。 参见： : 一个使用webpack5.x的基于vue3.x的element-plus脚手架项目（无vue-cli-service）。 参见： :
基于webpack5，vue3搭建脚手架
qq_33290980的博客
08-17 422
webpack5跟vue3都出的挺久了，想着应该是可以开始使用了。但是发现vuecli脚手架使用的还是webpack4的版本，于是就自己封装了一个初始模板。 搭建过程的话，也没啥空写，写一下思路把。 刚开始引入vue3+webpack5其实看看官方文档就行了，照着官方文档搭建也就差不多搭出来一个基础项目出来。 搭建完成之后就是开始配置webpack，引入像是html-webpack-plugin,style-loader,css-loader之类的必要插件，做好开发，生产环境区分，以及持续的配置优化。 然后
使用webpack5搭建vue3项目过程记录(详细注解)
qq_41867900的博客
08-18 2493
webpack5搭建详细记录
数据分析项目实战，Webpack5 搭建 Vue3 + TS 项目(1)，移动端web开发入门
ccc6553584的博客
04-05 809
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
webpack构建vue3+ts项目
sun_jinlin的博客
02-02 1092
使用webpack、webpack-cli、自定义配置构建 vue3+ts项目
使用webpack搭建vue2项目
09-09
对于使用Webpack搭建Vue2项目，你可以按照以下步骤进行操作： 1. 确保你已经安装了Node.js和npm。你可以在终端中运行以下命令来验证它们是否已安装： ``` node -v npm -v ``` 如果没有安装，可以前往 Node.js 官方网站（https://nodejs.org/）下载并安装最新的稳定版本。 2. 创建一个新目录，作为你的项目根目录，并进入该目录。 3. 初始化一个新的npm项目，运行以下命令并按照提示进行操作： ``` npm init ``` 4. 在项目根目录下安装所需的依赖，包括Vue、Vue Loader、Vue Router等。运行以下命令： ``` npm install vue@2 vue-loader@15 vue-router@3 webpack webpack-cli --save-dev ``` 5. 在项目根目录下创建一个`webpack.config.js`文件，并配置Webpack的基本设置。可以参考以下示例： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, }, ], }, resolve: { alias: { vue$: 'vue/dist/vue.esm.js', }, extensions: ['*', '.js', '.vue', '.json'], }, }; ``` 6. 在项目根目录下创建一个`src`目录，并在其中创建一个`main.js`文件作为Vue应用的入口文件。 7. 在`src`目录下创建一个`components`目录，并在其中创建你的Vue组件。 8. 创建一个简单的Vue组件，并在`main.js`中引入该组件： ```javascript import Vue from 'vue'; import App from './components/App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 9. 创建一个HTML文件作为你的应用的模板，例如`index.html`： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> ``` 10. 在`package.json`文件中添加以下脚本命令： ```json "scripts": { "build": "webpack" } ``` 这将允许你在终端中运行`npm run build`命令来构建你的Vue项目。 11. 运行以下命令来构建和打包你的Vue项目： ``` npm run build ``` 这将生成一个`dist`目录，并将打包后的Vue应用文件输出到其中。 12. 打开你的HTML文件，

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值