誉天程序员-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

安装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目录，存放我们的自定义组件。

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链接

响应布局

登录功能

ref和reactive的使用区别