Node.js安装
一 前端工程化介绍
我们目前的前端开发中,当我们需要使用一些资源时,例如: vue.js,和axios.js文件,都是直接再工程 中导入的,如下图所示:
但是上述开发模式存在如下问题:
每次开发都是从零开始,比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护
所以现在企业开发中更加讲究前端工程化方式的开发,主要包括如下4个特点:
模块化:将js和css等,做成一个个可复用模块
组件化:我们将UI组件, css样式, js行为封装成一个个的组件,便于管理
规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范 自动化:项目的构建,测试,部署全部都是自动完成
所以对于前端工程化,说白了,就是在企业级的前端项目开发中,把前端开发所需要的工具、技术、流 程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。接下来我们就需要学习vue的 官方提供的脚手架帮我们完成前端的工程化。
二 前端工程化入门 1. 环境准备
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的,用于快速的生成一个Vue的项目模板。 Vue-cli主要提供了如下功能:
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
我们需要运行Vue-cli,需要依赖NodeJS , NodeJS是前端工程化依赖的环境。所以我们需要先安装 NodeJS,然后才能安装Vue-cli
1.1. node.js安装
1.1.1. 下载软件 根据需求下载适合自己的版本,下载地址: https://nodejs.org/zh-cn/download/
1.1.2. 安装步骤
1. 双击安装包, 一直点击【下一步】
2. 点击change按钮,更换到自己的指定安装位置,点击【下一步】
3. 一直点击【下一步】,最后安装成功即可
1.1.4. 验证是否成功
打开命令窗口,输入以下命令验证是否安装成功
node -v
npm -v
node -v 显示安装的nodejs版本 npm -v 显示安装的npm版本
1.1.5. 修改全局模块下载路径
将全模块所在路径和缓存路径放在nodejs的安装目录下面,创建两个文件夹: node_global、 node_cache
在命令行窗口执行发下命令:
npm config set prefix "C:\Project\node\node_global"
npm config set cache "C:\Project\node\node_cache"
#prefix:创建的node_global文件所在路径
#cache:创建的node_cache文件夹所在路径
经过以上的步骤, nodejs下载的模块会自己下载到我们自定义的目录。
在命令行窗口输入以下命令进行验证: npm install express -g(-g是全局安装的意思,不加-g就是默认下 载到当前目录)
1.1.6. 更换npm源为淘宝镜像
npm默认的registry,也就是npm下载的包是从国外的服务器下载,在国内会很慢,我们一般都会将 npm源指向淘宝。
1.查看初始npm源:
npm config get registry
2.更换为淘宝镜像:
npm config set registry https://registry.npm.taobao.org/
3.验证是否更换成功
npm config get registry
1.2. 安装vue和脚手架
使用管理员身份运行命令行,在命令行中,执行如下指令:
vue create [项目名称]
2.2. vue项目目录结构
基于Vue脚手架创建出来的工程,有标准的目录结构,如下:
PS D:\Project\VsCode\learnvue> node -v
v20.10.0
PS D:\Project\VsCode\learnvue> npm create vue@latest
Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y) y
<p>Vue.js - The Progressive JavaScript Framework</p>
<p>√ 请输入项目名称: ... learnvue
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是 #建议y
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是</p>
<p>正在构建项目 D:\Project\VsCode\learnvue\learnvue...</p>
<p>项目构建完成,可执行以下命令:</p>
<p>cd learnvue
npm install
npm run dev</p>
<p>PS D:\Project\VsCode\learnvue> cd .\learnvue<br />
#项目下载
PS D:\Project\VsCode\learnvue\learnvue> npm install</p>
<p>added 27 packages in 4s
#项目启动
PS D:\Project\VsCode\learnvue\learnvue> npm run dev</p>
<p>> learnvue@0.0.0 dev
> vite</p>
<p>VITE v5.1.5 ready in 1386 ms</p>
<p>➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
2.4. vue项目开发流程
Vue的组件文件以 .vue结尾,每个组件由三个部分组成: template 、script、style。 3. vue组件库Element 3.1. Element简介
Element:是饿了么团队研发的, 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端 组件库。
组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等。 官网: https://element.eleme.cn/#/zh-CNListener
3.2. 快速入门
安装ElementUI组件库 (在当前工程的目录下),在命令行执行指令
npm i element-ui -S
在main.js引入ElementUI组件库
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
评论区