433 vue day09

使用脚手架初始化项目

1. vue init webpack shop_admin_37
2. npm run dev
3. 【config文件夹中的index.js中修改 项目的端口号、useEslint的属性值。】

把没有用的删除掉

Hello Word 这个 组件删除

配置 路由

1. 安装路由 npm i vue-router

2. 创建一个 router/router.js

3. 步骤

• 引入

import Vue from 'vue'
import VueRouter from 'vue-router'

// 在模块化工程中 Vue.use()
Vue.use(VueRouter)

• 实例化
  const router = new VueRouter()
• 导出
  export default router

4. 在 main.js 中引入 并且挂载

import router from './router/router.js'

router 挂载到vue实例里即可

创建两个组件 (Login , Home) 根据路由规则显示出来

1. 创建两个组件(单文件组件) Login.vue / Home.vue
2. 按照具体的四个步骤

• 入口（暂时手动调试）
• 规则
• 组件 (引入组件)
• 出口

element 的基本 使用

官网 :https://element.eleme.cn/#/zh-CN/component/installation

1. 安装 : npm i element-ui -S
2. 快速上手 : > 完整引入

// main.js 中引入
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 安装一下
Vue.use(ElementUI)

3. 使用 : 官网拷贝组件的代码复制、粘贴、修改即可

login 页 => 登录表单组件

1. 居中

• 外面加 el-row、 el-col

<el-row type='flex' justify='center' align='middle' >
  <el-col :span='8'></el-col>
</el-row>

• 垂直没有居中, 原因是 el-row 高度就这么高
• html, body, #app, .el-row

开始登录

1. 安装 axios

2. 引入 import axios from 'axios'

3. 使用
   axios.post('XXXXXX/login', this.rulesForm).then(res => {})

4. 提示

• 成功/失败
  this.$message({
  message : '登录成功', / '登录失败'
  type : 'success', / 'error'
  duration :800
  })

5. 跳转 【编程式导航】
   this.$router.push('/home')

scoped

作用 : 当前组件内的样式， 只会对当前组件(当前组件的标签或者子组件)起效果
问题 : login 页和 home 页都有一个 h1 标签(组件), 然后在 login 页里面设置 h1 为红色,但是 home 页里的 h1 也变红了
原因 : 组件内的样式进行了共享【复用】
解决办法 : 给每一个组件对应的 style 标签上添加 scoped

原理 :
1. 在 DOM 上添加了自定义属性 data-v-唯一值 : (每个组件里都有一个对应的唯一值)
   login : <h1 data-v-08b4fdc3></h1>
   home  : <h1 data-v-74b1de62 ></h1>

2. 设置样式 : 通过属性选择器 来设置样式
   login : h1[data-v-08b4fdc3] { color : red }
   home  : h1[data-v-74b1de62] {}

不良反应 : html, body, #app { height:100% } 不生效了，登录表单没有垂直居中了。
原因 : 组件内设置的样式，只针对于当前组件内的标签或者子组件起效果, html、body 等不属于当前组件内的
解决方案：可以设置为全局的
以后使用style， 都记得加上 scoped

home 页 - 布局容器

home 页 - 头部布局