誉天程序员-2301-3-day02

知识回顾，问chatGPT

如果遇到一些自己感兴趣问题，或者工作中遇到新的问题。
读百文。精读？随便读。1个月读100本书。
1）修正错误的观点，离真正含义越来越近
2）不断学习，从不同角度去学习

打包

1、pnpm run build
它把整个项目进行编译，把vue处理，和js结合，最后形成一个压缩加密后的文件。
压缩的目的：加载速度更快，合并js，下载快。文件越少，文件越小，下载就越快。同时，静态缓存。
加密的目的：防止别人剽窃，把见名之意名称都替换n，y，别人拿到这个公开文件，也不知道其含义。
2、npm install -g serve
安装生产环境（开发开发、生产环境、测试环境）
3、serve -s dist
注意：所在目录是你的工程。生产环境nodejs，安装serve环境，然后在dist上级目录运行这句话

安装常用组件

安装ElementPlus组件

官网：https://element-plus.gitee.io/zh-CN/

main.js

import { createApp } from 'vue'  
// 导入element-plus组件
import ElementPlus from 'element-plus'
// 导入element-plus全局的样式表文件
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

// createApp(App).use(ElementPlus).mount('#app')

App.vue

<script setup>

</script>

<template>
	<el-button>Default</el-button>
	<el-button type="primary">Primary</el-button>
	<el-button type="success">Success</el-button>
	<el-button type="info">Info</el-button>
	<el-button type="warning">Warning</el-button>
	<el-button type="danger">Danger</el-button>
</template>

安装ElementPlus Icon图标组件

pnpm install @element-plus/icons-vue
修改main.js

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

修改App.vue

安装路由Router组件

安装router组件后，我们可以在多个页面来跳转
步骤比较复杂：
1、自定义新的组件About.vue
在src下创建pages目录，存放我们的自定义组件。

<template>
	<h2>关于我们</h2>
</template>

<script>
</script>

<style>
</style>

2、声明一个路由表 routes
3、创建一个路由对象router，绑定路由表
4、把上面内容放入src/自己创建router目录，目录中创建index.js
5、在main.js中引用路由router/index.js

// 导入router两个函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 导入自定义组件，注意目录关系 ../相对路径，上级目录；./当前目录
import About from '../pages/about.vue'
import Home from '../pages/home.vue'

// 创建路由表，数组，多个元素
const routes = [
	{	//声明一个路由，path浏览器URI，component组件
		path: '/about',
		component: About
	},
	{
		path: '/',
		component: Home
	}
]

// 创建路由对象
const router = createRouter({
	history: createWebHashHistory(),  //使用hash历史模式
	routes //两个名字相同，可以只写key名字
})

// 暴露给外部调用，导出export default只有一个
export default router

首页Home.vue

1、创建Home.vue，放在pages目录下
2、在路由表中注册
3、在页面router-link链接

响应布局

<template>
	<!-- 布局一行el-row -->
	<el-row>
		<!-- 布局两列 el-col -->
		<el-col :lg="16" :md="12" :sm="24">
			金典图书管理系统v1.0
		</el-col>
		<el-col :lg="8" :md="12" :sm="24">
			登录
		</el-col>
	</el-row>
</template>

<script>
</script>

<style>
	div{
		border: 1px solid red;
	}
</style>

登录功能

<template>
	<!-- 布局一行el-row -->
	<el-row>
		<!-- 布局两列 el-col -->
		<el-col :lg="16" :md="12" :sm="24" class="left-col">
			<div>
				<div class="title">金典图书管理系统v1.0</div>
				<div class="note">技术栈：Vue3.x+Vite4.x+Router4.x+ElmentPlus2.3</div>
			</div>
		</el-col>
		<el-col :lg="8" :md="12" :sm="24" class="right-col">
			<!-- 表单，对应模型form，设置label框宽度 -->
			<!-- ref引用验证表单时临时存储数据对象 -->
			<el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
				<!-- 表单项，设置input前面的名称 -->
				<!-- prop将来错误信息展现位置 -->
				<el-form-item label="用户名" prop="username">
					<!-- 文本输入框，v-model绑定数据，绑定username -->
					<el-input v-model="form.username" placeholder="请输入用户名">
						<template #prefix>
							<el-icon><UserFilled /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="form.password" placeholder="请输入密码">
						<!-- 槽slot，ElementPlus修饰时，会放在input框里，不影响输入
							参数：#prefix 前置/ #suffix 后缀
						 -->
						<template #prefix>
							<el-icon><Lock /></el-icon>
						</template>
					</el-input>
				</el-form-item>
				
				<el-form-item>
					<el-button type="success" @click="onSubmit">登录</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>

<!-- setup语法糖，vue3.0新代码编写方式 -->
<script setup>
	// reactive包装对象（obj.name）,ref包装单值(name.value)，变成响应式数据
	// 多个值用逗号隔开,必须有大括号
	import { reactive,ref } from 'vue'
	
	// 使用reactive函数改造(包装)对象,这个对象就变成响应式对象,这个对象值改变,页面的值随之改变
	const form = reactive({
		username: 'chen',
		password: '123456'
	})
	
	// 校验代码
	const formRef = ref(null)	//给单值设置一个null值，初始化
	
	// 验证规则，规则对象必须用reactive包装，username可以多个验证规则，所以集合
	const rules = reactive({
		username: [
			// 非空校验,必填,message提示信息,trigger触发事件,blur失去焦点事件
			{ required: true, message: "用户名不能为空", trigger: 'blur'}
		],
		password: [
			{ required: true, message: "密码不能为空", trigger: 'blur'},
			{ min: 3, max:6, message:"密码长度3到6位", trigger: 'blur'}
		]
	})
	
	//声明一个onSubmit方法，它使用剪头函数，无参
	const onSubmit = ()=>{
		// validateElmentPlus提供校验方法, valid是否出错判断参数
		formRef.value.validate((valid)=>{
			if(valid){
				return console.log("验证成功")
			}else{
				return false //不放行，不向下执行代码
			}
		})
	}
</script>

<style>
	/* 网页四周有空白,html规范它留了一点小空白 */
	body{
		margin: 0;  /* 去掉四周留白 */
	}
	.left-col{
		display: flex; /* flex布局 */
		background-color: green;
		height: 100vh;	/* vh高度和屏幕高度一直 */
		justify-content: center; /* 垂直居中 */
		align-items: center; /* 横向居中 */
	}
	.title{
		color: white;
		font-size: 40px;
	}
	.note{
		color: darkgray;
	}
	.right-col{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

ref和reactive的使用区别

<template>
	<h2>关于我们</h2>
	<div>
		<!-- 单值好处，很简洁，直接写变量名称 -->
		<button @click="addRef">{{count}}</button>
		
		<!-- 对象就必须以对象.操作符来写 -->
		<button @click="addReactive">{{form.count}}</button>
	</div>
</template>

<script setup>
	// 导入两个转化单值,对象包装成响应式对象
	import {ref, reactive} from 'vue'
	
	//使用ref包装的单值计数器，初始化值100
	const count = ref(100)
	
	//使用reactive包装的对象的计数器，初始化值200
	//下面count是form对象的一个属性
	const form = reactive({
		count: 200
	})
	
	const addRef = ()=>{
		// ref包装的单值,在script脚本中访问时要加value
		count.value++	//响应式对象，页面值自动刷新
	}
	
	const addReactive = ()=>{
		form.count++	//响应式对象，页面值自动刷新
	}
	
</script>

<style>
</style>