【Vue教程】使用Vite快速搭建前端工程化项目 | Vue3 | Vite | Node.js

🙋大家好!我是毛毛张!
🌈个人首页: 神马都会亿点点的毛毛张

🚩今天毛毛张分享的是关于如何快速🏃‍♂️搭建一个前端工程化的项目的环境搭建以及流程🌠

文章目录

  • 1.前端工程化环境搭建🍉
    • 1.1 什么是前端工程化
    • 1.2 nodejs的简介和安装
      • 1.2.1 什么是Nodejs
      • 1.2.2 如何安装nodejs
    • 3.2 npm 配置和使用
      • 3.2.1 npm 安装和配置
      • 3.2.2 npm 常用命令🥭
  • 2.Vue3通过Vite实现工程化🍅
    • 2.1 Vue3简介🍅
    • 2.2 Vite的介绍
    • 2.3 Vite创建Vue3工程化项目🫐
      • 2.3.1 Vite+Vue3项目的创建、启动、停止🍓
      • 2.3.2 Vite+Vue3项目的目录结构

1.前端工程化环境搭建🍉

1.1 什么是前端工程化

  • 前端工程化是使用软件工程的方法单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。

1.2 nodejs的简介和安装

1.2.1 什么是Nodejs

1684487715655
  • Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,可以使 JavaScript 运行在服务器端。使用 Node.js,可以方便地开发服务器端应用程序,如 Web 应用、API、后端服务,还可以通过 Node.js 构建命令行工具等。相比于传统的服务器端语言(如 PHP、Java、Python 等),Node.js 具有以下特点:
    • 单线程,但是采用了事件驱动、异步 I/O 模型,可以处理高并发请求。
    • 轻量级,使用 C++ 编写的 V8 引擎让 Node.js 的运行速度很快。
    • 模块化,Node.js 内置了大量模块,同时也可以通过第三方模块扩展功能。
    • 跨平台,可以在 Windows、Linux、Mac 等多种平台下运行。
  • Node.js 的核心是其管理事件和异步 I/O 的能力。Node.js 的异步 I/O 使其能够处理大量并发请求,并且能够避免在等待 I/O 资源时造成的阻塞。此外,Node.js 还拥有高性能网络库和文件系统库,可用于搭建 WebSocket 服务器、上传文件等。在 Node.js 中,我们可以使用 JavaScript 来编写服务器端程序,这也使得前端开发人员可以利用自己已经熟悉的技能来开发服务器端程序,同时也让 JavaScript 成为一种全栈语言。Node.js 受到了广泛的应用,包括了大型企业级应用、云计算、物联网、游戏开发等领域。常用的 Node.js 框架包括 Express、Koa、Egg.js 等,它们能够显著提高开发效率和代码质量。

1.2.2 如何安装nodejs

  1. 直接打开官网下载对应操作系统的LST版本
    • 官网链接:https://nodejs.org/en
  2. 双击安装包进行安装,安装过程中遵循默认选项即可(或者参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后,可以在命令行终端输入 node -vnpm -v 查看 Node.js 和 npm 的版本号。
    1687765256680
  3. 定义一个app.js文件,cmd到该文件所在目录,然后在dos上通过node app.js命令即可运行
function sum(a,b){return a+b;
}
function main(){console.log(sum(10,20))
}
main()

3.2 npm 配置和使用

  • NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于后端的Maven

3.2.1 npm 安装和配置

1.安装

  • 安装node,自动安装npm包管理工具!

2.配置依赖下载使用阿里镜像

  • npm 安装依赖包时默认使用的是官方源,由于国内网络环境的原因,有时会出现下载速度过慢的情况。为了解决这个问题,可以配置使用阿里镜像来加速 npm 的下载速度,具体操作如下:
  • 打开命令行终端,执行以下命令,配置使用阿里镜像:
npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmmirror.com # 推荐
  • 确认配置已生效,可以使用以下命令查看当前 registry 的配置:如果输出结果为 https://registry.npmmirror.com,说明配置已成功生效。
npm config get registry
  • 如果需要恢复默认的官方源,可以执行以下命令:
npm config set registry https://registry.npmjs.org/

3.配置全局依赖下载后存储位置

  • 在 Windows 系统上,npm 的全局依赖默认安装在 <用户目录>\AppData\Roaming\npm 目录下。如果需要修改全局依赖的安装路径,可以按照以下步骤操作:
    1. 创建一个新的全局依赖存储目录,例如 D:\GlobalNodeModules
    2. 打开命令行终端,执行以下命令来配置新的全局依赖存储路径:
      npm config set prefix "D:\GlobalNodeModules"
      
    3. 确认配置已生效,可以使用以下命令查看当前的全局依赖存储路径:
      npm config get prefix
      

4.升级npm版本

  • cmd 输入npm -v 查看版本
  • 如果node中自带的npm版本过低!则需要升级至9.6.6!
    npm install -g npm@9.6.6
    

3.2.2 npm 常用命令🥭

1.项目初始化

  • npm init
    • 进入一个vscode创建好的项目中, 执行 npm init 命令后,npm 会引导您在命令行界面上回答一些问题,例如项目名称、版本号、作者、许可证等信息,并最终生成一个package.json 文件。package.json信息会包含项目基本信息!类似maven的pom.xml
  • npm init -y
    • 执行,-y yes的意思,所有信息使用当前文件夹的默认值!不用挨个填写!

2.安装依赖 (查看所有依赖地址 https://www.npmjs.com )

  • npm install 包名 或者 npm install 包名@版本号
    • 安装包或者指定版本的依赖包(安装到当前项目中)
  • npm install -g 包名
    • 安装全局依赖包(安装到d:/GlobalNodeModules)则可以在任何项目中使用它,而无需在每个项目中独立安装该包。
  • npm install
    • 安装package.json中的所有记录的依赖

3.升级依赖

  • npm update 包名
    • 将依赖升级到最新版本

4.卸载依赖

  • npm uninstall 包名

5.查看依赖

  • npm ls
    • 查看项目依赖
  • npm list -g
    • 查看全局依赖

6.运行命令

  • npm run 命令是在执行 npm 脚本时使用的命令。npm 脚本是一组在 package.json 文件中定义的可执行命令。npm 脚本可用于启动应用程序,运行测试,生成文档等,还可以自定义命令以及配置需要运行的脚本。

  • 在 package.json 文件中,scripts 字段是一个对象,其中包含一组键值对,键是要运行的脚本的名称,值是要执行的命令。例如,以下是一个简单的 package.json 文件:

    {"name": "my-app","version": "1.0.0","scripts": {"start": "node index.js","test": "jest","build": "webpack"},"dependencies": {"express": "^4.17.1","jest": "^27.1.0","webpack": "^5.39.0"}
    }
    
  • scripts 对象包含 start、test 和 build 三个脚本:

    • 当您运行npm run start时,将运行node index.js,并启动应用程序
    • 运行npm run test时,将运行 Jest 测试套件
    • npm run build将运行webpack 命令以生成最终的构建输出
  • 总之,npm run 命令为您提供了一种在package.json文件中定义和管理一组指令的方法,可以在项目中快速且灵活地运行各种操作

2.Vue3通过Vite实现工程化🍅

2.1 Vue3简介🍅

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。官网为:https://cn.vuejs.org/
Vue的两个核心功能:

  • 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  • 响应性:Vue 会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM

VUE作者:尤雨溪

1684487839928
  • 尤雨溪(Evan You),毕业于科尔盖特大学,前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目,最后自己也走上了开源之路,现全职开发和维护Vue.js
  • 尤雨溪毕业于上海复旦附中,在美国完成大学学业,本科毕业于Colgate University,后在Parsons设计学院获得Design & Technology艺术硕士学位,任职于纽约Google Creative Lab。
  • 尤雨溪大学专业并非是计算机专业,在大学期间他学习专业是室内艺术和艺术史,后来读了美术设计和技术的硕士,正是在读硕士期间,他偶然接触到了JavaScript,从此被这门编程语言深深吸引,开启了自己的前端生涯。

2.2 Vite的介绍

1684488376469

在浏览器支持 ES 模块之前,JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因:使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁,我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁,它们极大地改善了前端开发者的开发体验

  • 当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。
  • 包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面:

  1. 快速创建项目:使用脚手架可以快速搭建项目基本框架,避免从零开始搭建项目的重复劳动和繁琐操作,从而节省时间和精力。
  2. 统一的工程化规范:前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范,让不同开发者在同一个项目上编写出风格一致的代码,提高协作效率和质量。
  3. 代码模板和组件库:前端脚手架可以包含一些常用的代码模板和组件库,使开发者在实现常见功能时不再重复造轮子,避免因为轮子质量不高带来的麻烦,能够更加专注于项目的业务逻辑。
  4. 自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成自动化部署脚本,自动将代码部署到测试、生产环境等。

2.3 Vite创建Vue3工程化项目🫐

2.3.1 Vite+Vue3项目的创建、启动、停止🍓

1 使用命令行创建工程

  • 在磁盘的合适位置上,创建一个空目录用于存储多个前端项目
  • 用vscode打开该目录
  • 在vscode中打开命令行运行如下命令
npm create vite@latest
  • 第一次使用vite时会提示下载vite,输入y回车即可,下次使用vite就不会出现了
    1687769339457
  • 注意: 选择vue+JavaScript选项即可

2 安装项目所需依赖

  • cd进入刚刚创建的项目目录
  • npm install命令安装基础依赖
cd ./vue3-demo1
npm install

3 启动项目

  • 查看项目下的package.json
{"name": "vue3-demo1","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"bootstrap": "^5.2.3","sass": "^1.62.1","vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","vite": "^4.3.2"}
}
npm run dev
> 5 停止项目 + 命令行上 ctrl+c

2.3.2 Vite+Vue3项目的目录结构

1.下面是 Vite 项目结构和入口的详细说明:

1684489112904

  • public/ 目录:用于存放一些公共资源,如 HTML 文件、图像、字体等,这些资源会被直接复制到构建出的目标目录中。
  • src/ 目录:存放项目的源代码,包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中,这些文件会被 Vite 实时编译和处理,并在浏览器中进行实时预览和调试。以下是src内部划分建议:
    1. assets/ 目录:用于存放一些项目中用到的静态资源,如图片、字体、样式文件等。
    2. components/ 目录:用于存放组件相关的文件。组件是代码复用的一种方式,用于抽象出一个可复用的 UI 部件,方便在不同的场景中进行重复使用。
    3. layouts/ 目录:用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局,如头部、底部、导航菜单等。
    4. pages/ 目录:用于存放页面级别的组件文件,通常是路由对应的组件文件。在这个目录下,可以创建对应的文件夹,用于存储不同的页面组件。
    5. plugins/ 目录:用于存放 Vite 插件相关的文件,可以按需加载不同的插件来实现不同的功能,如自动化测试、代码压缩等。
    6. router/ 目录:用于存放 Vue.js 的路由配置文件,负责管理视图和 URL 之间的映射关系,方便实现页面之间的跳转和数据传递。
    7. store/ 目录:用于存放 Vuex 状态管理相关的文件,负责管理应用程序中的数据和状态,方便统一管理和共享数据,提高开发效率。
    8. utils/ 目录:用于存放一些通用的工具函数,如日期处理函数、字符串操作函数等。
  • vite.config.js 文件:Vite 的配置文件,可以通过该文件配置项目的参数、插件、打包优化等。该文件可以使用 CommonJS 或 ES6 模块的语法进行配置。
  • package.json 文件:标准的 Node.js 项目配置文件,包含了项目的基本信息和依赖关系。其中可以通过 scripts 字段定义几个命令,如 dev、build、serve 等,用于启动开发、构建和启动本地服务器等操作。
  • Vite 项目的入口为 src/main.js 文件,这是 Vue.js 应用程序的启动文件,也是整个前端应用程序的入口文件。在该文件中,通常会引入 Vue.js 及其相关插件和组件,同时会创建 Vue 实例,挂载到 HTML 页面上指定的 DOM 元素中。

2.vite的运行界面

  • 在安装了 Vite 的项目中,可以在 npm scripts 中使用 vite 可执行文件,或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts:(package.json)
{"scripts": {"dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
}
  • 运行设置端口号:(vite.config.js)
//修改vite项目配置文件 vite.config.js
export default defineConfig({plugins: [vue()],server:{port:3000}
})

都看到这了,不妨一键三连再走吧!

🌈欢迎和毛毛张一起探讨和交流!
联系方式点击下方个人名片

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65907.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js 中的递归应用+异步递归

文章目录 递归详解递归算法优化复杂应用中递归应用递归过程中应该注意的一些事异步递归及实例 递归详解 尾递归优化 原理&#xff1a;尾递归是指在函数的最后一步调用自身。在这种情况下&#xff0c;编译器或解释器可以通过优化&#xff0c;将递归调用转换为循环&#xff0c;从…

手机租赁平台开发全攻略打造高效便捷的租赁服务系统

内容概要 手机租赁平台开发&#xff0c;简单说就是让用户能轻松租赁各类手机的高效系统。这一平台不仅帮助那些想要临时使用高端手机的人们节省了不少资金&#xff0c;还为商家开辟了新的收入渠道。随着智能手机的普及&#xff0c;很多人并不需要长期拥有一部手机&#xff0c;…

[最佳方法] 如何将视频从 Android 发送到 iPhone

概括 将大视频从 Android 发送到 iPhone 或将批量视频从 iPhone 传输到 Android 并不是一件容易的事情。也许您已经尝试了很多关于如何将视频从 Android 发送到 iPhone 15/14 的方法&#xff0c;但都没有效果。但现在&#xff0c;通过本文中的这 6 种强大方法&#xff0c;您可…

记录一下图像处理的基础知识

记录一下自己学习的图像处理的基础知识。 一、图像的文件格式以及常用的图像空间 1、文件格式 常见的图像文件格式有 jpg, png, bmp, gif &#xff08;1&#xff09;jpg&#xff1a;有损压缩算法&#xff0c;大幅减小文件大小&#xff0c;便于存储和传输&#xff0c;兼容性…

算法-各位数相加,直至和为个位数

给定一个非负整数 num&#xff0c;反复将各个位上的数字相加&#xff0c;直到结果为一位数。返回这个结果。 示例 1: 输入: num 38 输出: 2 解释: 各位相加的过程为&#xff1a; 38 --> 3 8 --> 11 11 --> 1 1 --> 2 由于 2 是一位数&#xff0c;所以返回 2。…

Openwrt 下移植 源码安装Cmake

Openwrt 下源码编译安装Cmake cmake介绍源码下载安装configure问题/usr/bin/ld: cannot find -ldlCould NOT find OpenSSL运行CMake Error: Could not find CMAKE_ROOT !!!Openwrt opkg不支持cmake安装,本文尝试在目标板上基于cmake源码编译安装cmake, 并将遇到的问题和解决方…

使用Python,networkx构造有向图及无向图以及图合并等api

使用Python&#xff0c;networkx构造有向图及无向图以及图合并等api 源码图的构造、节点及边的添加等有向图及无向图及多重图 参考 方法名方法作用subgraph(G, nbunch)返回包含nbunch节点的子图union(G, H[, rename])合并G和H图disjoint_union(G, H)合并G和H图cartesian_produc…

【Java回顾】Day3 继承|Override/Ovverload|多态|抽象类|封装|接口|枚举

学习资料 菜鸟教程 https://www.runoob.com/java/java-interfaces.html 继承|Override/Ovverload|多态|抽象类|封装|接口|枚举 继承 创建分等级层次的类&#xff0c;子类继承父类的特征、行为、方法 class 父类{ } class 子类 extends 父类{ super(); }一些性质 Java 不支持…

2025年AI和AR谁才是智能眼镜的未来

在2025年&#xff0c;智能眼镜市场正迎来一场技术革新的浪潮&#xff0c;其中AI和AR技术的竞争尤为激烈。那么&#xff0c;究竟谁才是智能眼镜的未来呢&#xff1f;让我们来一探究竟。 AI眼镜的崛起 AI眼镜通过集成人工智能技术&#xff0c;提供了语音识别、环境感知和个性化服…

java实现预览服务器文件,不进行下载,并增加水印效果

通过文件路径获取文件&#xff0c;对不同类型的文件进行不同处理&#xff0c;将Word文件转成pdf文件预览&#xff0c;并早呢更加水印&#xff0c;暂不支持Excel文件&#xff0c;如果浏览器不支持PDF文件预览需要下载插件。文中currentUser.getUserid()&#xff0c;即为增加的水…

快速上手大模型的对话生成

本项目使用0.5B小模型&#xff0c;结构和大模型别无二致&#xff0c;以方便在如CPU设备上快速学习和上手大模型的对话上传 #mermaid-svg-Z86hUiQZ0hg9BVji {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Z86hUiQZ0h…

Unreal虚幻引擎使用遇到的问题记录

文章目录 The game module ‘MyGame’ could not be loaded. There may be an operating system error or the module may not be properly set up The game module ‘MyGame’ could not be loaded. There may be an operating system error or the module may not be properl…

在Unity中用Ab包加载资源(简单好抄)

第一步创建一个Editor文件夹 第二步编写BuildAb&#xff08;这个脚本一点要放在Editor中因为这是一个编辑器脚本&#xff0c;放在其他地方可能会报错&#xff09; using System.IO; using UnityEditor; using UnityEngine;public class BuildAb : MonoBehaviour {// 在Unity编…

丢弃法hhhh

一个好的模型需要对输入数据的扰动鲁棒 丢弃法&#xff1a;在层之间加入噪音&#xff0c;等同于加入正则 h2和h5变成0了 dropout一般作用在全连接隐藏层的输出上 Q&A dropout随机置零对求梯度和求反向传播的影响是什么&#xff1f;为0 dropout属于超参数 dropout固定随…

mysql 报错 ERROR 1396 (HY000) Operation ALTER USER failed for root@localhost 解决方案

参考:https://blog.csdn.net/m0_74824534/article/details/144177078 mysql 修改密码 ALTER USER ‘root’‘localhost’ IDENTIFIED BY ‘123’; 时&#xff0c;报错 ERROR 1396 (HY000): Operation ALTER USER failed for rootlocalhost 解决方案&#xff1a; 2024-4-3 段子…

Three.js Journey (notes2)

ref Three.js中文网 Three.js Journey — Learn WebGL with Three.js Part 1 Fullscreen and resizing When the double click happens, we will toggle the fullscreen —meaning that if the window is not in fullscreen, a double-click will enable fullscreen mode, …

C# 中 `new` 关键字的用法

在 C# 中&#xff0c;new 关键字用于修饰方法、属性、索引器或事件声明时&#xff0c;表示当前成员隐藏基类中同名的成员。它们之间的具体区别如下&#xff1a; 不加 new&#xff1a; 如果子类定义了一个与父类同名的方法&#xff0c;但没有使用 new 关键字&#xff0c;编译器会…

深入理解Python中的常用数据格式(如csv、json、pickle、npz、h5等):存储机制与性能解析

在数据科学与工程领域&#xff0c;数据的存储与读取是日常工作中不可或缺的一部分。选择合适的数据格式不仅影响数据处理的效率&#xff0c;还关系到存储空间的利用与后续分析的便捷性。本文将以通俗易懂的方式&#xff0c;深入探讨Python中几种常用的数据读写格式&#xff08;…

Ubuntu开机The root filesystem on /dev/sdbx requires a manual fsck 问题

出现“Manual fsck”错误可能由以下几种原因引起&#xff1a; 不正常关机&#xff1a;如果系统意外断电或被强制重启&#xff0c;文件系统可能未能正确卸载&#xff0c;导致文件系统损坏。磁盘故障&#xff1a;硬盘的物理损坏可能会引发文件系统错误。文件系统配置问题&#x…

Django Admin 以管理 AWS Lambda 函数

在现代云计算环境中,AWS Lambda 函数已成为构建无服务器应用程序的重要组成部分。作为开发者或运维工程师,有效管理这些 Lambda 函数是一项关键任务。今天,我们将探讨如何利用 Django Admin 创建一个强大而直观的界面来管理 AWS Lambda 函数。 背景 假设我们已经创建了一个…