首页 前端知识 Vue3 Vite AntDesign Axios Unocss 太爽了,直接上手和后端对接-适合白嫖

Vue3 Vite AntDesign Axios Unocss 太爽了,直接上手和后端对接-适合白嫖

2024-08-18 22:08:53 前端知识 前端哥 848 258 我要收藏

发现新大陆,大厂前端架构师搭建的后台管理框架,使用都是热门的前端技术栈;只会后端的我直接拿来入手练习项目,与后端接口对接分分钟完成。

所用技术栈:

  • vue3

  • ant-design-vue

  • unocss

  • axios

  • echarts

  • pinia

  • unplugin-vue-jsx

  • vue-router

  • typescript

  • unplugin-auto-import

  • unplugin-vue-components

效果图:

关于每个技术点的优势总结:

以下观点纯属个人对此框架的使用过程中的理解;

  1. vue3

vue3的setup语法糖和组合式api的使用;其中主要是ref函数 和 reactive函数 的使用,对象的定义不再需要像vue2之前的写法,可以将变量像js的原生写法一样,统一定义在最顶部,方便查看和管理;总体来说vue3的写法,让开发人员可以比较个性化的编写自己的代码规则;

  1. Unocss

页面CSS简化利器,传统的css编写都需要在Style标签内定好,使用Unocss可以在组件上直接定义,且兼容效果也很好;嘿嘿,前提还好需要有css基础的人使用起来才可以得心应手!

看以下代码达到的是同样效果;

原生CSS格式:

.demo{
  margin: 1px
  width: 1px
  height: 1px
}
<div class="demo"> </div>

CSS框架:

<div m-1px w-1px h-1px> </div>

Unocss框架的编写格式首次接触肯定会不适应,这里还提供了一个格式写法工具可以学习:

https://uno.antfu.me/

只需要输入css的相关属性,系统会自动提示编写格式

资料参考文献:https://zhuanlan.zhihu.com/p/425814828?utm_medium=social&utm_oi=31225867665408

  1. Axios

框架内做了二次封装,灵活的支持多种请求方式(POST/GET/DELETE/PUT等),且做了token认证授权,登录拦截;且还有每种请求方式的调用示例,这就很方便了。

  1. Pinia

Vue新一代状态管理插件Pinia,这比vue的Store是方便和直观多了。使用它之后,以后就不用Store的写法了。

优点:

  • 使用直观,编写store更加容易

  • 完整的 TypeScript 支持

  • Pinia的体积极小,包体积仅为约1kb

  • 抛弃了Vuex中的Mutation,使用action支持同步和异步

  • 官方地址:https://pinia.web3doc.top/

  1. unplugin-auto-import 和 unplugin-vue-components

两个都是提高开发效率的插件,自动引入插件/组件;当你编写一个组件之后,vue写法是在你需要使用的页面都要使用import 进行手动导入;而配置以上两个插件之后,你只需要告诉他哪个文件夹需要进行自动导入组件,之后在需要使用的页面,直接写文件名即可引入组件;

自动导入组件主要配置;vite.config.ts

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Unocss from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import PxToRem from './px-to-rem';
import VueJsx from 'unplugin-vue-jsx/vite';

export default defineConfig({
  plugins: [
    PxToRem(),
    vue({ reactivityTransform: true }),
    Unocss(),
    VueJsx(),
    AutoImport({
      dts: 'src/types/auto-imports.d.ts', // 生成类型声明文件,自动引入相关插件
      imports: ['vue', 'pinia', '@vueuse/core', 'vue-router'], // 自动引入哪些内容
      dirs: ['src/composables'], // 自动导入composables目录下的模块
    }),
    Components({
      dirs: ['src/components'], //自动导入components目录下的组件
      dts: './src/types/components.d.ts', //生成类型声明文件,自动引入相关组件
      resolvers: [AntDesignVueResolver({ resolveIcons: true })],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

原始的导入方式:

使用自动导入插件后;点击插件名称仍然可以跳转到插件进行编辑。

vue-router,typescript等其他插件插件大家可以自行查阅资料,如果确实需要相关资料可以给我留言。我要去开始卷前端了。进阶全栈中,目标架构师。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16156.html
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!