用脚手架vue-cli和webpack创建一个vue工程的过程

最新推荐文章于 2024-07-12 13:09:35 发布
最新推荐文章于 2024-07-12 13:09:35 发布
阅读量174 收藏
点赞数
分类专栏： 安装 vue 建vue工程 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55949207/article/details/120560301
版权
vue 同时被 3 个专栏收录
8 篇文章 0 订阅
订阅专栏
安装
3 篇文章 0 订阅
订阅专栏
建vue工程
3 篇文章 0 订阅
订阅专栏

一、建工程前的准备

1、安装webpack  (先安装webpack-cli)

打开终端

 2、安装脚手架vue-cli  (这个也可以在终端进行，我的当时是在某个目录下安装的)

 安装好以后用命令查看是否安装成功

#查看脚手架的版本号命令
vue -V

#查看webpack-cli和webpack的版本号命令
webpack -v

二、建工程（建demo）

先切换到你想建工程的目录下，再输入以下命令创建工程

1、建工程

 2、启动工程

 3、从浏览器打开工程

当时建好工程后，在配置less时有点问题，只要把less的版本号降到5.0.0就可以了

具体操作可看我的另一篇文章

only you502
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用vue脚手架快速构建一个基于webpack管理的vue项目
mohansuibuzao的博客
07-07 285
如何用vue脚手架快速构建一个基于webpack管理的vue项目 1.首先确保你的电脑上安装了node.js,如果没有安装，可以去官网安装 node.js官网地址链接: https://nodejs.org/en/安装过程中不要忘记把node.js加入到环境变量中，然后打开命令提示窗cmd，输入node-v和npm-v,可以查看node.js和npm的的版本号代表安装成功了 2.因为npm用的是国外的服务器，所以可以通过npm install -g cnpm --registry=https://regis
脚手架vue-cli工程webpack的作用和特点
12-09
Webpack 是一个强大的模块打包工具，尤其在 Vue.js 开发中起着至关重要的作用。Vue CLI，全称为 Vue.js Command Line Interface，是 Vue 的官方脚手架，它预先配置了 Webpack，使得开发者能够快速地搭建 Vue 项目。...
使用vue-cli脚手架+webpack搭建vue项目
weixin_34014277的博客
08-01 214
前言 世间万难 无非一拖二懒三不读书 对 说的就是我 突然觉得这句话说的很对，自从上次写完nodejs安装及npm全局模块路径的设置已经过去两月有余，而我的vue框架学习也就止步于此。还是没有给自己施加压力，浑浑噩噩的又度过了这么长时间，想想就很愧疚。(其实是懒癌患者)或许自己还是个少年吧，比较彷徨。 学习真的是自己的事，自己不想学，自制...
使用vue脚手架工具搭建vue-webpack项目和项目上线
weixin_45306532的博客
06-02 234
对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个1.安装node环境 可以使用自带的终端cmd命令行工具；windows下推荐安装git bash，可以使用linux命令； 第一步检测是否安装node；没有安装node的同学请到官网下载安装 https://nodejs.org/en/download/ 安装成功后在命令行查看node版本，如果有说明安装成功。 2.安装vue脚手架工具vue-cli 大家在安装node的时候，会自动安装npm； 可以先行查看npm版本； 使用
vue-cli,webpack安装
likunpeng6656201的博客
10-22 435
第一步应该下载node.js这是安装vue-cli的基础工具。官网下载快捷安全可：https://nodejs.org/en/ 第二步打开命令面板找到你要安装的位置 第三步就是安装全局vue-cli 命令操作 npm intatll -g vue-cli 安装完毕之后 可以检查安装版本即 vue -V 如下图
安装Vue-cli脚手架以及使用命令搭建Vue-cli + webpack项目
JieZai958921541的博客
02-24 734
1. Vue-cli脚手架安装，配置vue命令环境 vue-cli依赖于node.js，所以需要先安装node.js 安装好node.js后，测试看是否安装成功！ 接下来安装vue-cli命令（npm install vue-cli -g）这种方式安装下载速度非常慢，所以我现在用cnpm安装。首先安装cnpm（npm install -g cnpm） 安装好后运行（cnpm install v...
【Vue-CLI】Vue-CLI+webpack构建Vue项目
我的博客
11-09 4210
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli+实现的零配置原型开发。一个运行时依赖 ()，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。Vue CLI 致力于将 Vue 生态中的工具基础标准化。
前端模块化与工程化 | Vue-cli 与 Webpack 的使用
qq_45716120的博客
01-19 1155
文章目录一、安装 Node.js 环境二、安装 Vue-cli三、创建 Vue-cli 应用程序四、安装 Webpack五、创建一个 webpack 程序六、小结 一、安装 Node.js 环境 Node.js 官网下载地址：http://nodejs.cn/download/ 一般系统下载 windows 64 位的 msi 安装过程一直下一步即可，可以修改安装路径，中间有个 Add to Path 的选项勾选（即自动将 Node.js 添加到环境变量中） 安装完成后，cmd 进入到命令行中查看 Nod
脚手架vue-cli工程webpack的基本用法详解
12-09
随着工程的构建要求的增加，webpack.config.js内的配置项目也会随之增加，webpack还有许许多多的选项提供给我们进行灵活配置，它只是一个构建工具，我们只需要了解在Vue项目中它基本能为我们做到的工作、最小化的...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
12-09
通过Vue-cli进行webpack打包的坑 ...你也许会注意到vue-cli与webpack结合的项目中，我们通常会有两个静态资源的路径：src/assets和static/，他们两者的区别是什么呢？本文主要和大家介绍了vue-cli与
vue-cli（脚手架的使用）以及webpack打包项目 原来构建一个项目是这么轻松。
New前端工厂的博客
08-19 747
构建一个vue项目 1.首先要有vue。直接npm全局安装。 npm install vue -g 接下来就是安装脚手架 npm install vue-cli -g 创建工程化目录 vue init webpack porject 然后就会提示你 你的项目名字？ ? Project name ddporject 你要添加的备注信息？ ? Project description th...
用灵活的依赖排除策略来规避不必要的依赖关系
2301_79564718的博客
07-09 257
特别是当某个强大的库或框架提供了众多功能，但我们的项目仅需其中一部分时，如何优雅地“裁剪”这些不必要的部分，成为了提升项目效率与性能的关键。npm 和 yarn 这样的包管理器也提供了方法来避免安装或加载特定依赖，尽管这通常是通过不直接依赖它们来实现的，比如使用别名或条件性安装。编写自定义的加载器或插件：在一些更高级的场景下，你可能需要编写一个自定义的Webpack loader或插件，来在打包过程中动态地修改或排除代码。这样，每个模块或应用都可以独立管理其依赖，从而减少全局冲突和不必要的加载。
Vue3 使用Vite构建项目
最新发布
生产队的驴
07-12 326
Webpack在启动开发服务器时需要先打包整个应用，这个过程可能包括语法解析、依赖收集、代码转译、打包合并和代码优化等步骤，这些操作通常会导致启动缓慢。而Vite则采用了一种“按需编译”的方式，它基于原生ES模块（ESM）工作，只处理被浏览器实际请求的模块，从而大大缩短了启动时间。官方文档：https://vitejs.cn/vite3-cn/guide/
前端部署自动上传资源文件到cdn/oss 解决路由和访问慢的问题
王森的博客
07-09 350
1，关键点一：/scrm/xxa/xxb 无论建立多少级，oss桶都是自动建立的，无需人手动先把这些目录建立了,例如上面的path对应oss的目录/scrm/xxa/xxb下面，./dist/static下的文件也会被上传到这个目录下，这个目录却不需要先行建立。webpack中引入一个oss上传插件，并且给予其初始参数，插件根据publicPath提供的域名后的path，将打包的文件一个个按照上传到path对应的目录中，并且根据from的路径指示，将./dist/static下的所有文件都按路径上传。
webpack terser-webpack-plugin 不打包注释及log
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
07-10 277
打包时，不打包项目中的注释及log，debugger等
前端构建工具（webpack&vite）
yuanmenglxb2004的博客
07-10 933
src 是把所有的源码放在了这个src 里面。我们使用打包工具的前提是这个项目得是一个node项目，所以我们在使用webpack要先把项目初始一下,会出现一个package.json,初始化就完事了。然后就安装依赖. -D表示的是开发依赖，区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录，然后编写代码，index.js是默认主目录，是入口文件。然后执行‘’yarn webpack 来对代码进行打包，打包好观察dist目录。dist目录就是打包后的版本。
前端热门面试题二
jun778895的博客
07-11 695
在前端开发中，构建工具扮演着至关重要的角色，它们能够自动化处理各种任务，如代码压缩、模块打包、代码转换、静态资源管理等。我使用过Webpack、Gulp和Rollup这三种前端构建工具，它们各自具有独特的特点和优势。
何为vue脚手架?
HHR_hr的博客
07-06 1212
自动生成项目模板运行和开发。
vue-cli-webpack:vue-cli 2.9.6版本初始化webpack工程
09-07
vue-cli是一个构建Vue.js工程的脚手架工具，帮助开发者快速搭建和管理Vue.js项目。而vue-cli 2.9.6版本是其一个较早的版本，可以使用它来初始化一个基于webpack的Vue.js工程。 使用vue-cli 2.9.6版本初始化webpack工程，首先需要确保本地已安装了node.js和npm。 在命令行中执行以下命令来安装vue-cli： ``` npm install -g vue-cli@2.9.6 ``` 安装完成后，可以使用以下命令来初始化一个webpack工程： ``` vue init webpack my-project ``` 这里的"my-project"是你自定义的项目名称，可以替换为其他名称。 执行上述命令后，vue-cli会根据webpack模板生成项目的基本结构和文件。 接着，需要进入项目文件夹： ``` cd my-project ``` 然后执行以下命令来安装项目所需的依赖： ``` npm install ``` 安装完成后，可以使用以下命令来启动项目： ``` npm run dev ``` 这样，webpack工程就成功初始化并启动了。通过访问http://localhost:8080，可以在浏览器中查看项目的运行效果。 在初始化的工程中，可以编辑和修改src目录下的文件，这里的主要文件包括App.vue和main.js，分别是Vue组件和入口文件。 总之，使用vue-cli 2.9.6版本初始化webpack工程能够为开发者提供一个基于webpack的Vue.js开发环境，使他们能够更高效地进行Vue.js项目的开发和管理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值