vue的笔记

一、构建的常用语句

• 使用 vite 构建前端工程
  
  
  
  • npm init vue@3.7.0
    
  
  
• 下载 sass 依赖,注意这是个 开发依赖
  
  
  
  • npm i sass -D
    
  
  
• 下载 axios 异步插件
  
  
  
  • npm i axios -S
    
  
  
• 下载 ElementPlus 图形界面组件
  
  
  
  • npm i element-plus -S
    
  
  
• 下载 ElementPlus 图标组件
  
  
  
  • npm i @element-plus/icons-vue -S
    
  
  
• 下载 ECharts 图表界面组件
  
  
  
  • npm i echarts -S
    
  
  
• 下载 md5 加密依赖 防止 密码明文传送
  
  
  
  • npm i ts-md5 -S
    
  
  
• 下载 pinia 插件,防止刷新重置仓库
  
  
  
  • npm i pinia-plugin-persist -S
    
  
  
• 下载 数字滚动插件
  
  
  
  • npm i vue3-count-to -S
    
  
  

二、各种请求格式

• get
  
  
  
  • 直接拼接:http://localhost:8080/getstudent/17
    
  • params拼接:http://localhost:8080/getstudent?id=17
    
  
  
• delete(delete跟get相似,一般只在请求上直接拼接,不会携带data)
  
  
  
  • 直接拼接:http://localhost:8080/delstudent/17
    
  • params拼接:http://localhost:8080/delstudent?id=17
    
  
  
• put
  
  
  
  • 带Json格式的参数axios.put('/api/user', { name: '张三', age: 18 })
    
  • 以表单格式发送(Content-Type:application/x-www-form-urlencoded):
    
  axios.put('/api/user', qs.stringify({ name: '张三', age: 18 }))
  
  
  
  • 拼接同样可以,但不建议
    
  
  
• post
  
  
  
  • 带Json格式的参数axios.post('/api/user', { name: '张三', age: 18 })
    
  • 以表单格式发送(Content-Type:application/x-www-form-urlencoded):
    
  axios.post('/api/user', qs.stringify({ name: '张三', age: 18 }))
  
  
  
  • 拼接同样可以,但不建议
    
  
  

代码实例:
request.ts:

1. import axios,{type AxiosInstance} from "axios";
2. import { ElMessage } from "element-plus";
4. const request:AxiosInstance = axios.create({
5.    /* http://db.etoak.com:9527 */
6.    baseURL:import.meta.env.VITE_APP_BASE_API,
7.    /* 超时时间 */
8.    timeout:5000,
9. })
11. request.interceptors.request.use(config=>{
12.    console.log('请求拦截器~~~~',config)
13.    return config
14. },error=>{
15.    return Promise.reject(error)
16. })
18. /* 设置响应拦截器 */
19. request.interceptors.response.use(Response=>{
20.    console.log('响应拦截器~~~~',Response)
21.    const {data} = Response
22.    if(data.code===200||data.flag){
23.        return Response
24.    }
25.    ElMessage.error(data.msg)
26.    return Promise.reject(data)
27. },error=>{
28.    const {message} = error
29.    if(message.indexOf('Network Error')!==-1){
30.        ElMessage.error('孩子,没联网')
31.    }else if(message.indexOf('参数')!==-1){
32.        ElMessage.error('参数不对')
33.    }
34.    return Promise.reject(error)
35. })
36. export default request

复制代码

api/dao.ts:

1. import request from "@/utils/request";
3. const PATH = '/testUser/'
5. export const login = (username: string, password: string) =>
6.    request({
7.        url: `${PATH}login?username=${username}&password=${password}`,
8.        /* get不能发送json */
9.        method: 'get',
10.    })
12. export const reg = (pojo: RegUser) =>
13.    request({
14.        url: `${PATH}add`,
15.        /* post可以发送json */
16.        method: 'post',
17.        data: pojo,
18.    })
20. export const UpdateById = (newPojo: UpdateUser | UpdateRole) =>
21.    request({
22.        url: `${PATH}update`,
23.        method: 'put',
24.        data: newPojo,
25.    })
27. export const removeById = (id: string) =>
28.    request({
29.        url: `${PATH}delete/${id}`,
30.        /* url:`${PATH}delete?id=`, */
31.        method: 'delete',
32.    })

复制代码

三、使用声明类文件让你的前端代码不爆红

​        在我之前的一段较为紧张的学习时期，我们在写前端的时候，不去写声明文件，来定义一些属性的接口，就导致，我们在使用这些属性的时候，会让我们的代码爆红，虽然这并不影响代码的执行，这种情况也一度让我忘记了，怎么去定义这样的接口类。

1. - 这种文件在 TypeScript 里叫做类型声明文件，英文名是：Type Declaration File。
3. - 通常以 .d.ts 结尾。
5. - 作用：专门用来声明类型（接口、类型别名、全局变量等），不包含实际的实现代码。

复制代码

1. declare interface Province{
2.    id:string,
3.    name:string
4. }
5. declare interface City{
6.    id:string,
7.    name:string
8. }
9. declare interface Area{
10.    id:string,
11.    name:string
12. }
13. declare interface CascadeUser{
14.    provinceId:string,
15.    cityId:string,
16.    areaId:string
17. }

复制代码

四、关于Echarts图标绘制

这里选择直接贴代码
script:

1. import { onMounted, onUnmounted, ref, reactive } from 'vue';
2. import * as echarts from 'echarts'
3. import 'echarts/theme/vintage'
5. /* 获取页面 DOM */
6. let mychart = ref<HTMLDivElement | undefined>()
8. let chart:any   /* 注意这里如果使用 ref 会导致 tooltip 中的指示器失效! */
10. /* 此函数用来绘制图表 */
11. const initChart = () => {
12.    /* 设置初始化位置,也就是绘制在哪里 */
13.    chart = echarts.init(mychart.value,'vintage')
14.    /* 加载配置项 配置项中常见的配置项一定要明确其功能,由于配置项众多,不要求逐个记住,但是要
15.    懂得如何使用 官方 API 文档查阅 测试,注意只要配置项书写错误,则无报错机制,图表不显示 */
16.    chart.setOption({
17.    /*
18.    这里是图标各类数据
19.    */
20.    })
21. }
22. /* 页面真实 DOM 覆盖虚拟 DOM,全部渲染完毕开始绘制 ECharts 图表 */
23. onMounted(()=>{
24.    initChart() /* 绘制图表 */
25. })
26. /* 当组件销毁前重置 图表对象,防止切换过程中缓存误导 */
27. onUnmounted(()=>{
28.    if(!chart) return
29.    chart.dispose() /* ECharts 自带函数,强制销毁当前对象 */
30.    chart = null    /* 重置为 null */
31. })
32. /* 添加随着浏览器的拖动图表自适应 */
33. window.addEventListener("resize", function () {
34.    if( chart ) chart.resize()
35.    /* 如果存在多个则依次调用 */
36.    /* myChartA.resize();
37.    myChartB.resize(); */
38. })

复制代码

template:

1.    

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏一下   不知道什么时候能用到