基于vite + vue3 + element Plus + vue-router构建一个完整的项目结构

本文链接：https://blog.youkuaiyun.com/leetrocken/article/details/136462638

本文详细介绍了如何在VScode中使用ElementPlus和VueRouter构建基于Vue3.0的项目，包括初始化项目、安装依赖、设置路由以及在main.js中集成组件库和路由管理器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

VS code编辑器
Element Plus
vue-router

VS code编辑器

VSCode（Visual Studio Code）是由微软开发的一款轻量级、强大的跨平台开源代码编辑器。

打开编辑器，进入到需要创建项目的目录
在编辑器中找到运行，找到新建终端，然后新建一个终端
终端运行以下命令，创建一个新的项目

npm init vite web -- --template vue3
? "vue3" isn't a valid template. Please choose from below:  » - Use arrow-keys. Return to submit.'
    Vanilla
>   Vue   #（这里选择vue）
    React
    Preact
    Lit
    Svelte
    Others
√ "vue3" isn't a valid template. Please choose from below:  » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
>   JavaScript  #(这里选择JavaScript)
    TypeScript
    Customize with create-vue ↗
    Nuxt ↗
Scaffolding project in E:\博客\web...

Done. Now run:

  cd web
  npm install
  npm run dev

在这里插入图片描述

cd web
npm install
npm run dev

运行完成后可以看到下列输出
在这里插入图片描述
此时，我们按住键盘上的ctrl建，鼠标点击 http://localhost:5173/，可以在浏览器中打开我们创建的项目

Element Plus

Element Plus 是一套基于 Vue 3.0 的桌面 UI 组件库，是对 Element UI 的升级和重构版本。

安装element plus

npm install element-plus

在这里插入图片描述

在src/man.js中全局引入element plus

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import ElenmentPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(ElenmentPlus);
app.use(router);
app.mount('#app');

在这里插入图片描述

vue-router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。

安装vue-router，这里我们选择4版本

npm install vue-router@4

在这里插入图片描述

创建路由文件src/ruer.js

import { createRouter,createWebHistory } from "vue-router";
const routerHistory = createWebHistory();
import Home from '../view/home.vue';
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            name: Home,
            path: '/',
            component: Home
        }
    ]
})

export default router

在这里插入图片描述

修改 src/main.js，引入路由文件

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import ElenmentPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router.js'; //添加这一行
const app = createApp(App);
app.use(ElenmentPlus);
app.use(router); //添加这一行
app.mount('#app');