yarn + vite + element-plus搭建vue项目遇到的问题

从vue3的官网中看到我们可以使用vue-cli搭建项目，也可以使用vite搭建项目 ，因为vite执行的速度会相对来说快了一点 所以这里我们说一下使用vite搭建项目以及遇到的一些问题

第一步创建项目

创建项目的命令

 yarn create vite-app vite-demo

创建完成后可看到项目文件夹解构如下

可以看到里面没有vue的路由 当然官网给我们了一个制作一个简单的路由跳转的方法，这个可以官网自行参考 我们这里使用vue-router

安装vue-router

安装命令

yarn add vue-router@4 --save

使用
在项目文件中创建router文件夹 并在文件夹中创建index.js文件 代码如下

import { createRouter, createWebHashHistory }  from 'vue-router'
// console.log(createRouter);
import Home from '../views/Home.vue' 
const routes = [
    { path: '/', component: Home },
]
  
  // 3. 创建路由实例并传递 `routes` 配置
  // 你可以在这里输入更多的配置，但我们在这里
  // 暂时保持简单
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

export default router

接下来在main.js中引入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

注意需要在适当的页面中写入route-view 我这里写在了app.vue文件中

加下来安装element-plus 并且进行按需引入

安装命令

	yarn add element-plus --save  // 安装命令
	因为需要按需引入所以还需要安装对应的babel插件 安装命令如下
	这里因为我们使用的是vite集成工具 使用vue-cli脚手架的可以去官网查看
	yarn add vite-plugin-style-import -D 
	因为我这里使用了scss 所以安装了一下sass 及sass-loader 命令如下
	yarn add sass sass-loader -D
	

安装完成后
在项目根目录下加入vite.config.js文件
代码如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-plus/packages/theme-chalk/src/${name}.scss`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ]
})

按照 element的指示我们创建好了项目 但是这时候会发现启动项目报错 错误提示如下

这个错误时因为还没有安装 @vitejs/plugin-vue 这里可以安装一下 有兴趣的可以去npm上查看这个东西
安装命令

yarn add @vitejs/plugin-vue --save

安装过后再次启动项目 发现还是报错 错误如下
 

这里提示defineConfig不是一个函数 经过查看 发现vite中没有这个方法 这是为什么呢，后来发现是因为这样安装的vite版本的问题，需要提升vite的版本
安装命令如下

yarn add vite@2.3.7 --save

安装完成后再次启动项目 启动成功
但是又出现了另外一个问题， element样式不生效 这又是为啥呢 懵逼

经过一番查看发现问题在vite.config.js中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          ensureStyleFile: true,
          resolveStyle: (name) => { // 这里这个name不能直接使用 因为element的组件文件都带有el-开头 但是样式文件并没有 所以导致引入的样式文件无法正常解析 这里只需要加上一句代码即可
           name = name.slice(3)
           
            return `element-plus/packages/theme-chalk/src/${name}.scss`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ]
    })
  ]
})

至此第一波排雷完毕，与君共勉