VSCODE常用插件

  1. code spell checker
  2. HTML CSS support
  3. Javascript（es6）code snippels
  4. Mithril Emmet (VSCODE 已经内置)
  5. path intelligence
  6. VUE 3 Snippets
  7. VueHelper
  8. Auto Close Tag
  9. Auto Rename Tag
  10. Beautify
  11. Bracket Pair Colorizer
  12. open in browser
  13. Vetur
  14. IntelliJ IDEA Keybindings

JAVA基础

现在配置java环境的时候只需要把java安装目录的bin添加到系统path即可

使用final限制编辑，例如final int myNum = 15;
使用+组合字符串和数字输出
String name = “John”;
System.out.println(“Hello “ + name);

前端

HTML

文本

span
特殊标签,没有任何功能，仅用于展示样式<span></span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p></p>段落
首行缩进
p {
    text-indent:35px; 缩进
    line-height:40px; 行高
}

加粗<b> <strong>
换行<br/> 分割线<hr/> 空格&nbsp;

对齐
span { 
    text-align:center;
    text-align:left;
    text-align:right;
 }

超链接

_self 当前打开
_blank 新页面打开

1
<a href=".." target="_self/_blank">words</a>

去掉超链接蓝色和下划线
a{
text-decoration:none; 定义标准的文本
color:blank;
}
text-decoration-line 设置要使用的文本装饰类型（如下划线、上划线、划线）。
text-decoration-color 设置文字装饰的颜色。
text-decoration-style 设置文本装饰的样式（如实心、波浪形、点线、虚线、双线）。
text-decoration-thickness 设置装饰线的粗细。

表格和表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<tr><th>123</th>           </tr>
<tr><td>123</td>           </tr>

</table>
<form action="" method="post">
    输入<input type="text" name="username"> //type有很多标签 
    <select> 下拉列表 //使用option定义选项
    <textarea> 文本域
</form>
action 定义表单发送数据url
method GET or POST
get 在url中携带数据 post适合大数据传递
<label><radio>文字 </label>

媒体

图片

1
img <img src="" width=10px height=10px>

音视频

1
2
3
<video src="" ,controls="controls",width="",height=""></video>
<audio src="",controls="controls"></audio>

css

选择器

元素选择

1
2
3
4
5
6
7
8
9
10
11
12
13
元素选择
h1{
    color:red;
    font-size:13px;
}
id选择
#idname {
    color:red;
}
class选择
.classname {
    color:red;
}

优先级 id>class>元素

css加载

CSS引入方式

  • 行内：卸载style标签里，不推荐
    1
    <h1 style="xxx:xxx;xxx:xxx;">content</h1>
  • 内嵌：卸载style标签里，一般写在head里
    1
    2
    3
    4
    5
    6
    7
    <style>
        h1{
            xxx:xxx;
            xxx:xxx;
        }
    </style>

  • 外联css：单独css文件，需要link引入(重要)
    1
    **<link rel="stylesheet" href=" ">**

颜色：

  • 关键字：red,green,blue
  • RGB:rgb(red, green, blue) 红绿蓝 0~255 ，灰度通常使用三个参数的相等值来定义：rgb(180, 180, 180)
  • RGBA:rgb(0,0,0,1) alpha 参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字
  • 16: #000000 #ff0000 两位相同可以缩写 #000 #f00

盒子模型

常用div和span
div一行设置一个，可以设置宽高
span 一行可以多个，不可以设置宽高

1
2
3
4
5
6
7
8
9
10
div {
    width: 200px;（也可设置 65%）
    height: 200px;
    background-color: black
    padding: 20px;  内边距上 右 下 左
    border: 10px solid red; 边框 宽度 线条类型 颜色
    margin: 30px 30px 30px 30px; 外边距上 右 下 左 也可设置（0% 17.5% 0% 17.5%）为了实现居中
    margin: 0 auto;自动计算页边距

}

Javascript

js引入方式

1
2
3
4
5
6
7
1.内部脚本,一般放在HTML<body>底部（在哪都行）
<script>
</script>
2.外部脚本
<script src=" "></script>

vscode里面 输入标签可以直接补全，例如 script

基本语法

区分大小写
句尾分号；可有可无
注释// /* */

输出：

  • window.alert(“弹出警告框”) 可简写为alert
  • document.write(“写入浏览器页面，浏览器显示”)
  • console.log(“写入浏览器控制台”)

变量：
var a = 20;
a = “张三”

var定义的是全局变量，可以重复定义，不约束类型
let定义的变量仅在代码块中生效(ES6)，且不可以重复定义 (最新标准)
const 约束值不可以改变

数据类型：

  • number （数字/NaN）
  • string
  • boolean （true/fa）
  • null （对象为空）
  • undefined（未初始化）
    使用alert(typeof a);可以得到数据类型

运算符：
== 类型不同时，会进行类型转换
===会判断类型，类型不一样直接false

parseInt（”12”） out：12

对于if，if(0) if(NaN) if(“”) if(null) if(undefined)是false 其他为true

条件语句
if…else
switch
for/while/do..while

函数

函数定义方式1：
function functionName(参数1，参数2){
return a+b;
}
形参和return都不需要定义类型
函数定义方式2：
var functionName = function(参数1，参数2){
return a+b;
}
例如function add(a,b){
return a+b;
}
let c = add(1,2)

对象

Array

var name = new Array(1,2,3,4);
var name = [1,2,3,4];
访问 arr[索引]=值

数组长度可变，类型可变
console.log(xxx);很有用

属性 .length 返回元素数量
方法
遍历所有元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
for写法
for (let index = 0; index < array.length; index++) {
    const element = array[index];   
}

forEach()仅仅遍历有值元素
arr.forEach(function(e){
    console.log(e);
})
ES6写法：
箭头函数能简化函数定义语法，形式为
(...)=>{}
var xxx = {...}=>{}
arr.forEach(e) => {
    console.log(e);
}
例如计算加和
let arr = []
for(let i = 0 ; i<=100;i++){
    arr[i]=i;
}
sum = 0;
arr.forEach((i)=>{sum+=i});
alert(sum)

push()元素添加到数组尾部，并返回长度
arr.push(1,2,3);
splice() 删除元素
arr.splice(起始下标，数量);

String

var name = new String(“ “);
var name = “ “;
两种都是可以的
属性length 返回长度
方法：
charAt() 返回指定位置字符
indexOf() 检索字符串
trim() 去除字符串两边空格
substring() 提取子串
使用：[开始索引，结束索引)

JSON

自定义对象
var user = {
name : “xxx”，
age : 20，
eat : function(){
alert(“吃饭”)；
}
eat(){ //简化版
alert(“吃饭”)；
}
}；
console.log(user.name)
user.eat()

JSON对象
JSON的也需要是””包裹，但上面的自定义对象不需要
例如
{
“name” : “xxx”，
“age” : 20，
}

前端有大量数据给后端可以使用json
JSON以字符串的形式定义
var 变量名 = ‘{“name” : “xxx”，”age” : 20，}’;
然后使用var jsObject = JSON.parse(变量名)；
然后就可以 变量名.name 访问
var jsObject = JSON.stringify(obj);（JSON对象变回字符串）

BOM

浏览器对象模型
window 窗口
可以直接省略window使用
例如window.alert(); == alert();
属性：
history
location
navigator
方法:
alert() 警告框
var flag = confirm(“ “) 确认框,返回true or false
setInterval() 每隔一段时间执行

1
2
3
4
5
6
7
8
9
10
11
var i = 0;
setInterval(function () {
    i++;
    alert(i);
},1000)
或者
var i = 0;
setInterval( () => {
    i++;
    alert(i);
},1000)

setTimeout() 延时x毫秒后调用
window.setTimeout(() => {alert(“执行”)},1000)

Location 地址栏
获取网站url
alert(window.location.href)

网站跳转
window.location.href = “www.baidu.com“;

Navigator
Screen 屏幕
History 历史记录

DOM

文档对象模型
JS可以通过操作DOM，实现

  • 改变HTML内容
  • 改变样式
  • 对DOM事件做出反应
  • 添加or删除HTML元素

DOM将HTML封装成对应的对象

  • Document 整个文档对象
  • Element 元素
  • Attribute 属性
  • Text 文本
  • Comment 注释

DOM获取Element对象：

  1. 根据id属性，返回一个对象
    var idValue = window.document.getElementById(‘idValue’)
  2. 根据标签名，返回对象数组
    var divs = document.getElementsByTagName(‘div’)
  3. 根据name属性值，返回对象数组
    var hobbys = document.getElementsByName(‘hobby’)
  4. 根据class属性值，返回对象数组
    var clss = document.getElementsByClassName(‘cls’)
    name可以相同 id不能相同

对元素进行操作：
主要查手册，常用的有 xxx.innerHTML(“xxx”)

事件监听

  • 按钮点击
  • 鼠标移动到元素
  • 按下按键
  • …

js可以在事件发生时发生操作

事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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('点击');
    }
    window.document.getElementById('btn').onclick = ()=>{
            alert('点击');
        }
</script>

常见事件

  • onclick 鼠标单击
  • onblur 元素失去焦点
  • onfocus 元素获得焦点
  • onload 某页面/元素完成加载（可以加到body上面）
  • onsubmit 提交表单
  • onkeydown 按下按键
  • onmouseover 鼠标移动到元素之上
  • onmouseout 鼠标移开

VUE

常见指令

MVVM双向绑定 （model-view-viewModel）
可以免除原生js中的DOM操作
model=>DOM
Model=>Plain Javascript Objects
viewModel（Dom Listenner/Dta Bindings） 双向绑定

v-model数据绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="js/vue.js"></script>

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

<script>
    new Vue({
        el: "#app",
        data: {
            message : "hello,world"
        }
    })
</script>

 <input type="text" v-model="message">
或者直接{{message}}

v-bind绑定属性

1
2
3
4
5
6
7
8
9
10
11
12
<a v-bind:href="url">xxx</a>
简化写法<a :href="url">xxx</a>
<input v-model="url">
<script>
    new Vue({
        el: "#app",
        data: {
            url : "www.baidu.com"
        }
    })
</script>

这样就实现了实时改变url值

v-on事件绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input type="button" value="button1" v-on:click="handle()">
<input type="button" value="button1" @click="handle()"

<script>
    new Vue({
        el: "#app",
        methods: {
            handle:function(){
                alert("点击")
            }
        },
    })
</script>

可以简写为 handle(){alert("点击")}

**v-if 条件判断**

指令 描述
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-if-else v-else-if 条件性渲染
v-else
v-show 根据条件展示某元素，始终渲染区别在于切换的是display属性的值
v-for 列表渲染 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app2">
        
    <input type="text" v-model="age">当前年龄{{ age }}
    <br>
    <span v-if="age<=35">年轻人(35及以下)</span>
    <span v-else-if="age>35 && age<=60">中年人(35-60)</span>
    <span v-else>老年人(60及以上)</span>
</div>
<script>
    new Vue({
        el: "#app2",
        data: {
            age : "25"
        },
        methods:{

        }
    })
</script>


v-for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<标签 v-for="(变量名,索引变量) in 集合模型数据">
    <!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
   {{索引变量 + 1}} {{变量名}}
</标签>

<div id="app3">
    <div v-for="(addr, index) in addrs">{{index+1}}:{{addr}}</div>
</div>

<script>
    new Vue({
        el: "#app3", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>

使用vue数据填充table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
    <tr align="center" v-for="(user,index) in users">
        <td>{{index + 1}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
        <td>
            <span v-if="user.gender == 1">男</span>
            <span v-if="user.gender == 2">女</span>
        </td>
        <td>{{user.score}}</td>
        <td>
            <span v-if="user.score >= 85">优秀</span>
            <span v-else-if="user.score >= 60">及格</span>
            <span style="color: red;" v-else>不及格</span>
        </td>
    </tr>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>

vue生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

其中我们需要重点关注的是**mounted,**其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

1
2
3
4
5
6
7
8
9
10
11
~~~html
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
~~~

前端工程

ajax

Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。其作用有如下2点：

  • 与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

原生Ajax

  • 客户端

    第一步：如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送ajax请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>原生Ajax</title>
    </head>
    <body>
        <input type="button" value="获取数据" onclick="getData()">
        <div id="div1"></div>
        
    </body>
    <script>
        function getData(){
         
        }
    </script>
    </html>

    第二步：创建XMLHttpRequest对象，用于和服务器交换数据，也是原生Ajax请求的核心对象，提供了各种方法。代码如下：

    1
    2
    //1. 创建XMLHttpRequest 
    var xmlHttpRequest  = new XMLHttpRequest();

    第三步：调用对象的open()方法设置请求的参数信息，例如请求地址，请求方式。然后调用send()方法向服务器发送请求，代码如下：

    1
    2
    3
    //2. 发送异步请求
    xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
    xmlHttpRequest.send();//发送请求

    第四步：我们通过绑定事件的方式，来获取服务器响应的数据。

    1
    2
    3
    4
    5
    6
    7
    //3. 获取服务响应数据
    xmlHttpRequest.onreadystatechange = function(){
        //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
        }
    }

Axios

上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn

原生调用

  • 引入Axios文件

    1
    <script src="js/axios-0.18.0.js"></script>

  • 使用Axios发送请求，并获取响应结果，官方提供的api很多，此处给出2种，如下

    • 发送 get 请求

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      get可以在url后直接加参数
      axios({
          method:"get",
          url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
      }).then(function (resp){
          alert(resp.data);
      })

      .then(result=>{ alert("result.data"); })  也可以

      .then()...为成功回调函数

    • 发送 post 请求

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
       使用data传递数据
      axios({
          method: "post",
          url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
          data: "id=1"
      }).then(result => {
          console.log(result.data);
      })

       .then(回调函数)

    axios()是用来发送异步请求的，小括号中使用 js的JSON对象传递请求相关的参数：

    • method属性：用来设置请求方式的。取值为 get 或者 post。
    • url属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
    • data属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

    then() 需要传递一个匿名函数。我们将 then()中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

简化写法（推荐写法）

Axios还针对不同的请求，提供了别名方式的api,具体如下：

方法 描述
axios.get(url [, config]) 发送get请求
axios.delete(url [, config]) 发送delete请求
axios.post(url [, data[, config]]) 发送post请求
axios.put(url [, data[, config]]) 发送put请求

我们目前只关注get和post请求，所以在上述的入门案例中，我们可以将get请求代码改写成如下：

1
2
3
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
    console.log(result.data);
})

post请求改写成如下：

1
2
3
axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
    console.log(result.data);
})

结合Vue挂载数据：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //加载后发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
            this.emps = result.data.data;
          })
       }
    });
</script>

前后端分离开发

接口文档平台

  • yapi
  • postman

Mock可以生成json数据

前端开发：

  • 模块化：将js和css等，做成一个个可复用模块
  • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  • 自动化：项目的构建，测试，部署全部都是自动完成

Vue项目开发

vue-cli

vue官方提供的脚手架Vue-cli用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能：

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli

安装完 node -v 查看版本
npm config get prefix 获取npm安装目录
npm config set prefix 设置npm安装目录

npm 淘宝镜像
npm config set registry https://mirrors.cloud.tencent.com/npm/

安装vue-cli

npm install -g @vue/cli

vue –version 查看是否安装成功

vue项目目录结构介绍

使用 vue create vue-project01
或者 vue ui 打开脚手架创建工具

  • node_modules 存放项目依赖包
  • public 静态文件
  • src 源代码
    • assets 静态资源
    • components 可重用组件
    • router 路由配置
    • view 视图组件（页面）
    • App.vue 入口界面（根组件）
    • main.js 入口js文件
  • package.json 模块基本信息，项目开发所需模块，模块版本信息
  • vue.config.js vue配置，端口等

在vscode中
view-open view-打开npm脚本
(点击package.json)
在npm scripts中运行serve就可以运行服务

直接在项目目录下，输入npm run serve 也可以启动脚本

在vue.config.js 中更改启动端口 (因为和tomcat冲突)

1
2
3
4
5
6
7
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:7000
  }
})

Vue项目开发流程

我们自习观察发现，index.html的代码很简洁，但是浏览器所呈现的index.html内容却很丰富，代码和内容不匹配，所以vue是如何做到的呢？接下来我们学习一下vue项目的开发流程。

对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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')

或者

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

或者
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

上述代码中，包括如下几个关键点：

  • import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App
  • new Vue(): 创建vue对象
  • $mount(‘#app’);将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。
  • router: 路由，详细在后面的小节讲解,注意ES6中，属性名和属性值相同的话，可以省略只写一个，即router:”router”简写为router
  • render: 主要使用视图的渲染的。

来到public/index.html中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。
此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？这就涉及到render中的App了，.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

  • template: 模板部分，主要是HTML代码，用来展示页面主体结构的
  • script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的
  • style: css样式部分，主要通过css样式控制模板的页面效果的
  • 简化模板部分内容，添加script部分的数据模型，删除css样式，完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
export default {
  data(){
    return {
      "message":"hello world"
    }
  }
  或者
    data:function(){
    return {
      message :"hello,world"
    }
  }
}
</script>
<style>

</style>

VUE开发中主要操作的都是VUE组件

组件库Element

注意Element Plus对应Vue3，ElementUI对应Vue2

安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

1
npm install element-plus --save

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

然后我们需要按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

maven