誉天程序员-2301-3-day02

原创

已于 2023-07-26 18:30:47 修改 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java

于 2023-07-21 08:43:57 首次发布

本文介绍了如何在Vue项目中安装和使用ElementPlus组件库，包括基本按钮组件的展示，以及ElementPlusIcon图标的引入。此外，还详细讲解了VueRouter的配置，创建了多页面跳转的示例，并展示了响应式布局和登录功能的实现。同时，文章探讨了ref和reactive在处理响应式数据时的区别。

文章目录

知识回顾，问chatGPT
打包
安装常用组件
响应布局
登录功能
ref和reactive的使用区别

知识回顾，问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>