Spring Cloud + Vue前后端分離-第4章 使用Vue cli 4搭建管理控臺
4-1 使用vue cli創建admin項目
Vue 簡介
Vue作者尤雨溪在google工作時，最早只想研究angular的數據綁定功能，后面覺得這個小功能很好用，有前景，就再擴展，取名vue并放到github
vue、angular和微信小程序的代碼結構很像，學了一個，另外兩個上手就比較容易
學習建議:有空時多瀏覽文檔，熟悉vue提供了哪些功能。在實戰中遇到各種楊景，再回歸文欄尋找解決方案
Vue CLI
使用vue cli新建admin項目
注意：需要提前安裝好node.js,可以看這篇文章
如果想要idea終端是bash形式的，可以在設置的Terminal中選擇Shell path路徑為bash.exe
?
npm install -g @vue/cli可以用于初始安裝，也可以用于升級到最新版本
?
?
創建admin項目?
??
vuecli初始安裝帶了babel和eslint插件，bable:javascript編譯器;eslint:代碼規范檢查
?
?
?
點擊網址，就可以打開
??
package.json類似于pom.xml，里面配置各種js版本依賴
main.js是vue入口文件，用來初始化vue實例并集成所需要的插件
?
4-2 集成bootstrap后臺管理模板ace
響應式設計與bootstrap
Bootstrap中文網
Bootstrap來自Twitter，是目前最受歡迎的響應用框架，它基于html,css,javascript，簡單易擴展，因此有很多第三方的模板
柵格系統是bootstrap的布局核心，需要重點掌握
?
ace admin模板介紹
bootstrap有很多第三方模板，有很多機構或個人通過開發模板收費賺錢。模板種類很多，控臺、商城、企業官網、博客等
?
點擊github，下載zip，解壓文件夾
admin 增加 ace 模板
復制ace-master文件夾，粘貼到public文件夾下
所有項目中的靜態代碼，全部放在public目錄下
2.index.html中加入ace admin模板所需要的js css?
1.把login.html中<head></head>和引用第三方的js，如圖所示，拷貝到index.html中，把<script>放到<head>里的末尾
2.原來index.html中<head></head>里保留一句
是這個index.html
3.第二部保留那句話，是為了我們更好的去模仿
ctrl+r，輸入好替換的，然后點擊Replace All
批量替換小技巧:找到要批量替換的共同點，可以包含特殊字符，"= 等，替換的時候，也加上這些特殊字符，這樣又快又準
Ctrl+Z撤銷，Ctrl+Shift+Z重做
雙擊serve相當于啟動命令，啟動后點擊網址就可以訪問了
推薦把Autoscrol to Source和Autoscroll from Source勾選，文件快速定位，左右同步
Autoscroll to Source -> Open Files with Single Click
Autoscroll from Source -> Always Select Opened File
然后把login.html中的main-container拷貝到這里
把不用的先去掉?
然后serve啟動
在這里，可能會提示錯誤，$未定義，但是我們的js已經引入過了，我們需要改一下配置，在rules中加上"no-undef": "off"，再次啟動，就可以了
eslint，用于檢測代碼規范。是一把雙刃劍，有一些檢測沒必要，可以通過修改配置禁用掉?
1.簡化登錄頁面代碼?
一般后臺管理系統不允許注冊，需要由管理員來新建用戶
App.vue
<template><div class="main-container"><div class="main-content"><div class="row"><div class="col-sm-10 col-sm-offset-1"><div class="login-container"><div class="center"><h1><i class="ace-icon fa fa-leaf green"></i><span class="">控臺登錄</span></h1></div><div class="space-6"></div><div class="position-relative"><div id="login-box" class="login-box visible widget-box no-border"><div class="widget-body"><div class="widget-main"><h4 class="header blue lighter bigger"><i class="ace-icon fa fa-coffee green"></i>請輸入用戶名密碼</h4><div class="space-6"></div><form><fieldset><label class="block clearfix"><span class="block input-icon input-icon-right"><input type="text" class="form-control" placeholder="Username" /><i class="ace-icon fa fa-user"></i></span></label><label class="block clearfix"><span class="block input-icon input-icon-right"><input type="password" class="form-control" placeholder="Password" /><i class="ace-icon fa fa-lock"></i></span></label><div class="space"></div><div class="clearfix"><label class="inline"><input type="checkbox" class="ace" /><span class="lbl"> 記住我</span></label><button type="button" class="width-35 pull-right btn btn-sm btn-primary"><i class="ace-icon fa fa-key"></i><span class="bigger-110">登錄</span></button></div><div class="space-4"></div></fieldset></form></div><!-- /.widget-main --></div><!-- /.widget-body --></div><!-- /.login-box --></div><!-- /.position-relative --></div></div><!-- /.col --></div><!-- /.row --></div><!-- /.main-content --></div><!-- /.main-container -->
</template><script>
$('body').attr('class', 'login-layout light-login');
export default {name: 'App',
}
</script>
4-3 集成路由vue-router
會生成2個文件
別人拉取我的代碼到本地后，運行“npm install”會去下載package.json里配置的所有依賴的js，這時vue-router可能下載到的版本是3.6.6或其他版本
這樣下載到的版本肯定是3.6.5
login.vue里面的內容就是原來app里面的內容?
angular也有這兩種url展現形式，一般選擇history，美觀
router-view是路由嵌套標簽,一般配合父子路由使用
app.vue
<template><div id="app"><router-view/></div>
</template>main.js
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')
即便我在網址上面輸入其他內容
回車之后，依然是/login
根據需求可以將這些改成2，看起來更加緊湊好看
Ctr+AIt+L格式化代碼，就可以看到效果了
制作admin頁面
1.增加admin頁面
?2.增加路由配置，訪問/admin時，加載admin組件
登錄還有點問題，之后會繼續改進?
login頁面和admin頁面跳轉?
1.增加login頁面登錄按鈕點擊事件，跳轉到admin頁面
點擊登錄，就會跳轉到admin頁面
4-4 控臺歡迎頁面開發
mouted的使用
vue組件生命周期中有很多鉤子函數，mounted和created都是vue的初始化函數。
參考Vue 實例 — Vue.js
1.使用mounted解決組件初始化樣式的問題
現在，再次刷新，就是都正常的了?
結論:組件每次加載，mounted都會再次執行
使用router-view增加welcome子組件
1.增加welcome子組件，增加/admin/welcome子路由
router-view 一般配合子路由使用
注意:子路由的配置不要”/"開頭?
eslint實在是每次都要檢查，我干脆把它卸載掉，并且把相關的配置都刪除掉，就不會再檢查報錯?
?
{"name": "admin","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"},"dependencies": {"core-js": "^3.8.3","vue": "^2.6.14","vue-router": "^3.6.5"},"devDependencies": {"@babel/core": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","> 1%","last 2 versions","not dead"]
}
?控臺頁面元素修改
響應式設計的一個體現:根據不同屏幕分辨率不同，彈窗顯示在不同的位置
Ctrl+Y：刪除當前選中的行，只要某一行有部分被選中，這一行就會全部刪除
structure窗口，顯示當前文件的代碼層級結構
1.將面包屑導航、搜索、設置刪除
1.增加js依賴，解決navbar中，三個菜單的點擊彈窗效果。
js從ace/index.htmI復制
data-toggle:用于按鈕和模態框(彈出層)的事件綁定
ace/blank頁面引入js，只到這個位置，從ace/index頁面中再復制下面的js庫
放到public/index.html
2.使用相對路徑解決頭像路徑問題?
把其他的地方也進行替換
1.側邊欄去掉無用的菜單
2.底部文案修改
active:當前菜單是激活樣式 (高亮，粗體，字體顏色藍色等)。open :把當前菜單下的子菜單展開
![[MySQL] MySQL復合查詢（多表查詢、子查詢）](http://pic.xiahunao.cn/[MySQL] MySQL復合查詢（多表查詢、子查詢）)
進行鏈接預測)
