配置vue3

1、elementUI-plus

npm install element-plus -S 

在main.js中引入

注意：如若要使用elementPlus的图标，需要全局注册组件，才能够直接在项目里使用。

//安装：
$ npm install @element-plus/icons-vue

注册所有图标

// main.js

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

按需引入

在vue视图中按需引入需要的图标。这里我按需引后，elementPlus样式不起作用，后来发现是我没有引入css样式

引入css样式：

//main.js

// 引入ElementPlus
import ElementPlus from 'element-plus'
//引入样式
import 'element-plus/theme-chalk/index.css'

2、vue-router

• 安装：vue-router

npm install vue-router@next --save

• 在src目录下创建router文件夹，在文件夹下创建index.js文件
• 在index.js文件编写以下代码

import {
    createRouter,
    createWebHashHistory
} from "vue-router";
//  定义一些路由
const routes = [{
    path: '/',
    component: () => import('../views/Home/Home.vue'),
    name: 'Home',

}, ]
const router = createRouter({
    // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes,
})
// 暴露出去
export default router

在main.js中引入

3、css预处理

这里我用的是less，由于vite已经集成好了less的相关loader，所以无需额外配置。直接安装即可

npm install less -D