当前位置：首页 > news >正文

使用vite新建vue3项目以及elementui的使用 vite组件问题

news 来源：原创 2025/4/28 20:41:41

项目创建

在创建项目之前我们应该在终端中输入

node -v 和 npm -v

只有它们都能正常查看版本号才说明我们之前是已经安装完成的。

接下来我们在合适的目录下输入npm create vite@latest

它会要求你输入项目的名称，这个名称和我们之前通过cil创建的命名规则一样。完成之后会要求我们选择合适的框架

我们这里选择vue，然后会让我们选择语言，我们选择JavaScript

完成之后我们通过 cd 目录进入然后输入npm install进行依赖安装。之后通过npm run dev运行项目。如果要结束运行就按住CTRL+c退出

路由配置

路由设置之前我们需要安装vue-router

在项目根目录下输入：npm install vue-router@4

完成之后我们找到src目录，在这个目录下创建一个router目录，在router目录中创建一个index.js文件我们的路由就是写在这个地方

在index.js文件中，我们需要提前从vue-router里面导入createRouter和createWebHistory
然后把需要创建路由的组件导入。（组件：每一个.vue文件都是一个组件）

我们需要把路由存储到一个对象里面，多个对象存储到数组内部：
const routerArr =[{path:"路径（相对路径）",component:组件}]

每一个路径都是单独的一个对象，如果存在一个路由包含多个子路由的时候我们就需要给这个路由所在的对象添加一个children属性，children属性对应的值其实就是一个新的包含多个对象的数组（嵌套）为了方便理解我们来看一个非常简单的嵌套路由实例

const routes = [
    {
        path: "/",
        component: () => import("./views/Home.vue"),
        children: [
            {
                path: "home",
                component: () => import("./views/Home.vue"),
            }
        ]
    }
]

最后我们新建一个路由
const router =[{
history：createRouter（）,
routes,
}]

然后export default router到此为止我们的index文件就编写完成了，后续我们只需要根据需要的路由进行相应的导入以及路由设置即可

接下来就是最后一步：在main.js里面加载路由

打开main.js文件。import router from "./router"根据相对目录导入，我们之前在index.js里面写了一句export default router 这个语句的作用就是让router作为默认的导出。

然后在createApp(App).mount('#app')里加上.use(router)

有的时候他可能不是一条语句，而是被拆开了：
const app = createApp(App)
app.mount('#app')这个时候我们需要在中间加上app.use(router)即可

到这个时候路由系统就算是完成了，剩下的路由的渲染之类的就不多说了。

element ui

使用之前还是需要先下载

我们在项目根目录下输入：npm install element-plus --save 就可以下载安装了

使用的方法也分为两种：完全引入按需导入（推荐）

完全引入

我们先来讲完全引入，这个相对来说是比较简单的

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

app.use(ElementPlus)

一共就这三句，然后我们如果想用element的样式。我们只需要

Overview 组件总览 | Element Plus打开这个官方网站

在对应的样式之下找到代码，复制，粘贴到需要用到的位置即可

按需导入

按需导入需要在项目根目录下输入：npm install -D unplugin-vue-components unplugin-auto-import以支持我们的需求

然后打开vite.config.js文件，把下面代码插入

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

完成之后就可以了。为什么我们会推荐使用按需导入的方法呢？
是因为完全引入占空间大于按需导入。