使用webpack创建项目vue项目和vue-cli3创建项目的区别

最新推荐文章于 2024-04-06 03:59:08 发布
最新推荐文章于 2024-04-06 03:59:08 发布
阅读量538 收藏
点赞数
文章标签： vue.js webpack javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coca_cola_1105/article/details/122252208
版权

vue-cli 内部封装了 webpack,对外仅仅提供几个依赖。而且做了很多适合 vue 项目的优化，同时你可以用 vue.config.js 来管理项目。package.json 非常清爽
webpack 更符合针有特定需求，毕竟是原生。不过管理起来也更加复杂。不过社区有升级，可以第一时间获取升级优势。前一种只能等待 vue-cli 项目升级
一般来说，vue-cli 够用了，但是 vue-cli 能实现的，webpack 一定能实现，反之，不一定
————————————————
原文链接：https://blog.csdn.net/qq_42977003/article/details/103819756

尤雨珂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解vue2.0脚手架的webpack 配置文件分析
08-30
本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
主要介绍了webpack4+Vue搭建自己的Vue-cli，对于vue-cli的强大,使用过的人都知道,极大的帮助我们降低了vue的入门门槛,感兴趣的朋友跟随脚本之家小编一起看看吧
vue , vue-cli , webpack 的区别以及关联
qq_29965101的博客
09-01 1万+
一：vue 和 vue-cli 的区别以及关联 基本概念 vue： 1: 是一套框架，用于构建用户界面的渐进式框架。 2: vue主要是从基础知识、组件的了解、动画的过渡、可复用性和组合以及工具、模块化的管理。 Vue-cli 1:而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。 2:vue-cli 主要是从搭建交互式脚手架、零配置原型开发、基于webpack构建并进行配置、插件和Preset的扩展以及图形化的创建和Vue.js项目的用户界面管理等。 区别和关联 区别： vue是
记得把每一次面试当做经验积累英语，Webpack5 搭建 Vue3 + TS 项目，前端面试试题
最新发布
2301_79099607的博客
04-06 889
笔者两年前曾写过一篇文章《Webpack4 搭建 Vue 项目》，后来随着 webpack5 和 vue3 的面世，一直想升级下我这个 createVue 项目，但是苦于没有时间（其实是因为懒），一直拖延至今。捣鼓了好几天，终于搭建好整个项目，因此仅以此文记录升级搭建的过程。PS: 其实也可以用官方脚手架搭建的，为何要自己从头做起呢？有脚手架我不用，我就折腾。哎，就是玩儿~???
Vue学习总结（三）：webpack和vue-cli
诗和远方
04-10 2万+
webpack Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。 中文官方网站：https://www.webpackjs.com/ 官网给出的解释： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(depen...
笔记(2) 从webpack到vue-cli3.0
weixin_34000916的博客
03-26 759
写vue大概快写了两年了,从开始的element后台项目,到纯h5的移动端项目,但是一直没有总结过。然后最近想总结下,因为之前项目比较旧,用的一直是vue-cli@2.0版本的,最近看官网发现已经升级到vue-cli3.0了,刚好顺便对3.0做个学习以及总结。 webpack总结 其实webpack首先要明白它是用node写的,所以node的基础是要具备一些的,包括node的一些系统模块,还有一些...
vue项目vue-cli(脚手架)创建方式和webpack创建方式的区别
klz
01-03 6050
创建vue项目的两种方式与区别 运行环境: 下载地址：node.js中文官网 http://nodejs.cn/download/ 工具visual studio code: https://code.visualstudio.com/ 全局安装 vue-cli ，在命令行工具中输入命令行： $ cnpm install vue-cli -g 全局安装webpack，在命令行工具中输入...
webpack与Vue脚手架(Vue CLI)
weixin_56855820的博客
06-09 1385
webpack:是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境 webpack的基本使用与配置: 二者相同点:都是为了构建vue项目的基本框架 不同点:
一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
前端打工人的博客
05-10 3412
webpack、vite、vue-cli、create-vue 这些都是什么？看着有点晕，不要怕，我们一起来分辨一下。 先看这个表格： 脚手架 vue-cli create-vue 构建项目 vite 打包代码 webpack rollup 脚手架：创建项目，选择性安装需要的插件，指定统一的风格，生成demo。 构建项目：建立项目的运行环境，需要手动安装插件。 打包代码：代码写好之后，为了更好的使用，需要打包处理一下。 是不是有了一个整体的感觉？我们再来详细的看一下。 vue-
前端面试 - webpack考点
Sabrina_cc的博客
06-11 1017
vue+webpack 和 vue-cli脚手架 的区别 (1)vue-cli脚手架 是基于Webpack构建的vue项目框架，已经配置好了基本的Webpack打包规则，但内部配置我们无法看到 (2)有学过webpack，但实际做项目时，还是直接用vue-cli脚手架构建项目 什么是Webpack/为什么使用Webpack？ Webpack是一个打包工具，可以用它管理模块依赖 它可以很好地管理与打包Web开发中所用到的HTML、JS、CSS以及各种静态文件，让开发过程更高效 可以将脚本开发语言T
vue、webpack、vue-cli三者之间的关系以及使用脚手架工具快速搭建vue项目
weixin_72244810的博客
07-31 557
也就是你使用"npm i webpack -g"安装了webpack以后，webpack-cli是默认就安装上了。vue的开发本身是不依赖node的，不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。”vue是一整套框架，而vue-cli只是它其中的一个脚手架，vue-cli 里面包含了webpack， 并且配置好了基本的webpack打包规则；查看vue-cli2.x及以下可以安装的版本：npm view vue-cli versions --json。
用npm安装vue和vue-cli,并使用webpack创建项目的方法
10-17
今天小编就为大家分享一篇用npm安装vue和vue-cli,并使用webpack创建项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解webpack+vue-cli项目打包技巧
08-30
本篇文章主要介绍了详解webpack+vue-cli项目打包技巧 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目，通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值，需要的朋友可以参考下
vue-cli、create-vue、webpack、vite、rollup的区别
陈小陈的博客
11-16 879
webpack、Rollup、vite、rollup、create-vue、vue-cli
webpack与vue-cli的关系
青春木鱼的博客
12-03 4761
vue-cli是基于nodejs+webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash，或者bat。用vue-cli执行build，实际上是webpack做的。原本需要自己配置webpack的相关配置，被cli简化了。并且按照vue的用户习惯整理了一套构建和目录规范。
如何查看当前项目webpack版本
热门推荐
qq_25117449的博客
01-08 3万+
如何查看当前项目webpack版本 在项目 package.json 中的 scripts 脚本命令中写入以下内容 "webpack": "webpack --version" 然后打开终端在项目根路径下运行： npm run webpack ...
webpack与vue-cli
bobozai86的博客
02-04 221
WebPack可以看做是。
【Vue】构建vue项目的几种方法以及区别
qq_51307413的博客
09-08 2460
总的来说，npm init vue@latest和vue create用于创建基于 Vue.js 的项目，而npm init vite@latest用于创建基于 Vite 的项目。它们都是创建前端项目的命令，但使用的工具链和项目模板有所不同。npm init vue@latest和npm init vite@latest是通过 npm 包管理器直接安装 Vue.js，并创建一个基本的项目结构，而vue create是使用 Vue CLI 创建项目，并提供了更多的项目配置选项。
使用webpack创建vue3项目
11-10
使用webpack创建Vue3项目的步骤如下： 1. 首先，需要安装Node.js和npm包管理器。 2. 创建一个新的项目文件夹，并在其中打开终端。 3. 在终端中运行以下命令来初始化npm： ``` npm init -y ``` 4. 接下来，需要安装Vue.js和Vue-loader： ``` npm install vue@next vue-loader@next @vue/compiler-sfc --save-dev ``` 5. 然后，安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 6. 创建一个名为webpack.config.js的文件，并将以下代码复制到其中： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] }; ``` 7. 在package.json文件中添加以下脚本： ```json "scripts": { "build": "webpack --mode production" } ``` 8. 创建一个名为src的文件夹，并在其中创建一个名为main.js的文件。在main.js中添加以下代码： ```javascript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 9. 创建一个名为public的文件夹，并在其中创建一个名为index.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 3 App</title> </head> <body> <div id="app"></div> <script src="./bundle.js"></script> </body> </html> ``` 10. 最后，在终端中运行以下命令来构建项目： ``` npm run build ``` 运行成功后，将在dist文件夹中生成一个bundle.js文件，该文件包含了所有的Vue组件和依赖项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值