vue3.0脚手架、路由、Element Plus安装案例：收录于Vue 3.0 后台管理系统案例

前端基地

已于 2024-08-14 16:28:54 修改

阅读量194

点赞数

分类专栏： vue3.0构建后台管理系统实战秘籍文章标签： vue3.0后台管理系统案例 vue3.0 vue3.0脚手架安装 node版本查询 node版本切换 vue router安装 element ui安装

于 2024-08-14 14:23:41 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/141189393

版权

vue3.0构建后台管理系统实战秘籍专栏收录该内容

1 篇文章 0 订阅

订阅专栏

环境配置

Vue 3.0 脚手架（Vite）安装

node版本查询与切换

首先，需要着重强调的是，您的电脑必须成功安装 Node.js ，并且建议安装的版本为 18.3 及以上。您能够通过在终端或者命令提示符中输入“node -v”这一指令，便捷地对已安装的 Node.js 版本进行查验。

倘若您期望列出当前系统中已安装的所有 Node.js 版本，此时可以巧妙地运用 nvm（也就是 Node Version Manager，节点版本管理器）所提供的相关命令，具体操作如下：

nvm ls  
    21.6.2  
  * 14.17.3 (Currently using 64-bit executable)

假如您打算使用 Node.js 的 21.6.2 版本，只需执行如下命令，nvm 便会将当前的 Node.js 版本无缝切换至 21.6.2 ：

nvm use 21.6.2  
Now using node v21.6.2 (64-bit)

关于当前安装的 Node.js 版本的详细信息，呈现情况如下所示：

node -v  
v21.6.2

创建一个vue应用

创建的项目将采用基于 Vite 的构建设置，这一设置为我们运用 Vue 的单文件组件 (SFC) 提供了极大的便利和灵活性。首先，创建一个全新的项目目录，并在该目录中打开终端。接着，在命令行中运行“npm create vue@latest”命令。当您在安装 Vue 脚手架的过程中看到“Ok to proceed?”这一提示时，它通常是在询问您是否确定要继续当前的操作。在此情况下，您只需在键盘上输入“y”即可确认继续。

具体情况如下所示：

npm create vue@latest  
Need to install the following packages:  
create-vue@3.10.4  
Ok to proceed? (y) y

接下来，将会安装并执行“create-vue”，它是由 Vue 官方所提供的项目脚手架工具。在这个过程中，您将会看到一系列诸如 TypeScript 和测试支持等可选功能的提示。倘若您对于是否开启某个特定功能不太确定，那么直接按下回车键选择“ No ”即可。

具体情况如下所示：

Vue.js - The Progressive JavaScript Framework  
  
√ Project name: ... QIANDUANJIDI-CMS  
√ Package name: ... qianduanjidi-cms  
√ Add TypeScript? ... No / Yes  
√ Add JSX Support? ... No / Yes  
√ Add Vue Router for Single Page Application development? ... No / Yes  
√ Add Pinia for state management? ... No / Yes  
√ Add Vitest for Unit Testing? ... No / Yes  
√ Add an End-to-End Testing Solution? » No  
√ Add ESLint for code quality? ... No / Yes  
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes  
  
Scaffolding project in D:\后台管理系统\QIANDUANJIDI-CMS...  
  
Done. Now run:

在项目成功创建之后，您需要按照以下步骤来安装依赖：

cd .\QIANDUANJIDI-CMS\  
npm install  
  
added 1 package, removed 39 packages, changed 5 packages, and audited 32 packages in 3m  
  
4 packages are looking for funding  
  run `npm fund` for details  
  
found 0 vulnerabilities

最后，启动开发服务器：

npm run dev  
  
> qianduanjidi-cms@0.0.0 dev  
> vite  
  
  
  VITE v5.4.0  ready in 458 ms  
  
  ➜  Local:   http://localhost:5173/  
  ➜  Network: use --host to expose  
  ➜  press h + enter to show help

备注：

在选择功能模块时，如果您对某个功能在未来的需求不太明确，建议先选择“ No ”。这样做可以避免引入不必要的复杂性，使项目保持相对简洁和易于管理。而在安装依赖的过程中，可能会由于网络状况不稳定或其他各种因素，导致一些包的安装出现问题。此时，您可以根据具体的错误提示信息，采取相应的、有针对性的解决措施，以确保项目的顺利推进。

运行结果：

Vue Router安装

安装vue-router@4

打开终端，切换至您的 Vue 项目所在的目录。接下来，使用如下命令来安装 Vue Router：

npm install vue-router@4

在安装过程中，显示如下信息：

added 2 packages, and audited 34 packages in 3s  
  
5 packages are looking for funding  
  run `npm fund` for details  
  
found 0 vulnerabilities

配置路由

创建一个名为 router.js 的文件，并在其中进行路由配置：

// 首先，从 vue-router 库中导入 createRouter 函数和 createWebHistory 函数 
import { createRouter,createWebHistory } from 'vue-router';  
  
// 然后，引入自定义的组件 Home 和 About
import Home from '@/components/home/index.vue';  
import About from '@/components/about/index.vue';  
  
// 接下来，定义路由规则
const routes = [  
    {   
        path: '/home',   
        component: Home   
    },  
    {   
        path: '/about',  
        component: About   
    }  
];  
  
// 随后，创建 router 实例 
const router = createRouter({  
    history:createWebHistory(),  
    routes  
});  
 

// 最后，将创建好的 router 实例导出，以便在其他模块中使用
export default router;

分析：

首先，从 vue-router 库中引入了两个极为关键的函数，分别是用于创建路由实例的 createRouter 函数以及用于设定路由历史模式的 createWebHistory 函数。这为后续的路由配置奠定了基础。

紧接着，导入了两个精心自定义的组件，即 Home 和 About。这两个组件在后续的路由配置过程中，将扮演重要角色，作为路由路径所对应的实际展示内容。

之后，通过 routes 数组清晰地定义了两条路由规则。每条路由规则都精准地涵盖了路径（path）以及与之紧密相对应的组件（component）。这确保了在不同的路径访问时，能够准确加载对应的组件，实现页面内容的切换和展示。

接着，借助 createRouter 函数成功创建了一个路由实例 router 。在创建过程中，将路由的历史模式配置为基于浏览器历史的 createWebHistory ，并将之前精心定义的路由规则数组 routes 准确无误地传递给了该路由实例。这使得路由实例能够根据规则进行页面的跳转和管理。

最后，将创建完成的路由实例 router 进行导出。如此一来，它便能够在其他模块中得以灵活使用。通常情况下，会在 Vue 应用的入口文件中进行注册和运用，从而实现整个应用的路由功能。

总的来讲，这段代码出色地完成了 Vue Router 的基础配置工作。不仅条理清晰地定义了路由规则，还精心创建出了能够在整个应用里稳定使用的路由实例，为应用的页面导航和内容展示提供了坚实的架构支持。

安装配置

在main.js中安装路由：

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

分析：

首先，从 vue 库中精准地导入了 createApp 函数。同时，从本地文件 './App.vue' 中引入了根组件 App，并从 './router' 成功载入了路由配置对象 router 。这为后续的应用创建和配置做好了充分的准备。

接下来，创建了一个 Vue 应用实例，并将 App 组件明智地设定为根组件。这确立了应用的基础架构和初始展示内容。

而后，向此应用实例巧妙地注册了路由功能。这一关键步骤使得应用能够依据事先定义好的路由规则，实现页面的流畅切换与精彩展示，为用户提供丰富的交互体验。

最后，将 Vue 应用挂载至页面中 id 为 app 的 DOM 元素上。这一操作确保了应用能够在指定的页面位置完美呈现，与用户进行有效的互动和交流。

总的来讲，这段代码实现了 Vue 应用的创建、路由的注册以及应用的挂载操作。通过这一系列精心设计的步骤，确保了整个 Vue 应用能够在指定的页面位置正常运转和交互，为用户带来优质的使用体验。

展示路由

在 App.vue 中使用 <router-view> 来展示当前路由的组件：

<template>  
    <router-view></router-view>  
</template>  
  
<script>  
export default {};  
</script>  
  
<style scoped>  
</style>

分析：

在 <template> 标签内部，<router-view> 乃是由 Vue Router 所提供的一个独特的占位符组件。其作用至关重要，当路由规则成功匹配到对应的组件时，被匹配的组件内容就会在此处进行渲染并予以精彩展示。

综上所述，这段代码构成了一个 Vue 组件的基础架构。其核心要点在于巧妙地借助 <router-view> 实现对路由匹配组件内容的动态呈现，为应用的页面切换和内容更新提供了高效的实现方式。

运行结果：

首页：http://localhost:5173/home

关于页面：http://localhost:5173/about

Element UI安装

安装element-plus

在 Vue 项目中，首先要打开终端，并准确无误地切换至项目所在的目录。接下来，就可以通过以下命令来安装 Element UI：、

若选择使用 NPM：

此命令会借助 NPM 包管理器，将 element-plus 精准地安装到项目之中，并将其妥善地作为项目的依赖予以保存。

npm install element-plus --save

若决定使用 Yarn：

Yarn 同样具备出色的能力，能够顺利地完成 element-plus 的安装工作，并将其精准地添加到项目的依赖列表当中。

yarn add element-plus

若倾向于使用 pnpm：

pnpm 也完全可以实现 element-plus 的顺畅安装。

pnpm install element-plus

引入element-plus

在 main.js 文件中开展 Element UI 的引入操作：

首先：将 element-plus 模块引入进来，并加载其对应的样式文件。

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

然后进行注册：通过.use() 方法，将 ElementPlus 成功注册到 Vue 应用之中，使其能够在整个应用范围内被有效使用，从而为项目提供丰富多样的 UI 组件和精美时尚的样式。

createApp(App)  
.use(ElementPlus)

总结：

如此一来，就圆满地完成了 element-plus 的安装和引入工作，为构建拥有精美界面的 Vue 应用奠定了坚实的基础。

使用element-plus

在 Vue 中运用部分 Element UI 的组件，例如构建了一个简易的 Vue 组件，呈现出了一个标题以及一个具备数据绑定内容的按钮，并且对相关数据进行了定义。借由这样的方式，达成了组件内部数据与视图的交互。以此来检测其安装是否成功以及功能是否处于正常状态。

代码如下：

<template>  
    <div>  
      <h2>这是首页</h2>  
      <el-button>{{ message }}</el-button>  
    </div>  
</template>  
    
<script>  
export default {  
  data(){  
    return {  
      message:'Hello Element Plus'  
    }  
  }  
};  
</script>  
  
<style scoped>  
</style>

运行结果：