开始

image.png
访问login跳转到登陆页面。
image.png

image.png
安装路由
image.png
^只对大版本号3起作用，如果当前服务器版本最新是3.1.8版本，别人直接install可能更新下来的就是最新的 3版本中的 1.8的小版本。
image.png

image.png
package-lock文件就是把路由的版本号锁定。
image.png

image.png

image.png
输入login自动跳到登陆页
image.png
views下新建login.vue,把App.vue里面的内容复制到login.vue
image.png
app.vue就变成。里面只有一个路由的标签。
image.png
main.js的修改
image.png

根目录新增路由的配置文件
image.png

image.png

baseUrl是我们内置的变量
image.png
地址栏随便输入多少，都会跳转到login
image.png
login又是对应的login的组件
image.png

image.png

改成hash
image.png
login前面就加了一个#号
image.png

image.png
提交代码
image.png
app.vue改成了小写的
image.png
另外一个技巧，这里tab键改成了两个空格，这样整个页面紧凑一点。
image.png
Ctrl+Alt+S
image.png
都改成2
image.png
image.png

css也可以改
image.png
java目前保留4个空格
image.png
Ctrl+A 全选所有代码。
image.png
image.png
团队协作的时候，每个人本地设置的空格数量是不一样的。只对自己改过的代码 格式化即可。

image.png

制作admin页面

image.png
登陆之后应该要跳到一个后天管理的页面
image.png
选择这个模板页
image.png
找到blank页面，复制body下面的这两个div
image.png
新建admin.vue
image.png

template根下面放一个div 。然后把复制的两个div放在根div的标签里面。
image.png
配置admin的路由
image.png
这里是不允许有script标签的。删掉。
image.png
继续搜sc开头的。这是ac的设置，有一些争对菜单的设置。找到这里的script也删掉。
image.png
此时可以成功的启动
image.png
访问根目录默认会跳转到login
image.png
手动的访问admin。样式不大对 还需要调整。
image.png
blank.html内给body加了样式
image.png

但是在login里面我们给login加了两个class
image.png
这就导致了admin页面的样式不太对。
image.png
用了remove把上面两个class删除掉。下面再加上一个no-skin的样式。
image.png
页面变的正常了
image.png
再访问登陆页，登陆页的样式又不正常了。说明在admin上修改class的样式不对的，我们后续再去改。
image.png
提交代码
image.png

login跳转admin

image.png
先做一个假的登陆效果。点击的时候执行login函数。
image.png
push就是跳转到一个地址
image.png
image.png
进入了首页
image.png

提交代码

image.png
image.png
image.png
这里改成v-on的形式
image.png

结束