电商网站产品设计优化技术主要是,建设协会官方网站,如何免费申请域名和网址,wordpress获取自定义类型文章#x1f64b;大家好#xff01;我是毛毛张! #x1f308;个人首页#xff1a; 神马都会亿点点的毛毛张 #x1f6a9;今天毛毛张分享的是关于如何快速#x1f3c3;♂️搭建一个前端工程化的项目的环境搭建以及流程#x1f320; 文章目录 1.前端工程化环境搭建#… 大家好我是毛毛张! 个人首页 神马都会亿点点的毛毛张 今天毛毛张分享的是关于如何快速♂️搭建一个前端工程化的项目的环境搭建以及流程 文章目录 1.前端工程化环境搭建1.1 什么是前端工程化1.2 nodejs的简介和安装1.2.1 什么是Nodejs1.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 ViteVue3项目的创建、启动、停止2.3.2 ViteVue3项目的目录结构 1.前端工程化环境搭建
1.1 什么是前端工程化
前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。
1.2 nodejs的简介和安装
1.2.1 什么是Nodejs 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
直接打开官网下载对应操作系统的LST版本 官网链接https://nodejs.org/en 双击安装包进行安装安装过程中遵循默认选项即可(或者参照https://www.runoob.com/nodejs/nodejs-install-setup.html )。安装完成后可以在命令行终端输入 node -v 和 npm -v 查看 Node.js 和 npm 的版本号。 定义一个app.js文件,cmd到该文件所在目录,然后在dos上通过node app.js命令即可运行
function sum(a,b){return ab;
}
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 目录下。如果需要修改全局依赖的安装路径可以按照以下步骤操作 创建一个新的全局依赖存储目录例如 D:\GlobalNodeModules。打开命令行终端执行以下命令来配置新的全局依赖存储路径npm config set prefix D:\GlobalNodeModules确认配置已生效可以使用以下命令查看当前的全局依赖存储路径npm config get prefix4.升级npm版本 cmd 输入npm -v 查看版本如果node中自带的npm版本过低则需要升级至9.6.6npm install -g npm9.6.63.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作者:尤雨溪 尤雨溪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的介绍 在浏览器支持 ES 模块之前JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁它们极大地改善了前端开发者的开发体验 当我们开始构建越来越大型的应用时需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈通常需要很长时间甚至是几分钟才能启动开发服务器即使使用模块热替换HMR文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复迟钝的反馈会极大地影响开发者的开发效率和幸福感。 Vite 旨在利用生态系统中的新进展解决上述问题浏览器开始原生支持 ES 模块且越来越多 JavaScript 工具使用编译型语言编写。https://cn.vitejs.dev/guide/why.html前端工程化的作用包括但不限于以下几个方面 快速创建项目使用脚手架可以快速搭建项目基本框架避免从零开始搭建项目的重复劳动和繁琐操作从而节省时间和精力。统一的工程化规范前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范让不同开发者在同一个项目上编写出风格一致的代码提高协作效率和质量。代码模板和组件库前端脚手架可以包含一些常用的代码模板和组件库使开发者在实现常见功能时不再重复造轮子避免因为轮子质量不高带来的麻烦能够更加专注于项目的业务逻辑。自动化构建和部署前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作可以通过集成自动化部署脚本自动将代码部署到测试、生产环境等。
2.3 Vite创建Vue3工程化项目
2.3.1 ViteVue3项目的创建、启动、停止 1 使用命令行创建工程 在磁盘的合适位置上,创建一个空目录用于存储多个前端项目用vscode打开该目录在vscode中打开命令行运行如下命令
npm create vitelatest第一次使用vite时会提示下载vite输入y回车即可下次使用vite就不会出现了 注意 选择vueJavaScript选项即可 2 安装项目所需依赖 cd进入刚刚创建的项目目录npm install命令安装基础依赖
cd ./vue3-demo1
npm install3 启动项目 查看项目下的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 dev5 停止项目 命令行上 ctrlc
2.3.2 ViteVue3项目的目录结构 1.下面是 Vite 项目结构和入口的详细说明 public/ 目录用于存放一些公共资源如 HTML 文件、图像、字体等这些资源会被直接复制到构建出的目标目录中。src/ 目录存放项目的源代码包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中这些文件会被 Vite 实时编译和处理并在浏览器中进行实时预览和调试。以下是src内部划分建议 assets/ 目录用于存放一些项目中用到的静态资源如图片、字体、样式文件等。components/ 目录用于存放组件相关的文件。组件是代码复用的一种方式用于抽象出一个可复用的 UI 部件方便在不同的场景中进行重复使用。layouts/ 目录用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局如头部、底部、导航菜单等。pages/ 目录用于存放页面级别的组件文件通常是路由对应的组件文件。在这个目录下可以创建对应的文件夹用于存储不同的页面组件。plugins/ 目录用于存放 Vite 插件相关的文件可以按需加载不同的插件来实现不同的功能如自动化测试、代码压缩等。router/ 目录用于存放 Vue.js 的路由配置文件负责管理视图和 URL 之间的映射关系方便实现页面之间的跳转和数据传递。store/ 目录用于存放 Vuex 状态管理相关的文件负责管理应用程序中的数据和状态方便统一管理和共享数据提高开发效率。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 devvite servebuild: vite build, // 为生产环境构建产物preview: vite preview // 本地预览生产构建产物}
}运行设置端口号(vite.config.js)
//修改vite项目配置文件 vite.config.js
export default defineConfig({plugins: [vue()],server:{port:3000}
})都看到这了不妨一键三连再走吧 欢迎和毛毛张一起探讨和交流 联系方式点击下方个人名片
