vue3+webpack快速创建新项目

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

1、vue -V 查看版本 ； 版本不够高用：npm install --g vue-cli在这里插入图片描述

2、vue create vue-next-test 创建vue3.0项目
在这里插入图片描述（我个人喜欢自己手动配置一下）
选项中：
Default (Vue 3) ([Vue 3] babel, eslint)(默认配置 提供babel或者eslint支持)
Manually select features(手动选择项目特性)

3、选择Manually select (enter键确认后进入下一步)
在这里插入图片描述

4、上图各项指标对照一下分析：

Babel 主要是对es6语法转换成兼容的js （选上）

TypeScript 支持使用TypeScript语法来编写代码

Progressive Web App (PWA) Suppor

最低0.47元/天 解锁文章
隐密修罗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3学习 第九章 webpack 构建Vue3项目、vue3性能优化、Vue3 Web Components、Vue3 响应式原理
m0_55170432的博客
11-14 1064
学习
vue2.6+webpack5+typescript
09-07
- 初始化项目：使用Vue CLI创建新项目，并选择使用TypeScript。 - 配置Webpack：根据项目需求，定制Webpack配置文件`webpack.config.js`，包括加载器、插件和优化选项。 - 安装依赖：通过`npm install`或`yarn ...
从0 搭建vue3+webpack5项目，不使用cli脚手架
dum_plings的博客
04-24 2202
从0搭建vue3+webpack5项目 一、初始化 1、先创建一个空文件夹 demo（任意命名） 在当面文件夹下打开cmd 命令框 输入 npm init -y 初始化项目生成package.json 文件 在后面加上 -y 能够让我们省去填写信息的步骤。 如果文件夹里面出现了package.json 文件那么说明你成功初始化了项目。 二、安装依赖 在cmd 命令框中 输入 1、安装webpack 注意这里是在本地安装，而不是全局安装。 npm install webpack webpack-cli -
从零开始搭建Webpack+Vue3标准化开发项目
sieyoo的博客
12-21 942
20211221 从零开始搭建Webpack+Vue3标准开发项目 让我们来试写了一个适合工程化的、标准化的项目，主要是强调正确的目录结构应该是怎么样的，下文会做一些对比与分析 一、开发前准备 请确保您已经安装了node.js 二、创建项目 首先需要创建一个空目录，在该目录打开命令行，执行npm init命令创建一个项目，完成后会自动生成一个 package.json 文件。 注意：我们重新指定入口文件（entry）为main.js而不是index.js。 PS：因为很多目录下都有index
手动使用webpack配置vue3开发环境
qq_42294411的博客
05-07 453
手动使用webpack配置vue3开发环境。
从头搭建vue3+webpack移动端项目
dghgjuyhuoyho的博客
02-24 592
依次npm 下载sass(也可以是less,我习惯用sass),sass-loader,style-loader,webpack,webpack-cli,webpack-dev-server,webpack-merge。(webpack版本5.x.x以上的，必须要单独创建这个postcss.config.js，写在vue.config.js或者webpack.config.js里是无效的)在项目根目录下创建postcss.config.js文件，我用到vant组件库 所以。
从零开始使用 Webpack 搭建 Vue3 开发环境
HumorMrChen的博客
03-02 1227
从零开始使用 Webpack 搭建 Vue3 开发环境
Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
逆境清醒的博客
03-19 6万+
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
Vue 3.x是Vue.js框架的最新版本，它带来了许多性能优化和新特性，而Webpack 5.x作为现代JavaScript应用的模块打包器，能够有效地管理和构建项目。 首先，让我们了解Vue 3.x的关键变化。Vue 3.x引入了Composition ...
浅谈vue+webpack项目调试方法步骤
12-12
通过全局安装`vue-cli`，然后使用`vue init webpack my-project`命令可以快速创建一个包含Webpack配置的新项目。Vue CLI的配置文件会根据开发或生产环境选择合适的`devtool`设置。在开发环境中，通常使用`#cheap-...
vue-cli+webpack项目 修改项目名称的方法
08-27
建议创建一个新的分支或者新项目来实现名称的改变。 3. **配置文件**： - **vue.config.js**（如果存在）：检查是否有引用项目名称的地方，如自定义的公共路径(`publicPath`)等。 - **.babelrc**，**eslintrc.js*...
vue init webpack 建vue项目报错的解决方法
10-17
今天小编就为大家分享一篇vue init webpack 建vue项目报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3--Webpack
WXX的博客
08-06 1799
grunt/gulp/webpack/rollup(vue源码是由rollup构建的) 什么是webpack webpack是一个现代的JavaScript应用的静态模块 打包工具 WebPack是前端资源模块工具，主要分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 和grunt、gulp的对比 grunt、gulp的核心是task，定义任务流，配置一系列的task，并且定义.
webpack构建vue3项目
weixin_55508765的博客
01-16 1625
在前端工作中，开发vue的话，基本上使用的是基于vue-cli vite等构建的，基于其原理，借鉴了很多大佬的经验，本文记录了使用Webpack从零开始搭建一个TS+Vue3项目的步骤，给大家分享一下。文章后面有源码，包版本。使用的node和pnpm版本如下。
Vue3.0项目创建方式
dou_xiaobao的博客
10-30 864
1、 创建Vue3的3种方式 ① Vue-CLI 基于脚手架2.0或者脚手架3.0 ② Webpack 自己手动配置webpack环境 ③ Vite vue3新特性 <!-- Webpack -> git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName cd projectName npm install npm run dev // Vue-CLI npm insta.
【vue3+webpack5】基于vue3+webpack5配置逐步搭建前端项目
最新发布
qq_32768761的博客
05-14 1946
【vue3+webpack5】搭建前端项目，步骤详尽，满足想要搭建项目的每一个手动党。包含webpack本地服务配置，打包配置，区分环境以及css、js压缩打包，静态资源配置等优化项。
Vue 3 和 Webpack 5 来了，手动搭建的知识该更新了
前端劝退师
01-28 2298
本文已获得原作者的独家授权，有想转载的朋友们可以在后台联系我申请开白哦！PS：欢迎掘友们向我投稿哦，被采用的文章还可以送你掘金精美周边！前言想必绝大多数用 Vue开发过项目的同学，或多...
vue-cli3搭建项目之webpack配置
热门推荐
梦行天宇的博客
02-14 6万+
vue-cli3搭建完整项目之webpack配置 ​ 前面篇介绍了项目初始化，下面就要开始对项目webpack进行配置，由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自...
Vue-cli3 + webpack搭建vue项目流程以及打包发布流程
是一座岛
04-26 5387
目录 1.命令行初始化项目 2. 分析项目目录 3. vue.config.js多环境打包配置 4. 发布项目 5.参考文章 1.命令行初始化项目 bogon:vue xudanfeng$ vue create vue-cli-project Vue CLI v3.0.2 ? Please pick a preset: Manually select features ? C...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值