一.安装常用依赖

后缀加上 @next ,表示使用最新版本的依赖包

yarn add axios@next
yarn add vue-router@next
yarn add vuex@next
yarn add element-plus@next
yarn add ant-design-vue@next注意这里有个坑，less 和 less-loader 必须写到 devDependencies 里面，不然项目运行会报错
yarn add less less-loader --dev

二.UI框架体验

为方便学习,均采用完整引入和按需引入进行实战演示

1.Element-plus

Element-plus 官方文档

1.1 完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

1.2 按需引入

1.新建 lazy-element.js ,用于放置用到element组件,将使用到的组件依次引入

2.main.js中引入

1.3 国际化 - 中文

解决element-plus按需引入组件并改为中文后开发模式下正常,生产环境下报错的问题

import {locale} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
//如果不这样设置的话,build时会报方法找不到的问题,这是由于vite2.3版本暂不支持umdModule解析
if (import.meta.env.PROD) {locale.use(lang)
} else {locale(lang)
}

2.Ant-Design 2.x

Ant-Design 2.x 官方文档

2.1 完整引入

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';const app = createApp();
app.config.productionTip = false;app.use(Antd);

2.2 按需引入

1.新建 lazy-antd.js ,用于放置用到ant-design组件,将使用到的组件依次引入
2.main.js中引入

3.显示效果

Vue3系列(二)之安装依赖与UI框架初体验相关推荐

shell 清楚空格_Cygwin系列（五）：Shell命令行初体验
► 本文共5700余字,预计阅读时间15分钟,本文知乎链接:Cygwin系列(五):Shell命令行初体验,本文同步发布于微信公众号. 前一篇文章Cygwin系列(四):一步一步搭建Cygwin最小系 ...
【JS逆向系列】某乎x96参数与jsvmp初体验
[JS逆向系列]某乎x96参数与jsvmp初体验 js分析 jsvmp分析第一种解决方案-补环境第二种解决方案-修改操作码第三种解决方案-算法还原参考文章样品网址:aHR0cHM6Ly93d ...
自然语言处理NLP星空智能对话机器人系列：Facebook StarSpace框架初体验
自然语言处理NLP星空智能对话机器人系列:Facebook StarSpace框架初体验目录 Facebook StarSpace github StarSpace 安装部署编译星际空间 Face ...
【vSphere系列二】安装 Openfiler 存储
参考 http://tech.ddvip.com/2013-03/1362159819191307.html 一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变成一个强 ...
SAP License：SAP ECC6安装系列二：安装前的准备工作
安装 Java 1,安装 Java,最好从 SAP 的安装盘上找 Java 版本,对于 SAP 的软件来说,最新往往不是最好的,能够最稳定的配合软件运行的版本才是最好的.请认真阅读官方的 Instal ...
SAP ECC6安装系列二：安装前的准备工作
原作者博客 http://www.cnblogs.com/Michael_z/ ======================================== 安装 Java 1,安装 Java, ...
《Visual C++ 2010入门教程》系列二：安装、配置和首次使用VS2010
安装 Visual C++ 2010是属于Visual Studio 2010的一部分,这个在前一章中已经讲解过,实际上Visual C++ 2010也有更多的子版本,正如Windows7有旗舰版.家 ...
Docker系列二. Docker 安装 Nginx
Docker 安装 Nginx Nginx 是一个高性能的 HTTP 和反向代理 web 服务器,同时也提供了 IMAP/POP3/SMTP 服务 . 1.查看可用的 Nginx 版本访问 Ngin ...
SaltStack WEB UI Halite初体验
闲来无聊,话说saltstack webui halite还一直没玩,于是就凑今天体验一把: 很多尝鲜的同学都说halite的功能较少,而其也正符合其说明console,不过其UI我还是蛮喜欢的,个人 ...

Vue3系列(二)之安装依赖与UI框架初体验

目录

一.安装常用依赖

二.UI框架体验

1.Element-plus

1.1 完整引入

1.2 按需引入

1.3 国际化 - 中文

2.Ant-Design 2.x

2.1 完整引入

2.2 按需引入

3.显示效果

Vue3系列(二)之安装依赖与UI框架初体验相关推荐

最新文章

热门文章