Vue工程化

原创 已于 2026-04-16 20:20:48 修改 · 334 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
于 2025-07-12 11:17:29 首次发布

目录

什么是Vue

前端工程化

环境准备

Node.js是什么？

npm是什么？

项目结构

项目-启动

方式一：命令行

方式二：VsCode图形化界面

什么是Vue

是用于构建用户界面的渐进式的JavaScript框架。所谓构建界面指的就是，我们可以将服务器端响应给前端的这个数据，渲染成用户所能看到的网页。这个也称为基于数据渲染出用户看到的界面。在Vue中，最核心的就是数据，是针对数据进行操作的，将数据基于Vue的一些指令渲染出对应的姓名。

这里提到的渐进大家可以理解为循序渐进的意思

前端工程化

在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等行为规范化，标准化

环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS

Node.js是什么？

是一个免费，开源，跨平台的Javascript运行环境，它让开发人员能够创造服务器，Web应用，命令或工具和脚本

npm是什么？

Node Package Manager，是NodeJS的软件包管理器。

在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了

如果我们需要用到某一个软件包，我们就可以直接npm.install，它就会自动的联网下载对应的软件包了，它连接的就是远程仓库

项目创建

找到一个目录在该目录下创建一个Vue项目文件夹

进入该目录输入cmd回车，即在当前文件夹下创建Vue项目

创建一个工程化的Vue项目，执行命令：npm create vue

项目结构

使用VS Code打开项目

src目录存放的是项目的源代码。src里面又会有一些文件和一些子目录，main.js是我们Vue项目中的一个入口文件，它是我们程序访问的一个入口。APP.vue文件是我们Vue项目中的根组件。components这个是一个组件目录，用于封装我们自己的一些通用的组件，都会放在components这个目录中，assets目录存放的是项目中的一些静态资源文件。比如像一些文件，字体，还有一些全局的css样式，我们都可以放在assets这个目录中。

node_modules，这个里面就是我们下载下来的一些依赖，下载下来是什么样子的，我们一般不用去动。

项目-启动

方式一：命令行

启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。

默认的访问地址就是http:/localhost:5173/，我们只要访问这个地址就可以访问到前端项目了

命令行一旦关掉，服务停止

方式二：VsCode图形化界面

点击NPM脚本中的dev后的运行按钮，就可以启动项目。

启动起来之后，我们就可以访问前端Vue项目了，访问路径：http://localhost:5173

只要能够看到Vue项目的欢迎页面，那就说明我们Vue项目已经创建并启动成功了，也成功的访问到了

标签
#vue.js #javascript #ecmascript
逆风局？
关注
【大前端】Vue3 工程化项目使用详解
congge_study的博客
01-12 3752
VUE3 工程化项目使用详解
Vue 工程化开发入门
dawn191228的博客
09-27 1205
工程化开发是一种将软件开发过程规范化、标准化的方法。对于 Vue 项目来说，工程化开发可以帮助我们更好地管理项目的结构、依赖关系、构建流程等。通过使用工具和技术，我们可以提高开发效率、降低维护成本，并确保项目的可扩展性和可维护性。Vue 的工程化开发为我们提供了一种高效、规范的开发方式。通过使用脚手架工具、遵循项目运行流程、进行组件化开发和组件注册，我们可以更好地管理和维护 Vue 项目。希望本文能够帮助你快速入门 Vue 工程化开发，开启你的 Vue 开发之旅。
Vue工程化管理
qq_45206551的博客
04-25 1185
基本vue介绍 vue的介绍：https://learning.dcloud.io/#/?vid=0 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue.js是一个Js库。 官网：http://cn.vuejs.org 手册：http://cn.vuejs.org/api/ 文档：https://cn.vuejs.org/v2/guide/ 当前最新版本：...
Web开发—Vue工程化
2402_83462390的博客
05-11 1297
本文介绍了Vue工程化开发的基本概念和步骤。首先，Vue是一款用于构建用户界面的渐进式JavaScript框架，企业开发中更注重前端工程化，包括模块化、组件化、规范化和自动化。接着，文章详细说明了如何使用Vue官方提供的脚手架工具create-vue来创建工程化的Vue项目，包括安装NodeJS、配置npm、创建项目、安装依赖等步骤。此外，还介绍了Vue项目的结构、启动方式以及开发流程。最后，文章对比了Vue的两种API风格：组合式API和选项式API，帮助开发者更好地理解和选择适合的开发方式。
Vue:vue的工程化
qq_55630615的博客
04-24 1721
即前端人员开发前端工程,将开发好的前端工程打包部署在前端服务器上后端开发人员开发后端工程,再将后端工程打包部署在后端服务器上,这种模式称为前后端分离开发而前后端要顺利对接的关键就是要遵循一定的开发规范。
Vue工程化开发
m0_63758722的博客
10-04 2317
​ 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。​ 好处：便于维护，利于复用 → 提升开发效率。​ 组件分类：普通组件、根组件。父组件App.vuemargin : 10px " > 我是APP组件 < Son > </ Son > </ div > </ template > < script > import Son from './components/Son.vue' export default {return {
Vue—前端工程化
Steven_______的博客
04-03 910
介绍:Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的模板Vue-cli提供了以下功能：统一的目录结构依赖环境:NodeJs需下载安装长期维护版本的NodeJs再以管理员身份允许命令提示符全局模块存放路径切换npm淘宝资源镜像 方便后期资源下载执行完这个命令后，可以通过以下命令验证是否切换成功：如果返回，说明配置成功。
Vue3工程化学习
2301_79400832的博客
04-28 1053
前一段学习了Vue3的基础语法，现在在学习Vue3的工程化，了解了如何使用vite创建一个工程化的vue3项目以及组件提示：以下是本篇文章正文内容，下面案例可供参考学习vue3的工程化项目的创建以及基础指令的使用，同时知道了vue文件的写法，script中编写JS，Templete中编写html，style中编写css，了解了vue3的项目结构，学会了组合式API的写法。
VUE工程化
weixin_45626166的博客
10-29 1089
步骤 1、卸载旧版node—uninstall nodejs 2、安装新版，测试node版本和npm版本 3、安装cnpm淘宝镜像 4、安装vue-cli脚手架工具 5、创建vue项目—一系类的配置 6、项目下载完毕后，进入cd项目文件，启动项目npm run dev 淘宝镜像遗留问题 上节安装了淘宝镜像cnpm，安装成功后检测cnpm版本 此时cmd输出cnpm版本，表示安装成功。node_m...
【Vue】创建Vue工程化项目
lzb_kkk的博客
11-18 1548
vue工程化环境准备：如何安装node.js；如何查看node.js是否已安装；如何进行npm换源；vue创建一个工程项目的步骤，脚手架的介绍，已经创建好的工程文件目录介绍；vue三个入口文件：main.js、App.vue、index.html之间的关系；vue单个文件的介绍：组成等；vue中setup简写；vue安装Vue3 Snipptes插件，然后通过vbase快速生成vue文件（含三部分）；
Vue3工程化配置
AZURE060606的博客
05-07 654
具体环境配置请点这里记得新建配置时这里选vue31.选定路径后再cmd输入创建指令 2.项目创建完毕后用webstorm打开项目3.安装依赖 4.启动项目 看到该页面即表示成功5.配置快速启动 vue2 ref和reactive 这种方式下的count仅是一个普通的number数据，想要将他转换为响应式对象需要用到ref和reactive
Vue 工程化
2303_80688889的博客
07-28 1226
创建一个工程化的 Vue 项目，执行命令：npm create vue@3.3.4 (这里如果不指定版本就会自动安装最新版本)
[Vue2]工程化
.
06-08 1347
基于Vue Cli自定义创建项目架子。
Vue2工程化介绍
lea4ning的博客
05-08 521
使用vue-cli创建vue2项目
打造工程化Vue项目
最新发布
2401_86968005的博客
08-03 962
在Vue项目开发中，使用脚手架工具（create - vue）是极为必要的。手动搭建项目不仅耗时费力，还容易出现配置错误，比如在处理各种依赖关系和项目基础结构搭建上，往往需要花费大量时间去摸索。而create - vue脚手架工具能够快速且规范地帮我们构建项目基础，大大提高开发效率。创建命令中，是固定格式，@3.3.4表示指定的脚手架版本号。指定版本号对于项目的稳定性和兼容性至关重要。特定版本经过了一定的测试和优化，能确保项目在开发过程中较少出现因版本变动带来的不兼容问题。
vue前端工程化
qq_31539817的博客
03-28 1767
本文介绍的是有关于vue方面的前端工程化实践，主要通过实践操作让开发人员更好的理解整个前端工程化的流程。本文通过开发准备阶段、开发阶段和开发完成三个阶段开介绍vue前端工程化的整体过程。规范一：适用于小项目，协作人员少的项目，结构清晰明了，维护方便，弊端是协作性比较差。规范二：适用于中大型项目，协作人员多的项目，开发人员只要在自己的目录下开发即可，不相互影响，提交代码不容易发生冲突。命名规范。
WEB08Vue工程化&TS&Element
2402_84667776的博客
07-14 1409
在前面的课程中，我们学习了HTML、CSS、JS、Axios、Vue等技术，并基于完成了一些前端开发的案例。我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的，如下图所示：不规范：每次开发都是从零开始，比较麻烦难复用：多个页面中的组件共用性不好难维护：js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点模块化：将js和css等，做成一个个可复用模块。
Vue3 工程化实战
jay丿的博客
06-25 1209
本文系统对比了Vue3项目的两种工程化构建方案，重点推荐基于Vite的现代实现方式。传统vue-cli方案依赖webpack，配置灵活但性能较低；而Vite凭借原生ESM支持，实现了秒级启动和毫秒级热更新。文章详细解析了Vite项目的创建流程、工程结构、组件开发示例和配置优化，通过多维对比突出Vite性能优势，并给出开发环境优化、生产构建和持续集成等最佳实践，建议开发者优先采用Vite构建Vue3项目以提升开发效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值