Vue生态学习 | 青训营笔记

129 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 36 天

Element-plus

element-plus是支持vue3的ui框架,因为要在青训营的项目开发中想要直接用现成的组件库来减少时间消耗,但是因为太不熟悉了反而增加了很多工作量。
支持vue2的:Element
支持vue3的:Element Plus
首先为包添加element-plus:

yarn add element-plus

对于使用nuxt开发的人员来说然后安装@element-plus/nuxt并编辑nuxt.config.ts文件

yarn add @element-plus/nuxt

在配置文件的modules属性中添加:'@element-plus/nuxt',然后可以启动一下程序如果没有出现报错就说明配置成功了。
可以像是使用vue的组件一样在模板中使用element的的组件,注意模板中的组件名要用kabab-case,而导入这个组件需要使用PascalCase。可参照以下例子:

<script setup lang="ts">
import { ElButton } from 'element-plus'
<script>
<template>
<el-button></el-button>
<template>

详细属性可以参照官方的组件文档。

Naive-ui

这个也是一个vue3的ui框架,如果想要在nuxt3这类SSR框架中去使用它,需要参照官方的SSR安装文档: 服务端渲染 Server-Sider Rendering - Naive UI
在编辑这个包的配置时可能会出现警告不能使用process.env.NODE_ENV等等,需要安装@types/node。

VuePress

可以用来搭建使用Vue作为视图的SSG网站。VuePress (docschina.org)

Nuxt Content

可以让nuxt项目读取、解析、使用像是md、json、yaml这类文件 Content (nuxtjs.org)

Ant

同样是vue3的组件库 Ant Design of Vue - Ant Design Vue (antdv.com)

Vue Router

用来管理页面的路由,Nuxt默认使用它并分配路由。

quasar

用来开发web用户页面 Quasar Framework 中文网 (quasarchs.com)

strapi

用于CMS

Pinia、Vuex

用于全局状态管理,推荐使用Pinia。

Vueuse

用于开发插件

VueCLI

官方脚手架