vue后台管理系统从0到1（2）

vue后台管理系统从0到1（2）

前端项目构建

nodejs版本

因为我们是要构建一个 vue + vite 的前端项目

然后就是需要我们的nodejs版本需要在 18 + ，这里给你们看一下我的 nodejs 版本

我的是 20.14.0版本，建议你们使用 nvm 下载并且使用，第一节上面有命令讲解，自行解决，不会搜索

然后就是nrm镜像源的问题，你们可以使用和我一样的，也可以换一下，不同的时间，你如果感觉 npm 下载速度很慢，就换一个试一试

再就是 npm 需要 npm 7+ 版本

开始构建 vue + vite 项目

首先，我们打开 vue + vite 官网

这是 vite 官网链接，你们直接点进去
vite官网链接

npm create vite@latest my-vue-app -- --template vue

这样就构建完成了

打开项目安装依赖

这里可以单击右边的安装或者是自己在命令行里使用命令

npm install

这里运行项目

npm run dev

这是运行后的界面，这样我们的项目就初期构建完成了。

项目清理

这里对项目进行清理

删除不必要的style.css文件

把main.js里的css文件导入删除掉

删除不必要的组件，helloworld.vue

清空app.vue的代码

输入 hellowordl，保存代码

这就OK了

项目依赖安装

npm install less  
npm install vue-router  
npm install element-plus  
npm install @element-plus/icons-vue


npm install less：安装Less，这是一个CSS预处理器，它扩展了CSS的功能，使得编写更加高效和灵活的CSS代码成为可能。
npm install vue-router：安装Vue Router，这是Vue.js的官方路由管理器。它允许你通过不同的URL访问应用的不同部分，以实现单页面应用（SPA）中的页面跳转。
npm install element-plus：安装Element Plus，这是一个基于Vue 3的桌面端组件库，提供了一系列高质量的UI组件。
npm install @element-plus/icons-vue：安装Element Plus的图标库，这允许你在Vue项目中使用Element Plus提供的图标。

安装完成后，打开 packge.json查看依赖项目，确认安装完成


发现都有就欧克了

配置别名

配置源文件别名，为了方便我们后面导入 src 文件，我们这里需要配置 src 别名为 @

打开vite.config.js文件![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7353b084c5e14d62976ed96252cd8fe5.png
加入代码如上，就是配置了别名

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find:"@",
        replacement:"/src"
      }
    ]
  },
});

再把这两个文件夹放入 assets

这里我提供出百度网盘地址，你们下载好放入就好了

通过百度网盘分享的文件：vue管理系统资料
链接：https://pan.baidu.com/s/1wbBX0RK5i0oslpsDMFVfSQ?pwd=6666 
提取码：6666

下载后，里面有所有本次项目的资料，你们自己找到这两个文件夹就好了

在 main.js 进行引入，这样还能检查一下我们呢配置别名是否成功

import '@/assets/less/index.less'

导入后保存，看浏览器样式


这就成功了

配置路由 vue-router

在src下创建 router 目录，并且新建 index.js
在src下创建 views 目录，并且新建 Main.vue

在 index.js 中写入创建路由的代码

import { createRouter, createWebHistory } from 'vue-router'

// 定义路由数组，注意这里变量名应为 routes
const routes = [
    {
        path: "/",
        name: "main",
        component: () => import("@/views/Main.vue")
    },
];

// 创建路由器实例，这里正确地引用了上面定义的 routes 变量
const router = createRouter({
    history: createWebHistory(),
    routes, // 使用正确的变量名 routes
});

export default router;

在Main.vue 中加入代码区分

<script setup>

</script>

<template>
我是Main组件
</template>

<style scoped>

</style>

在 main.js 中导入路由，并且 use

import { createApp } from 'vue'
import App from './App.vue'
import '@/assets/less/index.less'
import router from "@/router/index.js";

const app = createApp(App)
app.use(router);
app.mount('#app');

在App.vue 中挂载路由出口，这样我们的第一个主路由就配置好了

<script setup>

</script>

<template>
helloworld
  <RouterView></RouterView>
</template>

<style scoped>

</style>

重启项目：

就好了，本期终于结束了，累死我了