寫在前面的話：
這里是為2023屆學(xué)生完成一個管理系統(tǒng)（主要是后臺）的連續(xù)更新博客。持續(xù)時間為20天，每日練習(xí)時間約2-3小時。默認(rèn)已有系統(tǒng)開發(fā)的基礎(chǔ)知識，如SpringBoot、數(shù)據(jù)庫、HTML、CSS、JavaScript等，連載過程中，遇到細(xì)節(jié)問題也可以咨詢。QQ群：1140508453。視頻將在B站推出。
B站鏈接：
https://www.bilibili.com/video/BV1sC4y1J7KS/?spm_id_from=333.999.0.0&vd_source=cccb198db3b03d71b117484ed9dab175
基本工具準(zhǔn)備
- node 14.16.0+
- jdk 1.8
- mysql 5.7+
- Navicat Premium 15
- idea2021.1+
- Visual Studio Code
- 說明：除了jdk我們建議使用較為穩(wěn)定的1.8版本外，其余的均可以根據(jù)實際情況使用，如果已經(jīng)按照相關(guān)軟件，不需要特別準(zhǔn)備一樣的版本。
任務(wù)一 VUE+Element UI環(huán)境搭建
Vue現(xiàn)在有Vue2和Vue3，Element 推出 Element和Element plus。根據(jù)經(jīng)驗，我們推薦使用Vue2，這在項目創(chuàng)建的過程中可以選擇，與安裝沒關(guān)系，官網(wǎng)為：
鏈接: https://v2.cn.vuejs.org/
基于Vue2的Element官網(wǎng)為：
鏈接: https://element.eleme.io/#/zh-CN/component/installation
一、新建Vue2項目
1.安裝Vue腳手架，終端輸入npm install -g @vue/cli，回車。
npm install -g @vue/cli
2.開始新建Vue項目
（1）打開VS code，在終端轉(zhuǎn)到新建文件夾。
（2）終端輸入：vue create vue項目名稱。如vue create dormitory(創(chuàng)建一個名為dormitory的項目)，回車。
vue create dormitory
（3）選擇手動配置
（4）按如下圖進行配置，使用空格鍵選中。
（5）項目新建完成
（6）VS code中打開該項目，文件—打開文件夾。
3.項目初始結(jié)構(gòu)
4.幾個重要的初始文件（僅供參考，目前不需要做任何修改）。
（1）路由index.js
// An highlighted block
import 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 block
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
5.運行項目
終端輸入npm run serve，然后回車。
npm run serve
注意：如果不在當(dāng)前文件夾，可以使用cd命令先轉(zhuǎn)到當(dāng)前項目目錄下，然后進行運行。
（6）點擊： http://localhost:8081/，或者瀏覽器輸入運行地址?？吹饺缦马撁?，binggo!!!說明腳手架環(huán)境搭建成功。手動撒花。
二、安裝Element UI
1.安裝ElementUI
npm i element-ui -S
2. 在main.js中引入Element UI。
// An highlighted block
import 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官網(wǎng)，選擇按鈕組件，顯示代碼，然后拷貝其中的某段代碼。主要是為了測試環(huán)境，所以拷貝哪個代碼無所謂。
（2）修改home.vue文件，引入Element 按鈕組件。文章來源：http://www.zghlxwxcb.cn/news/detail-422207.html
// 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 /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView'
}
</script>
4.再次打開網(wǎng)頁，觀察home頁面。
（1）出現(xiàn)這種情況：
檢查：剛才改變的幾個文件是否保存，主要是main.js。
（2）如果前面為了按照Element，可能停止了運行服務(wù)（運行服務(wù)停止的方法為CTRL+C然后選擇Y）。重新在終端運行：npm run serve。
（3）運行正常結(jié)果應(yīng)該如下圖所示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-422207.html
環(huán)境搭建完畢。
到了這里，關(guān)于（一）前端環(huán)境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分離面向小白管理系統(tǒng)搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
