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

一.安装常用依赖

后缀加上 @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.显示效果