前端开发

最新推荐文章于 2024-06-11 02:06:44 发布

平淡860

最新推荐文章于 2024-06-11 02:06:44 发布

阅读量630

点赞数 5

文章标签：开发语言 html5 css3 json node.js vue.js

本文链接：https://blog.csdn.net/qq_69182843/article/details/133782640

版权

web前端开发

1.初始web前端:

web标准l也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

HTML：负责网页的结构（页面元素和内容）。
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
JavaScript：负责网页的行为（交互效果）。

2.HTML,CSS:

HTML（HyperText Markup Language）：超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
标记语言：由标签构成的语言

HTML标签都是预定义好的。例如：使用展示超链接，使用展示图片，展示视频。
HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML结构标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H标题</title>
</head>
<body>
    
</body>
</html>

特点:

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

3.VS Code开发工具:

VS Code安装使用:

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。
VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。
VS Code 提供了非常强大的插件库，大大提高了开发效率。
官网： https://code.visualstudio.com

ps:作为一名软件开发工程师，建议以后安装所有与开发相关的软件，尽量安装在一个没有中文，不带空格的目录下

4.基础标签:

下面以新浪新闻为主题学习标签和样式

在这里插入图片描述

图片标签：

•src：指定图像的url（绝对路径 / 相对路径）

•width：图像的宽度（像素 / 相对于父元素的百分比）

•height：图像的高度（像素 / 相对于父元素的百分比）
标题标签：
-
水平线标签：

在这里插入图片描述

颜色的表示:

在这里插入图片描述

CSS引入方式:

行内样式：
内嵌样式：
外联样式：xxx.css

CSS选择器：用来选取需要设置样式的元素(标签):

元素选择器：标签名 { … }
id选择器：#id属性值 { … }
类选择器：.class属性值 { … }
优先级：id选择器 > 类选择器 > 元素选择器

超链接:

标签a:<a /href=“…” target=“…”>央视网

属性:

href：指定资源访问的url
target：指定在何处打开资源链接
_self：默认值，在当前页面打开
_blank：在空白页面打开

CSS属性

text-decoration：规定添加到文本的修饰，none表示定义标准的文本。
color：定义文本的颜色

视频标签：

•src：规定视频的url

•controls：显示播放控件

•width：播放器的宽度

•height：播放器的高度

音频标签：

•src：规定音频的url

•controls：显示播放控件

段落标签：

文本加粗标签: /

页面布局:

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

在这里插入图片描述

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

标签：

特点：

div标签：

一行只显示一个（独占一行）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高（width、height）

span标签：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高（width、height）

**表格标签:**l在网页中以表格（行、列）形式整齐展示数据，如：班级表。

:定义表格

：定义表格中的行，一个表示一行：表示表头单元格，具有加粗居中效果：表示普通单元格

<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>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

</body>
</html>

页面显示:

在这里插入图片描述

表单标签: 在这里插入图片描述

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：

表单项：不同类型的 input 元素、下拉列表、文本域等。

：定义表单项，通过type属性控制输入形式

/：定义下拉列表

/：定义文本域

属性：

action：规定当提交表单时向何处发送表单数据，URL

method：规定用于发送表单数据的方式。GET、POST

get:在url后面拼接表单数据,比如?username=xxp&age=21,url长度是有限制的,默认值为get
post:在消息体(请求体)中传递的,参数大小无限制

表单标签-表单项:

在这里插入图片描述

JavaScript:

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript 在 1995 年由 Brendan Eich 发明，并于 1997 年成为 ECMA 标准。
ECMAScript6 (ES6) 是最主流的 JavaScript 版本（发布于 2015 年)。

JS引入方式:

1.内部脚本：将JS代码定义在HTML页面中:

JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的

2.外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含

alter("你好!");

JS基础语法:

1.书写语法:

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：

单行注释：// 注释内容
多行注释：/* 注释内容 */

大括号表示代码块

输出语句

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台

<script>
    window.alert("Hello JavaScript"); //浏览器弹出警告框
    
    document.write("Hello JavaScript"); //写入HTML,在浏览器展示
    console.log("Hello JavaScript"); //写入浏览器控制台
</script>

2.变量:

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。
JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）

数字不能开头

建议使用驼峰命名

ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

<script>
        //var定义变量(弱类型语言)

        // var a=10;
        // a="张三";

        // alert(a);

        //特点一:作用域比较大,全局变量
        //特点二:可以重复定义的.
        // {
        //     var x=1;
        //     var x="小平";
        // }
        // alert(x);


        //let定义变量(定义局部变量,不能重复定义)
        // {
        //     let x=1;
        //     // let x=2;报错
        //     alert(x);
        // }

        //const  常量:不能改变的
        const pi=3.14;
        // pi=3.15;//控制台报错:Uncaught TypeError: Assignment to constant variable.
        alert(pi);
        
    </script>

•3.数据类型、运算符、流程控制语句:

JavaScript中分为：原始类型和引用类型。

原始类型:
number：数字（整数、小数、NaN(Not a Number)）
string：字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

使用 typeof 运算符可以获取数据类型：

var a=20;//是number类型的
alert(typeof a);//输出number

运算符:

算术运算符：+ , - , * , / , % , ++ , –
赋值运算符：= , += , -= , *= , /= , %=
比较运算符：> , < , >= , <= , != , == , ===
逻辑运算符：&& , || , !
三元运算符：条件表达式 ? true_value: false_value

		var age=20;//number
        var _age="20";//String
        var $age=20;

        alert(age==_age);//先转换类型再比较值,ture
        alert(age===_age);//直接比较类型,类型不同返回false
        alert(age==$age);//true

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

类型转换:

字符串类型转为数字

将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

  //类型转换 - 字符串类型转为数字
        alert(parseInt("12"));//12
        alert(parseInt("12A45"));//12
        alert(parseInt("A45"));//NaN(not a num)

其他类型转为boolean
Number：0 和 NaN为false，其他均转为true。
String：空字符串为false，其他均转为true。
Null 和 undefined ：均转为false。

    //其他类型转为boolean:
        // 1.数字类型-->布尔
        if(0){
            alert("0 转换为false");
        }
        if(NaN){
            alert("Nan 转换为false");
        }
        if(-1){
            alert("除0和Nan其他数字都转换为 true");
        }

        // 2.字符串--->布尔
        if(" "){//加空格也不是空字符串
            alert("空字符串转换为false");
        }

        //3.null,undefined--->布尔
        if(null){//false
            alert("null 转换为false");
        }

        if(undefined){//fasle
            alert("undefined 转换为fasle");
        }

流程控制语句(和Java一样)

if…else if …else…
switch
for
while
do … while

JS函数:

介绍:函数（方法）是被设计为执行特定任务的代码块。

定义:**JavaScript 函数通过 function 关键字进行定义，**语法为：

 //定义函数:
        //方法一:function关键字
        //形参不需要指定类型,返回值不需要指定类型
        // function add(a,b){
        //     return a+b
        // }

		//方法二:var定义一个变量(函数名),将函数赋值给变量
        var add=function(a,b){
            return a+b;
        }

注意:

形式参数不需要类型。因为JavaScript是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

箭头函数:

在 JavaScript 中，“=>” 是箭头函数的语法表示。箭头函数是一种匿名函数的简写形式，可以更方便地定义函数并且能够继承其所在上下文的 this 值。例如：

		//方法二:var定义一个变量(函数名),将函数赋值给变量
        var add=function(a,b){
            return a+b;
        }	

         //箭头函数:
         //箭头函数的左侧是函数参数列表，右侧是函数体。
         const add=(a,b)=>{
            return a+b;
         }

调用:

函数名称(实际参数列表)

		 //调用函数
        // var sum=add(10,20);
        // alert(sum);//30

		 //函数的调用可以传递多个参数,但是只接收了两个
        var sum=add(20,50,20,50,60);
        alert(sum);//70

JS对象:

1.Array:

JavaScript 中 Array对象用于定义数组。

JavaScript 中的数组相当于 Java 中集合，数组的长度是可变的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据
定义:

 		//定义数组:方法一:
        // var arr=new Array(1,2,3,4);
        

        //定义数组:方法二:
        // var arr=[1,2,3,4];

		//访问数组:(索引)
        // console.log(arr[0]);//1
        // console.log(arr[1]);//2

属性:

属性	描述
length	设置或返回数组中元素的数量。

方法:

forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度。
splice()	从数组中删除元素。

箭头函数**(ES6)****：**是用来简化函数定义语法的。具体形式为: (…) => { … } ，如果需要给箭头函数起名字： var xxx = (…) => { … }

<script>
 var arr=[1,2,3,4];
        arr[10]=50;
        //for循环:遍历所有元素
        // for(let i=0;i<arr.length;i++){
        //     console.log(arr[i]);
        // }

        console.log("======================");

        //foreach:变量数组中有值的元素
        arr.forEach(function(e){
        console.log(e);
        })

        console.log("======================");

        //箭头函数,简化函数的定义
        arr.forEach((e)=>{
            console.log(e);
        })

        //push:添加元素到数组的尾部
        arr.push(7,8,9);
        console.log(arr);

        //splice:删除元素
        arr.splice(2,2);//删除3和4(从索引为2的位置开始删,删2个)
         console.log(arr);   
</script>

2.String:

String字符串对象创建方式有两种:

		var str=new String(" Hello String! ");
        var strr="Hello";

        console.log(str);
        console.log(strr);

属性:

属性	描述
length	字符串的长度。

		//属性:length
        console.log(str.length);//13

方法:

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

 		//方法:
        //charAt():获取指定位置的字符

        console.log(str.charAt(4));

        //indexOf:检索字符串的位置

        console.log(str.indexOf("lo"));
        //trim:去除字符串两边的空格
        var a=str.trim();
        console.log(a);
        //substring(start, end):截取子字符串
        console.log(a.substring(0,5));//hello

3.JSON:

JavaScript自定义对象

定义格式:

var 对象名 = {

属性名1: 属性值1,

属性名2: 属性值2,

属性名3: 属性值3,

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

};

   	 //自定义对象
	var person={
            name:"小平",
            age:21,
            gender:"male",
			//对象的方法:方式一
            // eat:function(){
            //     alert("吃饭!");
            // }
			//对象的方法:方式二
            eat(){
                alert("吃饭");
            }
        }

调用对象格式:

对象名.属性
对象名.方法

		console.log(person.name);
        person.eat();

JSON介绍:

JavaScript Object Notation，JavaScript对象标记法。
JSON 是通过 JavaScript 对象标记法书写的文本。

通常是在网络传输中作为数据载体使用:
在这里插入图片描述

定义:

var 变量名 = ‘{“key1”: value1, “key2”: value2}’;

var jasntest ='{"name":"tom","age":23,"addr":["北京","天津","上海"]}' ;

value 的数据类型为：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON字符串转为JS对象:(parse())

//json字符串-->js对象(将json文件看成是字符串,把字符串转为对象,然后用对象.属性方法的方式获取json数据)
        var obj=JSON.parse(jasntest);

        alert(obj.name);//tom

JS对象转为JSON字符串:

		//js对象-->json对象
        alert(JSON.stringify(obj));

4.BOM

概念:Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话， JavaScript 将浏览器的各个组成部分封装为对象

作用:

可以操作浏览器窗口，以及浏览器窗口中的控件（HTML标签）：即可以在js程序中操作标签。
可以实现页面和用户之间的动态交互

其他对象:

document对象：文档对象，是BOM的核心.
history对象：历史对象，用来记录在浏览器中访问记录，可以实现浏览器的前进和后退功能。
navigator对象：浏览器对象，又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核等信息。
screen对象：屏幕对象，用于获取和屏幕有关的数据。例如屏幕分辨率

注意：其他对象可以作为BOM的独立对象，也可以作为window的属性使用。

主要对象:

window对象:浏览器窗口.

获取:直接使用window，其中 window. 可以省略。

 		// 获取BOM对象中的window对象
		window;//对象
        window.alert("HELLO BOM");//window可省略,调用对象的方法
        alert("BOM");//window可以省略

属性:

history：对 History 对象的只读引用。请参阅 History 对象。
location：用于窗口或框架的 Location 对象。请参阅 Location 对象。
navigator：对 Navigator 对象的只读引用。请参阅 Navigator 对象。

方法:
alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

	//confirm()//对话框----------确认为true,取消为false
      // var result=window.confirm("你爱过我吗");
      // alert(result);

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

//定时器:setInterval-----周期性的执行某一函数
       // var i=0;
       // window.setInterval(function(){
       //     console.log("定时器执行了:"+i+"次");
       //     i++
       // },2000)//2000ms=2s

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

//定时器:setTimeout-----延迟指定时间执行一次
 
       // window.setTimeout(function(){
       //     alert("你好");
       // },3000);

地址栏对象:Location:

获取：使用 window.location 获取，其中 window. 可以省略

**属性：**href：设置或返回完整的URL。

 alert(window.location.href);//弹出当前页面的地址栏

        location.href="https://www.itcast.cn";//给当前页面地址赋值,并跳转

5.DOM:

概念:

Document Object Model ，文档对象模型。

将标记语言的各个组成部分封装为对应的对象:

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

看一段代码,理解一下各个对象:

<html>
    <head>
        <title>DOM</title>
    </head>
    <body>
        <h1>DOM对象标题</h1>
        <a href="https://www.baidu.com">百度</a>
    </body>
</html>

DOM会把上面html代码各个组成部分封装成对应的对象

在这里插入图片描述

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：

HTML代码:

	<img src="./HTML/img/huawei.jpg" id="xx"><br><br>

      <div class="cls">往事随风</div>
      <div class="cls">一切平淡</div>

      爱好:
      <input type="checkbox" name="hobby">唱歌
      <input type="checkbox" name="hobby">跳舞
      <input type="checkbox" name="hobby">吃饭

1.根据Id值获取,返回单个Element对象

//1.1获取元素--根据id获取//返回值是一个值
        var h1 =window.document.getElementById("xx");
        alert(h1);//[object HTMLImageElement]

2.根据标签名称获取，返回Element对象数组

 //1.2获取元素--根据标签获取//返回值是一个数组,将获取的元素对象存入数组
        var divs=window.document.getElementsByTagName("div");
        for (let index = 0; index < divs.length; index++) {
            alert(divs[index]);//看div标签有两个,所有会返回两个对象:[object HTMLDivElement]*2
        }

3.根据name属性值获取，返回Element对象数组

//1.3获取元素--根据name获取
        var divs=window.document.getElementsByName("hobby");
        for(var i=0;i<divs.length;i++){
            alert(divs[i]);//看name属性有三个,所以会返回三个对象存入数组divs中:[object HTMLInputElement]*3
        }

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

//1.4获取元素--根据class属性获取
        var divs=window.document.getElementsByClassName("cls");
        for(var i=0;i<divs.length;i++){
            alert(divs[i]);//会返回两个对象:[object HTMLDivElement]*2
        }

获取到元素对象,我们用这个元素的属性和方法,去改变html元素,具体要做什么,用什么方法我们可以查询参考手册

案例:

<!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>JS-对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="./img/off.gif">  <br><br>

    <div class="cls">平淡如水</div>   <br>
    <div class="cls">程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>
</html>

页面显示如下:

在这里插入图片描述

我们要做的是:

点亮灯泡
将所有div标签的内容后面加上666并且为红色
使所有的复选框呈现选中状态

不管做哪一点,我们都要先获取到该元素对象,然后才可以通过对象对元素的属性进行修改或者调用该元素的方法来达到我们的要求:

<script>
    //1. 点亮灯泡 获取img标签的对象,声明了id,选择getElementById()方法获取对象,然后通过对象调用src属性,改变图片的src路径,完成灯泡点亮
    var img=window.document.getElementById("h1");
    img.src="./img/on.gif";

    //2. 将所有div标签的内容后面加上666并且为红色
    var divs=document.getElementsByTagName("div");//返回的是一个数组
    //遍历数组,获取每个元素对象然后修改属性innerHTML进行文本内容的改动
    for (let index = 0; index < divs.length; index++) {
        //声明一个常量div用来存储每一个元素对象
         const div=divs[index];
        //改变div元素的文本内容和文字颜色
         div.innerHTML+="<font color='red'>666</font>";
        
    }
    
    //3. 使所有的复选框呈现选中状态
    var dics=document.getElementsByName("hobby");
    for(var i=0;i<dics.length;i++){
        const check=dics[i];
        check.checked=true;//选中
</script>

结果如下:

在这里插入图片描述

JS事件监听:

事件：HTML事件是发生在HTML元素上的 “事情”。比如：

按钮被点击
鼠标移动到元素上
按下键盘按键

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

事件绑定:

方式一:通过 HTML标签中的事件属性进行绑定

//onclink属性是点击事件的属性,后面跟着方法,方法在后面js中定义.
//意思就是当点击这个按钮后,会触发onclick事件,然后执行on()方法
input type="button" οnclick="on()" value="按钮1">

<script>
    function on(){
        alert('我被点击了!');
    }
</script>

方式二:通过 DOM 元素属性绑定(DOM就是将html元素变成对象)

<input type="button" id="btn" value="按钮2">

<script>
    //document.getElementById('btn')是通过id获取input的DOM对象,然后.onclick是该对象的属性,我们定义一个函数赋值给onclick属性
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

常见事件:

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

案例:

通过事件监听及DOM操作，完成如下效果实现。

点击 “点亮”按钮点亮灯泡，点击“熄灭”按钮熄灭灯泡。
输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。
点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态

初始界面如下:

<!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>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="./HTML/img/off.gif"> <br>

    <!-- 通过属性绑定单击事件,值为方法,方法体在js中声明 -->
    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="fighting" onfocus="upper()" onblur="lower()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选"  onclick="SelectAll()"> 
    <input type="button" value="反选"  onclick="reserve()">

</body>
</html>

在这里插入图片描述

思路:我们首先要明确我们应该用哪种事件来完成,比如点亮按钮这就是一个鼠标单击事件(onclick),明确事件后,我们选择用哪种方式去进行事件绑定,就比如使用通过 HTML标签中的事件属性进行绑定,那么我们事件后跟的方法在js中怎么实现,很明显点亮灯泡就是换个图片,那我们拿到该图片的csr属性就可以换个点亮的图片就行了,既然是属性,我们就需要对象,所有我们得获取到img标签的DOM对象,那又用哪种方式?我们可以看到img 标签中有id,我们就可以用 document.getElementById(“light”)获取到对象,然后修改属性值就可以完成了!

详细代码如下:

<!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>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="./HTML/img/off.gif"> <br>

    <!-- 通过属性绑定单击事件,值为方法,方法体在js中声明 -->
    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="fighting" onfocus="upper()" onblur="lower()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选"  onclick="SelectAll()"> 
    <input type="button" value="反选"  onclick="reserve()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    //定义开灯方法
    function on(){
        //获取img对象(通过id),改变对象的src属性
        document.getElementById("light").src="./HTML/img/on.gif";
    }

    //定义关灯方法
    function off(){
        //获取img对象(通过id),改变对象的src属性
        document.getElementById("light").src="./HTML/img/off.gif";
    }


    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){
        var input=document.getElementById("name");
        input.value=input.value.toLowerCase();
        
    }


    function upper(){
        var input=document.getElementById("name");
        input.value=input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function SelectAll(){
        var hobby=document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++){
            const element=hobby[i];
            element.checked=true;
    }
}

    function reserve(){
        var hobby=document.getElementsByName("hobby");
        for(var i=0;i<hobby.length;i++){
            const element=hobby[i];
            element.checked=false;
    }
    }        
</script>
</html>

效果如下:

在这里插入图片描述

Vue:

概念:

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网： https://v2.cn.vuejs.org/

MVVM模型:
在这里插入图片描述

Vue的快速入门:

1.新建HTML页面，引入Vue.js文件:

2.在JS代码区域，创建Vue核心对象，定义数据模型

3.编写视图.

补充:插值表达式:

形式：{{ 表达式 }}。

内容可以是：

变量
三元运算符
函数调用
算术运算

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js文件 -->
    <script src="./HTML/js/vue.js"></script>
</head>
<!-- 数据模型都会定义在data里，然后通过双向绑定传输到模型里，再在method里的方法发送请求，返回结果 -->
<body>
    <!-- 编写视图层的展示 -->
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>
</body>
<!-- 创建Vue核心对象,定义数据模型 -->
<script>
    //定义Vue对象
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>
</html>

Vue常用指令:

指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
常用指令:

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

指令演示:

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-model	在表单元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令---v-bind</title>
    <!-- 引入Vue.js文件 -->
    <script src="./HTML/js/vue.js"></script>
</head>
<body>
    <div id="app">
    //url必须在数据模型(data)中声明
        <a  v-bind:href="url">链接1</a>  //url的值就是js中的url
        <!-- 简写v-bind: -->
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
        //在表单元素上创建双向数据绑定,修改文本框的数据,url会变,然后上面的bind绑定的连接也会变,双向!!
    </div>
</body>
<script>
    new Vue({
        el:"#app",//Vue接管区域
        data:{
            url:"www.baidu.com"
        }
    })
</script>
</html>

通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

指令	作用
v-on	为HTML标签绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令-v-on</title>
    <script src="./HTML/js/vue.js"></script>
</head>
<body>
    <div id="app">
//v-on表示为HTML标签绑定事件,click只是其中一种,点击事件,
//绑定事件后赋值一个方法给事件,在js中定义方法体
        <input type="button" value="别碰我" v-on:click="handle()">
        <!-- 简便写法 -->
        <input type="button" value="别碰我" @click="handle()">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        // data:{

        // },
        //方法必须写在methods中
        methods:{
        //格式:方法名:function(){方法体}
            handle:function(){
                alert("点了我一下...");
            }
        }
    })
</script>
</html>

指令	作用
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令-v-if与v-show</title>
    <script src="./HTML/js/vue.js"></script>
</head>
<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="age>=60">老年人(60岁及以上)</span>

        <br><br>

        <!-- 都会渲染,但是display属性会成为none(不满足条件的) -->
        年龄<input type="text" v-model="age">岁经判断,为
        <span v-show="age<=35">年轻人(35岁以下)</span>
        <span v-show="age>35 && age<60">中年人(35-60)</span>
        <span v-show="age>=60">老年人(60岁及以上)</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            age:20
        },
        methods:{

        }
    })
</script>
</html>

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令-v-for</title>
    <script src="./HTML/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- addr存放数据容器的名字  addr是遍历的数组的名字 -->
        <!-- {{插值表达式:展示数据在界面上}} -->
        <div v-for="addr in addrs">{{addr}}</div>

        <hr>
        <!-- 差值表达式可以进行运算 -->
        <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",//Vue控制的区域
        data:{
            addrs:["北京","上海","西安","成都","重庆"]
        }
    })
</script>
</html>

案例:

通过Vue完成表格数据的渲染展示:

在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令案例</title>
    <!-- 导入vue.js文件 -->
    <script src="./HTML/js/vue.js"></script>
</head>
<body>
    <!-- Vue管理的区域 -->
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>登记</th>
                <!-- 遍历数组,值报错到arr中,index是索引,0开始,users是遍历的数组 -->
            <tr align="center" v-for="(arr,index) in users">
                <!-- 索引递增+1 -->
                <td>{{index+1}}</td>
                <!-- 获取数组对象的属性 -->
                <td>{{arr.name}}</td>
                <!-- 获取数组对象的年龄 -->
                <td>{{arr.age}}</td>
                <td>
                    <!-- 判断性别根据数组对象的gender属性 -->
                    <span v-if="arr.gender==1">男</span>
                    <span v-if="arr.gender==2">女</span>
                </td>
                <!-- 获取数组对象的成绩 -->
                <td>{{arr.score}}</td>
                <td>
                    <!-- 判断数组对象的成绩使用if-else指令进行分类 -->
                    <span v-if="arr.score>=85">优秀</span>
                    <span v-else-if="arr.score<85 && arr.score>=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        //Vue管理的区域
        el:"#app",
        //数据模型:定义数据
        data:{
            //数组:
        users:[{
            name:"Tom",
            age:20,
            gender:1,
            score:78
        },{
            name:"Rose",
            age:21,
            gender:2,
            score:86
        },{
            name:"Jerry",
            age:24,
            gender:1,
            score:54
        },{
            name:"Xiaoping",
            age:23,
            gender:1,
            score:90
        }]
    }
    })
</script>
</html>

展示效果:

在这里插入图片描述

Vue生命周期:

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

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

在这里插入图片描述

我们这里演示 mounted 状态的声明周期:

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

<!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>Vue生命周期</title>
    <script src="./HTML/js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

执行结果:

在这里插入图片描述

Ajax介绍:

导入:

我们可以使用html元素编写页面,并且用css美化页面但是界面还是平平无奇,只是一些标签的堆积:

在这里插入图片描述

我们也通过Vue案例,通过Vue中的指令,渲染展示出了一个成绩表格,而这个表格的数据是写死了的(数据是位于Vue对象中的数据模型dat中),是我们手动写死的数据,但是真实的项目中,我们是要从服务器获取数据然后渲染页面的.

接下来我们来认识Ajax,通过Ajax我们可以从服务端获取数据!

概念:

Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用:

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

在这里插入图片描述

在整个过程中,页面是没有进行任何刷新的,这就是异步交互.

异步与同步:

在这里插入图片描述

同步:客户端进行访问,想服务端发起请求,在这段时间内,客户端是等服务端响应的,等到服务端响应进行逻辑处理,将逻辑处理的结果返回给客户端,客户端才可以继续进行访问.
异步:客户端进行访问,服务端进行逻辑处理时,客户端可以进行其他操作,不需要等待服务端的响应.

原生的Ajax请求:

1.准备数据地址：https://mock.apifox.cn/m1/3128855-0-default/emp/list

数据是json格式的数据,前后端进行交互的数据.

2.创建XMLHttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

4.获取服务器响应数据

代码如下:

<!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(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','https://mock.apifox.cn/m1/3128855-0-default/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

在这里插入图片描述

点击按钮后,右键检查,可以将服务器中的数据展示到页面上,也可以在网络中看到获取的数据.

这个原生的方法太复杂,我都有点蒙,后面的才是刚学完Java的感觉.

Axios:

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网： https://www.axios-http.cn/

Axios入门:

1.引入Axios的js文件

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

2.使用Axios发送请求，并获取响应结果

 通过Axios发送异步请求-get
        axios({
            method:"get",//请求方式
            url:"https://mock.apifox.cn/m1/3128855-0-default/emp/list"  //请求路径
        }).then(result=>{
            console.log(result.data);//data属性就是服务器端返回的数据
        })
        
通过Axios发送异步请求-post		post请求参数是在请求体中传递的
        axios({
            method:"post",
            url:"https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById",
            data:"id=1"//指定post请求所传递的请求参数
        }).then(result=>{
            console.log(result);
        })

我们可以使用请求方式别名,简化异步请求:

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

get异步请求方式
axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result=>{//使用箭头函数,返回结果集
            console.log(result.data);//data属性就是服务器端返回的数据
        })  
post异步请求方式:
axios.post("https://mock.apifox.cn/m1/3128855-0-default/emp/deleteById","id=1").then(result=>{//id为请求参数
            console.log(result);//.then()传递一个回调函数,接收到响应回来的数据
        })

Axios请求获取服务器数据,然后通过.then接收响应回来的数据,在.then()中传递一个函数,通过result来接收就相当于此时的result就是一个对象,要获取对象的属性啥的就result.属性

案例:

基于Vue及Axios完成数据的动态加载展示

1.数据准备的url： https://yapi.pro/mock/123884/user/getById

数据如下:

{
    "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 1,
            "name": "谢逊",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 2,
            "name": "韦一笑",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 3,
            "name": "黛绮丝",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 4,
            "name": "殷天正",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        }
    ]
}

2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1 代表男，2 代表女)。

初始页面:

在这里插入图片描述

此案例也是一个表格,相比之前的表格渲染,我们的表格数据不是在Vue对象中的data中定义的,数据是来自服务器的,将服务器的数据渲染到表格中的,怎么实现?

在页面加载完成后,自动发送请求到服务端,加载数据,并且将加载返回的数据渲染到table表格中.

1.Axios:获取服务端的数据

2.Vue:获取到数据后,通过V-指令渲染表格

3.Vue的声明周期(钩子函数):mountd(){}:在界面渲染后自动调用钩子函数,所以我们就在钩子函数中去发送异步请求(Axios)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axiso案例</title>
    <!-- 引入js文件 -->
    <script src="./js/vue.js"></script>
    <script src="./js/axios-0.18.0.js"></script>
    <style>
        img{
            width: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职如期</th>
                <th>最后操作</th>
            </tr>
    
            <!-- v-for指令遍历数组emps(服务器数据) -->
            <tr align="center" v-for="(emp,index) in emps"> 
                <!-- //索引从0开始(使用插值表达式展示数据到页面) -->
                <td>{{index+1}}</td>
                <!-- //获取数组(服务器数据)的属性 -->
                <td>{{emp.name}}</td>
                <!-- v-bind绑定元素属性 src,这就将src属性与emp.image属性进行同步了-->
                <td><img v-bind:src="emp.image"></td>
                <td>
                    <!-- v-if判断数据是否满足要求,1为男,2为女 -->
                    <span v-if="emp.gender==1">男</span>
                    <span v-if="emp.gender==2">女</span>
                </td>
                <td>{{emp.jos}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    //创建Vue对象
    new Vue({
        el:"#app",//指定对象管理区域
        data:{
            emps:[]//定义一个数组emps存储服务端响应数据
        },
        //Vue的生命周期(钩子函数):
        //页面加载完成后,自动调用该函数
        mounted(){
            //自动调用构造函数后.就发送异步请求,加载数据
            axios.get("https://yapi.pro/mock/123884/user/getById").then(result=>{
                this.emps=result.data.data//  result.data是拿到返回数据(一整个json文件)  所以还需要json中的data才是我们需要的数据将数据赋给emps数组存储
            })
        }
    })
</script>
</html>

展示结果:

在这里插入图片描述

前后端分离开发:

介绍:

在这里插入图片描述

开发流程:

熟悉业务需求,进行需求分析,依据业务原型和需求文档,定义出API接口文档(所要实现的功能,最终请求的url地址,请求方式,请求参数,响应的结果)前端和后端遵循需求文档并行开发,然后前后端进行测试,再进行前后端联调测试.

YAPI:

介绍:

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址:https://yapi.pro/

主要提供:

API接口管理
Mock服务:通过YAPI平台,可以模拟真实接口,生成接口的模拟测试数据,用于前端工程师.即使后端还没开发完毕,前端可以使用Mokc地址先进行测试.

演示:

点击链接后,注册账号进入主界面:

在这里插入图片描述

点击添加项目,再点击接口分类,方便对接口进行很好的管理:

在这里插入图片描述

再点击添加接口:

在这里插入图片描述

输入接口路径和接口名称,路径可以随便写:/user/getGrtId.

接口基本信息完成,再点击编辑,编辑请求参数和返回数据:

在这里插入图片描述

返回数据格式中,点击导入json,输入一段Json代码点击确定:

{
    "code": 1,
    "msg": "success",
    "data": [
        {
            "id": 1,
            "name": "谢逊",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 2,
            "name": "韦一笑",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/2.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 3,
            "name": "黛绮丝",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/3.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        },
        {
            "id": 4,
            "name": "殷天正",
            "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/4.jpg",
            "gender": 1,
            "job": "班主任",
            "entrydate": "2023-06-09",
            "updatetime": "2023-07-01 00:00:00"
        }
    ]
}

保存后,点击高级Mock,添加期望,粘贴上面的json代码(导入json一致的代码),r然后确定.

回到预览界面,获取链接即可,可以将链接放到我们的项目中

我们前面的案例就是这样生成的.

前端开发工程化

小白眼中的前端开发:

在这里插入图片描述

这种结构在开发大型项目时,会发生很多问题,比如我们每次开发一个功能都是从0开始,页面之间的组件或者复用性并不好并且我们的文件没有比如图片,js等没有规范非存储目录,不便于项目的维护和项目的管理.所有前端开发需要注意:

在这里插入图片描述

模块化:将js,css制作成一个个可以复用的模块.
组件化:将UI结构,css样式以及js的行为封装成一个个组件,便于管理.
规范化:提供一套标准规范的目录结构和编码规范,所有开发人员都遵循这一套统一的规范进行开发
自动化:项目的构建,测试,部署都可以自动化的进行.

我们可以使用现成的工具来帮助我们完成前端工程化-----VUE官方提供的脚手架工具:vue-cli

vue-cli:

Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板

Vue-cli提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线
依赖环境：NodeJS

环境准备:

安装NodeJS:

网址:Node.js (nodejs.org)

在这里插入图片描述

我们选择安装长期维护版

安装步骤:

1.点击下载的安装包.一直下一步即可(注意不要安装到带有中文空格的目录下).

2.验证NodeJS环境变量(安装好后,会自动给我们安装好环境变量):

cmd中输入node -v查看版本.

在这里插入图片描述

3.配置nmp的全局安装路径:

以管理员身份运行命令提示符:

在这里插入图片描述

使用管理员身份运行命令,在命令行中,执行如下命令:

npm config set prefix "E:\develop\NodeJS"//路径是NodeJS的安装目录

可以通过命令查看是否设置成功:

npm config set prefix

4.切换npm的淘宝镜像(方便我=我们后期加速资源下载)

npm config set registry https://registry.npm.taobao.org

5.安装Vue-cli

npm install -g @vue/cli

运行后,它会自动安装脚手架cli(需要联网)

验证是否安装成功:

vue -version

能看到版本号就成功了!

平淡860

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
前端开发

web前端开发1.初始web前端:web标准l也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。三个组成部分：HTML：负责网页的结构（页面元素和内容）。CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。JavaScript：负责网页的行为（交互效果）。2.HTML,CSS:HTML（HyperText Markup Language）：超文本标记语言。超文本：超越了文本的限制，比
复制链接

扫一扫