Element+Axios（Axios安装、nginx服务器）

第一步安装ElementUl组件库(在当前工程的目录下)，在命令行执行指令

npm install element-ui@2.15.3

npm run serve启动项目

第二步入口文件js当中引入ElementUI组件库
main.js
import也可以写在script标签中的顶部

import Vue from 'vue
import App from'./App.vue
import router from './router'
//引入ElementUI组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue .use(ElementUI);

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

第三步views目录下创建组件页面elementView

<template>
  <div>
<h1>((message}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message:"Hello vue222"
  }
},
methods:{
  }
}
</script>
<style>
</style>

关于在App.vue中引用views下面的组件页面ElementView.vue
直接即可呈现调用的组件
一般在vue的script下都生成数据模型data()进行return

P……分页组件
C+A+L格式规范化

基本页面布局
container布局容器
:外层容器
:顶栏容器
: 侧边栏容器
: 主要医域容器.
: 底栏容器

---

Axios安装
在项目目录下安装axios: npm install axios;
安装后需要重启项目。需要使用axios时，导入axios: import axios fromaxios';
关于Axios，Vue对象一创建挂载完成，自动发送请求加载数据
需要在methods平级定义钩子方法就是掌握mounted即可

mounted (){
//发送异步请求,获取数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) =>
  this.tableData = result.data.data;
}

表单中的性别数据1转化为字体男
利用slopt-scope获取scope来获取表单元素中的值

<el-table :data="tableData" border>
<el-table-column prop="name”label="姓名”width="180"></el-table-column>
<el-table-column prop="image”label="图像”width="180"></el-table-column>
<el-table-column label="性别” width="149">
<template slot-scope="scope">
{{scope.row.gender == 1 ?'男':'女'}}
</template>
</el-table-column>
<el-table-column prop="job”label="职位"width="140"></el-table-column>
<el-table-column prop="entrydate”label="入职日期”width="180"></el-table-column>
<el-table-column prop="updatetime" label="最后操作时间" width="230"</el-table-column>

通过scope获取数据来绑定图片地址

<el-table-column label="图像” width="188">
<template slot-scope="scope">
<img :src="scope.row.image">
</template>
</el-table-column>

Vue路由
点击侧边栏导航显示不同的页面
前端路由: URL中的hash(#号) 与组件之间的对应关系
url中#后边的部分就是hash也就是路由

介绍: Vue Router 是 Vue 的官方路由。
组成:
VueRouter:路由器类，根据路由请求在路由视图中动态渲染选中的组件
:请求链接组件，浏览器会解析成 <a>
:动态视图组件，用来染展示与路由路径对应的组件

//展示url对应的组件
<router-link to="/emp">员工管理</router-link>

npm install vue-router@3.5.1

大概是Vue项目自带router
找到router文件夹index.js的const route配置路由
还需再配置一个路径，根路径，然后路径是访问的默认路径页面
redirect即可重定向默认页面

const routes = [
{
path:'/emp'
name : 'emp
component: () => import(!../views/tlias/EmpView.vue')
},
{
path: '/dept',
name: 'dept'
component: () => import(!../views/tlias/DeptView.vue')
},
{
path:'/'
redirect:'/dept
}
]

打包部署

前后端开发工程要分开部署对应的服务器上
前端服务器最流行的nginx
第一步打包
找到npm脚本下的build生成dist文件夹
第二步部署
去nginx官网download选择stable稳定版本1.22
主要介绍conf、html、logs、temp
conf保存nginx配置文件
html存放i静态资源文件
logs运行时的日志文件
temp临时文件
nginx服务器默认占用80端口号
终端netstat -ano findStr 80查看80端口的占用进程id
这就不多说了，直接更换nginx端口号
打开conf/nginx.conf 修改serve listen 80为90即可启动打开任务管理器查看启动状态
访问localhost:90/即可访问到打包好的项目