第 1 天——前端

👁️‍🗨️阅读量:

一、环境安装

1、nodejs 安装

• 官网：Node.js

可以选择14、16版本，我们以14版本为例。npm 会和 nodejs 一同安装。

1. 安装完毕后，配置环境变量（系统变量 --> path）。
2. 验证是否配置成功：node -v![[Pasted image 20240310162933.png]]
3. 镜像配置：
   1. 查看镜像：npm config get registry ![[Pasted image 20240310163042.png]] 若结果与图片不符，则进行下一步。
   2. 配置镜像：npm config set registry=https://registry.npmmirror.com/。重新执行第一步，出现图像所示即为成功。

2、vue-cli 安装

• 官网：Vue CLI

1. 安装命令：npm install -g @vue/cli
2. 验证是否安装成功：vue -V ![[Pasted image 20240310164554.png]]

①vue-cli 是什么？

1. 是一种基于 vue 的脚手架（比喻）；
2. 可以保证代码兼容性；
3. 将项目打包，删除冗杂的注释；
4. 可以自动将项目混淆，降低已上线项目可读性（加密）。

②vue-cli 和 vue 的区别？

• 官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1. Vue 是一个 js 框架；
2. Vue-cli 是对 vue 的封装，内置了很多插件。

3、vscode 安装配置

• 安装 vscode
• 安装 vue vscode snippets 插件，vbase 命令即可快速构建出 vue 项目结构

---

二、参考项目

1、vue-manager-system

地址：Vue3、Element Plus、typescript后台管理系统

1. 下载项目；
2. 解压，进入根目录，运行 cmd；
3. 执行 npm install 下载依赖；
   1. 生产依赖（dependencies）：开发、上线阶段都要使用；
      • 安装命令 -S --save
   2. 开发依赖（devDependencies）：只在开发阶段使用；
      • 安装命令 -D --save -dev
4. 启动项目：cmd 执行 npm run dev

---

三、创建项目

1、命令行创建项目

• 命令： vue create vue01

1. ![[image-20240310102703631 1.png]]
2. ![[image-20240310102748414.png]]
3. ![[image-20240310102821536.png]]

2、非 spa 项目

• 引入 vue.js

①Vue-cli 项目目录结构

![[image-20240310103303031.png]]

1. node_modules --> 项目依赖包；
2. public --> 项目服务器

---

四、vue 基本使用

1、双向绑定

①数据驱动视图 ![[Pasted image 20240311215737.png]] ![[Pasted image 20240311215750.png]]

②视图驱动数据 ![[Pasted image 20240311220342.png]] ![[Pasted image 20240311220351.png]]

③双向绑定 ![[Pasted image 20240311220539.png]] ![[Pasted image 20240311220613.png]]

2、事件添加

• 以登录按钮为例
• 按钮添加

<button @click="onLogin">登录</button>

• 事件添加

<script>
export default{
	methods:{
		onLogin(){
			[函数体]
		}
	},
}
</script>

![[Pasted image 20240314101025.png]]![[Pasted image 20240314101105.png]]

3、class 样式控制

①Template

操作样式
<button @click="isActive = !isActive" :class="{ active: isActive }">点击切换选中</button>

• click 事件：每次点击 isActive 值取反；
• class 中会接收当前的 isActive 值，赋给 active 选择器，从而选择是否执行 style 中的 .active 样式。

②Script

data(){
	return{
		isActive:false,
	}
}

• 默认给 isActive 一个 false，即初始不显示 .active 的样式。

③Style

<style scoped>
	.active{
		[设置属性，用作激活active后的样式]
	}
</style>

• .active 是样式选择器，用来控制 class 为 active 的控件的样式。

4、组件（components）使用

vue 组件由 3 部分组成 template、script、style

1. Template 只能有一个根节点，且此组件必须存在
2. 组件文件夹![[Pasted image 20240314125638.png]]

①组件使用步骤

1. 定义组件；![[Pasted image 20240314112638.png|600]]
2. 导入组件（es 6 ：import）；![[Pasted image 20240314112902.png|600]]一定要放在 <script></script> 标签最前端
3. 注册组件；![[Pasted image 20240314112944.png|600]]
4. 使用组件。![[Pasted image 20240314113016.png]]

5、路由

①路由配置

• 首先导入路由
  • 方法一：命令行创建项目时就把路由勾选上去；
  • 方法二：手动安装 npm install vue-router@3.5.1 --save
• 配置文件![[Pasted image 20240314125516.png]]

1. 懒加载：某页面不被访问时就不加载。
2. 直接加载：首页一般都直接加载。 ![[Pasted image 20240314125808.png]]

②跳转使用

1. 定义 .vue 文件作为一个页面组件 ![[Pasted image 20240314164048.png]]页面组件中，<div> 的 <class> 属性不需要与 index.js 和 App.vue 中的路径值相同
2. 路由配置文件 index.js 中进行对应配置 ![[Pasted image 20240314130255.png]] path 是必须注明的；name 不是必须的，但推荐写出，用来指明 router 的目的地。
3. App.vue 中使用 router-link 进行跳转，router-view 使跳转显示 ![[Pasted image 20240314130447.png]] to 值需与 index.js 文件中的 path 值对应

---

五、element-ui 框架

1、基本使用

• 官网： Element - The world's most popular Vue UI framework

1. 安装：npm i element-ui -S
2. 导入：![[Pasted image 20240314134453.png]]
3. 测试是否生效：![[Pasted image 20240314134627.png]]

2、重要组件介绍

①图标

• 矢量图标，放大不失真，可以自由设置颜色

②下拉选择

• 用户看到的，和实际背后进行的逻辑数据不一样
• 比如数据字典：![[Pasted image 20240314142025.png]]

按钮
栅格布局
按钮
输入框
复选框
表格
分页
导航
tabbar
其它组件

---

贡献者

RyanJoy

页面历史

最后编辑于 大约 1 个月前

查看完整历史

720c39f-docs(all markdown file🗃️):所有文件添加busuanzi阅读量抬头

0cfb755-docs(all):title-->{{.title}}

e85d1b6-update

00958ed-initial commit