web前端

最新推荐文章于 2024-08-06 21:02:26 发布

m0_74843120

最新推荐文章于 2024-08-06 21:02:26 发布

阅读量800

点赞数 8

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_74843120/article/details/140236789

版权

html

超文本标记语言文字信息，图片，音频，视频等文件

html标签是预定义好的

<html>
    <head>
        <title>html快速入门</title>
    </head>
    <body>
        <h1>hello html</h1>
        <img src="1.jpg"/>
    </body>
</html>

css

层叠样式表，控制页面的样式（表现）

引入方式

行内样式：写在标签style属性中

<!-- 行内样式 -->
    <!-- <h1 style="color: red;">焦点访谈：中国底气 新思想夯实大国粮仓</h1> -->

内嵌样式：style标签中（常写在head标签中）

<!-- 内嵌样式 -->
    <!-- <style>
        h1{
            /* color: red; */
            /* color: rgb(0,0,255); */
            /* color: #00f; */
        }
    </style> -->

外联样式：写在一个单独.css文件中（需通过link标签在网页中引入）

 <!-- 外联样式 -->
     <link rel="stylesheet" href="css/news.css">

text-decoration规定添加到文本的修饰,none表示定义标准的文本

line-height 行高

text-indent:内容缩进

text-align 文本水平对齐方式

border 边框属性:1px solid #000;

padding 内边距 margin 外边距 padding-top

js

javascript 跨平台，面向对象的脚本语言，控制网页行为，可交互

引入方式:

内部脚本：js代码定义在html中，必须位于<script>标签之间一般至于<body>元素底部，改善显示速度

外部脚本：

外部js文件中，只包含js代码，不包含<script>标签

js基础语法

书写语法

与java一样，变量名，函数名以及一切都区分大小写

结尾分号可有可无

//单行注释 /* */多行注释大括号表示代码块

<script>
    // 弹出警告框
    window.alert('hello js');
    // 写入html页面中
    document.write('hello js');
    // 控制台输出
    console.log('hello js');
</script>

变量

var 关键字声明可存放不同类型的值 var a=20; a='';

数字不能开头特点：全局变量可重复定义

let 局部变量，不能重复定义;

const :常量，不能改变

数据类型

number 数字(整数，小数,nan(not a number))

string 字符串，单双引都可以

boolean null 对象为空 undefined未初始化 typeof

运算符

==会进行类型转换 ===不会进行类型转换

将字符串转为数字:parseint

遇不到数字,则为nan

转boolean: 0，nan，空字符串，null，undefined为false其余为true

函数

(方法)被设计为执行特定任务的代码块

function functionName(参数1，参数2){} 或者 var functionName=function(参数1，参数2){}

形参不需要类型,返回值不需要定义类型,可在函数内部返回return

调用:函数名（实际参数）

对象

array数组

定义 var 变量名=new array(元素列表); var 变量名=[元素列表];

访问:arr[索引]=值;

属性:length 设置或返回数组中元素的数量

方法: forEach() 遍历数组中的每个有值的元素，并调用一次传入的函数

// forEach遍历数组中有值的元素
    var arr=[1,2,3,4];
    arr.forEach(function(e){
        console.log(e);
    })
    // ES6箭头函数:(...)=>(...) 简化函数定义
    arr.forEach((e)=>{console.log(e);})

push() 将新元素添加到数组的末尾，并返回新的长度

splice() 从数组中删除元素

string

var 变量名=new String("..."); 或者var 变量名="...";

length 长度

方法: charAt() 返回指定位置的字符

indexOf() 检索字符串

trim() 去除字符串两边的空格

substring(开始索引，end)提取字符串指定索引之间的字符含头不含尾

java

自定义对象格式

var 对象名={

属性名1:属性值1;

属性名2:属性值2;

函数名称:function(形参列表){} 简化:函数名称(形参列表){}

};

调用格式:对象名.属性名; 对象名.函数名;

json 文本数据载体

定义 var 变量名='{"key1":value1,...[数组],{对象}}';

json字符串转为js对象 var jsobject=JSON.parse(变量名);

js对象转换为JSON字符串 var jsonStr=JSON.stringify(jsobject);

BOM

浏览器对象模型

window

浏览器窗口对象获取 window.alert(""); window.可省略

属性:history :history只读引用 location:用于窗口或框架的location对象

navigator: navigator只读引用

方法：

alert() 显示待有一段消息和一个确认按钮的警告框

confirm():显示待有一段消息以及确认按钮和取消按钮的对话框确认返回true 取消false

setInterval():按照指定的周期（以毫秒）来调用函数或计算表达式

setTimeout():在指定的毫秒数后调用函数或计算表达式

// 获取
    window.alert("hello");
    alert("hello");
    // 方法
    // confirm -对话框 --确认：true 取消：false
    var i=0;
    setInterval(function(){
        i++;
        console.log("定时器执行了"+i+"次");
    },2000);
    // 定时器 -setTimeout ==延迟指定时间执行一次
    setTimeout(function(){
        alert("js");
    },3000);

Location

地址栏对象获取： window.location.属性; window.可省略

属性：href:设置或返回完整的url location.href="https://"; 自动跳转

DOM

core dom

文档对象模型 document文档对象 element 元素对象 :html head a h1

text文本对象教育 comment:注释对象 attrbute 属性对象 href

html 中的 element对象可通过document对象获取,而document对象通过window对象获取

document对象提供以下获取element元素对象的函数：

1根据id属性值获取，返回单个element对象：

var h1=document.getElementById('h1');

2根据标签名获取，返回element对象数组:

var divs=document.getElementsByTagName('div');

3根据那么属性值获取，返回element对象数组：

var hobbys=document.get.ElementByName('hobby');

4根据class属性值获取，返回element对象数组

var clss=document.getElements,ByClassName('cls');

查手册，属性方法 w3school.com.cn

var divs=document.getElementsByClassName('cls'); 获取

var div1=divs[0]; 第一个数组的值

div1.innerHTML='1123'; 修改页面内容

var divs=document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML+="<font color='red'>verygood</font>";
    }

事件

html事件是发生在html元素上的“事情”：按钮被点击鼠标移动到元素上按下键盘按键

事件监听 js可以在事件被侦测到时执行代码

事件绑定

通过html标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
   function on(){
    alert('点击了');
   }
</script>

通过dom元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
   document.getElementById('btn').onclick=function(){
    alert('我被点击了');
   }
</script>

vscode

插件

chinese language pack ，code spell checker，html css support ，javascript code snippets，mithril Emmett， pathintellisence, vue3 snippets, vuehelper,auto close tag, auto rename tag, beautify, bracket pair colorizer, open in browser, vetur, intellij idea keybingings

! 回车创建文件

vue

概述

前端js框架基于MVVM 双向绑定官网 https://v2.cn.vuejs.org/https://v2.cn.vuejs.org/

下载vue.js并导入

快速入门

新建html页面，引入vue.js文件

<script src="js/vue.js"></script>

在js代码区域，创建vue核心对象，定义数据模型

<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            message:"hello vue"
        }
    })
</script>

编写视图

<div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

常用指令

v-bind

为html标签绑定属性值，设置href，css等样式

<div id="app">
        <a :href="URL">链接一</a>
        <a v-bind:href="URL">链接二</a>
  </div>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            URL:"https://www.baidu.com"
        }
    })
</script>

v-model

在表单元素上创建双向数据绑定

<div id="app">
        <a :href="URL">链接一</a>
        <a v-bind:href="URL">链接二</a>
        <input type="text" v-model="URL"> //可修改URL的值
    </div>
</body>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            URL:"https://www.baidu.com"
        }
    })
</script>

v-on

为html标签绑定事件

<div id="app">
        <input type="button" value="点击了" v-on:click="handle()">
        <input type="button" value="点击了" @click="handle()">
 </div>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
        
        },
        methods: {
            handle:function(){
                alert("点击了");
            }
        }
    })
</script>

v-if v-else-if v-else

条件性的渲染某元素，判定为true时渲染，否则不渲染

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判断，为：
        <span v-if="age<=35">年轻人（35及以下）</span>
        <span v-else-if="age>35 && age<60">中年人（35-60）</span>
        <span v-else>老年人(60及以上)</span>
    </div>
</body>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            age:20
        },
        methods: {
            
        }
    })
</script>

v-show

根据条件展示某元素，区别在于切换的是display属性的值

与v-if同理f12中可以看到但不展示

v-for

列表渲染，遍历容器的元素或者对象的属性

<body>
    <div id="app">
        <div v-for="addr in addrs"> {{addr}} </div>
        <hr>
        <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
    </div>
</body>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{
            addrs:["北京","上海","西安"]
        },
        methods: {

        }
    })
</script>

vue生命周期

<body>
    <div id="app">
        
    </div>
</body>
<script>
    // 定义vue对象
    new Vue({
        el:"#app",//vue接管区域
        data:{

        },
        methods: {

        },
        mounted () {
            alert("vue挂载完毕，发送请求获取数据");
        }
    })

ajax

异步的javascript和XML

作用：数据交换： ajax可以给服务器发送请求，并获取服务器响应的数据

异步交互：不重新加载整个页面的情况下，更新部分网页，如搜索联想，用户名的校验

原生ajax

<body>
        <input type="button" value="获取数据" onclick="getData()">
        <div id="div1"></div>
</body>
<script>
   function getData(){
    // 1创建XMLHttpRequest
    var xmlHttpRequest=new XMLHttpRequest();
    // 2发送异步请求
    xmlHttpRequest.open('GET','www.baidu.com');
    xmlHttpRequest.send;//发送请求
    // 3获取服务响应数据
    xmlHttpRequest.onreadystatechange=function(){
        if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status== 200){
            document.getElementById('div').innerHTML=xmlHttpRequest.responseText;
        }
    }
   }
</script>

axios

对原生ajax进行了封装，简化书写，快速开发 https://www.axios-http.cn/https://www.axios-http.cn/

入门

    <script src="js/axios.js" type="model"></script>
    <script src="js/axios.min.js" type="model"></script> //这两个引入部分可能不对
</head>
<body>
        <input type="button" value="获取数据get" onclick="get()">
        <input type="button" value="删除数据post" onclick="post()">
</body>
<script>
   function get(){
    //通过axios发送异步请求-get
    axios({
        method:"get",
        URL:"http://localhost:8080/Ajax_S1_war/ajax01"
    }).then(result=>{
        console.log(result.data);
    })
    axios.get("http://localhost:8080/Ajax_S1_war/ajax01").then(result=>{
        console.log(result.data);
    })
   }
   
   function post(){
    //通过axios发送异步请求-get
    axios({
        method:"post",
        URL:"https://www.baidu.com",
        data:"id=1"
    }).then(result=>{
        console.log(result.data);
    })
    axios.post("https://www.baidu.com","id=1").then(result=>{
        console.log(result.data);
    })
   }
</script>

前后端分离开发

介绍

前后端混合开发

前后端分离开发

YAPI(下次再补充)

api管理平台，提供接口管理服务 http://yapi.pro

使用：添加项目，添加分类，添加接口

高级mock设置初始值编辑接口

前端工程化

环境准备

安装nodejs 验证在cmd中node -v 配置npm全局安装路径npm config set prefix "E:\node.js"（安装路径nodejs）

切换npm的淘宝镜像 npm config set registry https://registry.npmmirror.com

安装vue-cli npm install -g @vue/cli 检测版本vue --version

vue项目

创建

命令行 vue create vue-project01

图形化界面 vue ui

创建项目 , 包管理器 npm, 手动 ,router路由, 语法规范formatter config 第一个eslint with error...

vscode中打开

目录结构

启动

进入到项目目录下才可

vscode中npm脚本，第一个serve vue-cli-service s..后的小三角

或者命令行npm run serve

vue配置端口

ctrl +c 终止项目

vue项目开发

vue组件库Element

基于vue的组件库组件：组成网页的部件，如超i链接，按钮，图片，表单，分页条等

https://element.eleme.cn/#/zh-CN

快速入门

安装ElementUI组件库（在当前工程的目录下），命令行中执行

npm install element-ui@2.15.3

引入ElementUI组件库

src中的main.js中引入

//引入elementui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

访问官网复制组件代码调整

app.vue

<template>
  <div>
    <!-- <h1> {{ message }} </h1> -->
     <!-- element组件 -->
    <element-View></element-View>  
  </div>
</template>
<script>
/* 导入路径 */
import ElementView from './views/element/ElementView.vue'
export default {
  components:{ElementView},
  data () {
    return {
      message:"hello vue"
    }
  },
  methods: {
    
  },
}
</script>
<style>

</style>

新建.vue页面element找模板

常见组件

表格

分页

dialog

 <!-- dialog对话框 -->
    <!-- Table -->
    <el-button type="text" @click="dialogTableVisible = true"
      >打开嵌套表格的 Dialog</el-button
    >
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="date"
          label="日期"
          width="150"
        ></el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
         dialogTableVisible: false,
      
    };
  },
  methods: {

    };
</script>

form

案例完成员工管理页面开发通过axios完成数据异步加载

创建页面，完成基本布局

vue用驼峰命名必须

app.vue中

<template>
  <div>
    <!-- 员工管理 与创建的.vue名字一致 -->
     <emp-view></emp-view>
  </div>
</template>
<script>
/* 导入路径 */
import EmpView from './views/tlias/EmpView.vue';
export default {
  components: {
    EmpView 
  },
  data() {
    return {
      message: "hello vue",
    };
  },
  methods: {},
};
</script>
<style>
</style>

element中的container中找

加入创建的.vue中

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column label="操作">
              <el-button type-="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
};
</script>
<style>
</style>

布局中各个部分的组件实现

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                v-model="searchForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
            <el-table-column label="操作">
              <el-button type-="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br>
          <!-- 分页条 -->
          <el-pagination
            background
            layout="sizes,prev, pager, next,jumper,total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        date: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
  },
};
</script>
<style>
</style>

列表数据的异步加载，并渲染展示

vue中使用axios：项目目录下安装axios: npm install axios;

使用axios，script中导入axios： import axios from 'axios';

<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
        >tlias智能学习辅助系统</el-header
      >
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >
              <el-menu-item index="1-1">部门管理</el-menu-item>
              <el-menu-item index="1-2">员工管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 表单 -->
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="searchForm.gender" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                v-model="searchForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格 -->
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column label="图像" width="180">
              <template slot-scope="scope">
                <img :src="scope.row.image" width="100px" height="70px"/>
              </template>
            </el-table-column>
            <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.gender == 1 ? "男" : "女"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button type-="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
          </el-table>
          <br />
          <!-- 分页条 -->
          <el-pagination
            background
            layout="sizes,prev, pager, next,jumper,total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="1000"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      searchForm: {
        name: "",
        gender: "",
        date: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert("查询数据");
    },
    handleSizeChange: function (val) {
      alert("每页记录数变化" + val);
    },
    handleCurrentChange: function (val) {
      alert("页码发生变化" + val);
    },
  },
  mounted() {
    //发送异步请求，获取数据
    axios.get("/https://yapi.pro/mock/446453/usermanage").then((result) => {
      this.tableData = result.data.data;
    });
  },
};
</script>
<style>
</style>

vue路由

url中的hash（#号）与组件之间的对应关系

安装

npm install vue-router@3.5.1

定义路由

router index.js设置路径

const routes = [
  {
    path: '/emp',
    name: 'emp',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/tlias/EmpView.vue')
  }
]

main.js导入router

import router from './router'

项目.vue中加链接

<router-link to="/emp">员工管理</router-link>

app.vue中加如图来动态展示

<template>
  <div>
      <router-view></router-view>
  </div>
</template>

最后访问/时，改为访问/emp index.js中

const routes = [
  {
    path: '/',
    redirect: "/emp"
  }
]

打包部署

打包

部署nginx

https://nginx.org/

serve listen 改为90

m0_74843120

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
web前端

// 定义vue对象new Vue({el:"#app",//vue接管区域data:{})
复制链接

扫一扫

web前端

html

标签

css

js

引入方式:

js基础语法

书写语法

变量

数据类型

运算符

函数

对象

array数组

string

java

json 文本 数据载体

BOM

window

Location

DOM

core dom

事件

事件绑定

vscode

vue

概述

常用指令

v-bind

v-model

v-on

v-if v-else-if v-else

v-show

v-for

vue生命周期

ajax

原生ajax

axios

入门

前后端分离开发

介绍

前后端混合开发

前后端分离开发

YAPI(下次再补充)

前端工程化

环境准备

vue项目

创建

目录结构

启动

vue配置端口

vue项目开发

vue组件库Element

快速入门

安装ElementUI组件库（在当前工程的目录下），命令行中执行

引入ElementUI组件库

访问官网复制组件代码调整

常见组件

表格

分页

dialog

form

案例 完成员工管理页面开发通过axios完成数据异步加载

创建页面，完成基本布局

布局中各个部分的组件实现

列表数据的异步加载，并渲染展示

vue路由

安装

定义路由

打包部署

打包

部署nginx

json 文本数据载体

案例完成员工管理页面开发通过axios完成数据异步加载