Vue3 series (2) installation dependencies and UI framework initial experience

1. Install common dependencies

Adding @next to the suffix means using the latest version of the dependency package

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

2. UI framework experience

For the convenience of learning, complete introduction and on-demand introduction are used for actual combat demonstration

1.Element-plus

Element-plus Official Documentation

1.1 Complete introduction

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 Import on demand

1. Create a new lazy-element.js to place the element components used, and import the used components into

2.main.js in turn

1.3 Internationalization - Chinese

• Solve the problem that element-plus introduces components on demand and changes them to Chinese, which is normal in the development mode and reports errors in the production environment

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 Official Documentation

2.1 Complete introduction

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 Import on demand

• 1. Create a new lazy-antd.js to place the ant-design components used, and import the used components in turn
  
• 2. Introduced in main.js
  

3. Display effect