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

html 复制代码

<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

angular也有这两种url展现形式，一般选择history，美观

router-view是路由嵌套标签,一般配合父子路由使用

app.vue

javascript 复制代码

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

main.js

javascript 复制代码

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实在是每次都要检查，我干脆把它卸载掉，并且把相关的配置都删除掉，就不会再检查报错

javascript 复制代码

{
  "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"
  ]
}