位置: IT常识 - 正文
（一）前端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建(前端环境部署到服务器开发环境)
编辑：rootadmin推荐整理分享（一）前端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建(前端环境部署到服务器开发环境)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:前端运行环境,前端环境搭建,前端 环境,前端需要配置哪些环境变量,前端环境搭建,前端环境的安装与配置,前端运行环境,前端运行环境,内容如对您有帮助，希望把文章链接给更多的朋友！
这里是为2023届学生完成一个管理系统（主要是后台）的连续更新博客。持续时间为20天，每日练习时间约2-3小时。默认已有系统开发的基础知识，如SpringBoot、数据库、HTML、CSS、JavaScript等，连载过程中，遇到细节问题也可以咨询。QQ群：1140508453。视频将在B站推出。
基本工具准备node 14.16.0+jdk 1.8mysql 5.7+Navicat Premium 15idea2021.1+Visual Studio Code说明：除了jdk我们建议使用较为稳定的1.8版本外，其余的均可以根据实际情况使用，如果已经按照相关软件，不需要特别准备一样的版本。任务一 VUE+Element UI环境搭建Vue现在有Vue2和Vue3，Element 推出 Element和Element plus。根据经验，我们推荐使用Vue2，这在项目创建的过程中可以选择，与安装没关系，官网为：
链接: https://v2.cn.vuejs.org/
基于Vue2的Element官网为：
链接: https://element.eleme.io/#/zh-CN/component/installation
一、新建Vue2项目1.安装Vue脚手架，终端输入npm install -g @vue/cli，回车。npm install -g @vue/cli2.开始新建Vue项目
（1）打开VS code，在终端转到新建文件夹。 （2）终端输入：vue create vue项目名称。如vue create dormitory(创建一个名为dormitory的项目)，回车。
vue create dormitory（3）选择手动配置 （4）按如下图进行配置，使用空格键选中。 （5）项目新建完成 （6）VS code中打开该项目，文件—打开文件夹。
3.项目初始结构4.几个重要的初始文件（仅供参考，目前不需要做任何修改）。（1）路由index.js
// An highlighted blockimport Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }]const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})export default router（2）main.js
// An highlighted blockimport Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({ router, render: h => h(App)}).$mount('#app')5.运行项目终端输入npm run serve，然后回车。
npm run serve注意：如果不在当前文件夹，可以使用cd命令先转到当前项目目录下，然后进行运行。 （6）点击： http://localhost:8081/，或者浏览器输入运行地址。看到如下页面，binggo!!!说明脚手架环境搭建成功。手动撒花。
二、安装Element UI1.安装ElementUI npm i element-ui -S2. 在main.js中引入Element UI。// An highlighted blockimport Vue from 'vue'import ElementUI from 'element-ui';// 添加import 'element-ui/lib/theme-chalk/index.css'; // 添加import App from './App.vue'import router from './router'import './assets/gloable.css'Vue.config.productionTip = false Vue.use(ElementUI);// 添加new Vue({ router, render: h => h(App)}).$mount('#app')3.测试Element是否引入成功。（1）打开Element官网，选择按钮组件，显示代码，然后拷贝其中的某段代码。主要是为了测试环境，所以拷贝哪个代码无所谓。 （2）修改home.vue文件，引入Element 按钮组件。
// An highlighted block<template> <div class="home"> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> </div></template><script>// @ is an alias to /srcimport HelloWorld from '@/components/HelloWorld.vue'export default { name: 'HomeView'}</script>4.再次打开网页，观察home页面。（1）出现这种情况： 检查：刚才改变的几个文件是否保存，主要是main.js。 （2）如果前面为了按照Element，可能停止了运行服务（运行服务停止的方法为CTRL+C然后选择Y）。重新在终端运行：npm run serve。 （3）运行正常结果应该如下图所示：
环境搭建完毕。上一篇：html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)(简单html代码)
下一篇：测试工程师正遭「革命」 AI将改写测试模式(测试工程师有前途么)
