第6天----【位运算进阶之-----位与()】七夕特别版

今天我们来学习C语言的位与。
在这里插入图片描述


❤️C语言的位与(&)操作是一种按位运算符,用于对两个操作数的每个对应位执行逻辑与操作。它的操作规则如下:

  • 如果两个操作数对应位都为1,则结果的对应位也为1。(全1才1)
  • 如果两个操作数对应位有一个为0,则结果的对应位为0。(有0则0)

综上,一个位和1位与还是这个位,和0位与则是0;

一、基本应用:

#include <stdio.h>int main() {unsigned int a = 60;   // 二进制表示为 0011 1100unsigned int b = 13;   // 二进制表示为 0000 1101unsigned int result = a & b;  // 二进制表示为 0000 1100printf("位与操作结果为:%u\n", result);return 0;
}
  • 这段代码中,我们定义了两个无符号整数变量 a 和 b,它们分别初始化为60和13。然后,我们使用位与操作符 & 对它们进行位与操作,并将结果赋值给变量 result。最后,我们使用printf函数打印出结果。

❤️上述代码的输出结果将为 12,这是因为60的二进制表示为 0011 1100,13的二进制表示为 0000 1101,两者进行位与操作后得到的结果为 0000 1100,即十进制的 12。

⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️
❗️注意一些不常见的输出方式:

  • %o:无符号8进制整数(不输出前缀0);
  • %u:无符号10进制整数;
  • %x(%X):无符号16进制,不输出前缀0x (小写x输出小写字母abcdef,大写X类似);
  • %d(%i):有符号10进制整数(i为老式写法);
  • %e(%E):科学计数法的形式输出 (小写e表示输出时用e,如2e-1;
  • %p:16进制形式输出指针
  • %g(G):在%e和%f中选择一种输出长度较短的输出。(G对应E)

⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️ ⭐ ⭐️


二、拓展应用:

1. 提取特定位的值:

❤️位与操作可以用于提取一个数字的特定位的值。通过与一个只有特定位为1的掩码进行位与操作,可以将其他位的值清零,从而提取出特定位的值。
提取特定位的值:

#include <stdio.h>#define MASK (0x0F)  // 二进制表示为 0000 1111int main() {unsigned int num = 0x3A;  // 二进制表示为 0011 1010//int num=0b00111010   //二进制数定义的一种方法unsigned int lowNibble = num & MASK;printf("Low nibble: 0x%X\n", lowNibble);return 0;
}

❤️ 在这个例子中,我们定义了一个宏 MASK,它的二进制表示为 0000 1111,用于提取一个数字的低4位。在 main 函数中,我们定义了一个变量 num,并使用位与操作将其与掩码 MASK 进行位与运算,从而提取出低4位的值。最后,我们使用 printf 函数打印出结果。

输出结果将为:

Low nibble: 0xA

小试牛刀🔪:

二进制分类

题目描述

若将一个正整数化为二进制数,在此二进制数中,我们将数字 1 1 1 的个数多于数字 0 0 0 的个数的这类二进制数称为 A A A 类数,否则就称其为 B B B 类数。
例如:
( 13 ) 10 = ( 1101 ) 2 (13)_{10}=(1101)_2 (13)10=(1101)2,其中 1 1 1 的个数为 3 3 3 0 0 0 的个数为 1 1 1,则称此数为 A A A 类数;
( 10 ) 10 = ( 1010 ) 2 (10)_{10}=(1010)_2 (10)10=(1010)2,其中 1 1 1 的个数为 2 2 2 0 0 0 的个数也为 2 2 2,称此数为 B B B 类数;
( 24 ) 10 = ( 11000 ) 2 (24)_{10}=(11000)_2 (24)10=(11000)2,其中 1 1 1 的个数为 2 2 2 0 0 0 的个数为 3 3 3,则称此数为 B B B 类数;
程序要求:求出 1~n 之中( 1 ≤ n ≤ 1000 1 \le n \le 1000 1n1000),全部 A , B A,B A,B 两类数的个数。
输入格式
输入 n n n
输出格式
一行,包含两个整数,分别是 A A A 类数和 B B B 类数的个数,中间用单个空格隔开。
样例
样例输入

7

样例输出

5 2

😘很明显,我们只需要得到一个数的二进制表达,然后用眼睛一扫,就可以数出来0和1哪个多(xixi),但我们这里只有10进制表达,如果都转为2进制的话还是有麻烦。虽然 C++ 中提供了一种用于存储 0 和 1 的数据类型 bitset ,可以用于将一个数转换为二进制,但没有必要。我们只需要借助今天学习的位与+位移–>就可以轻松解决。

❤️位移分为左移和右移:
左移就是向左移(乘以2),在后面补0,比如:110—>1100;
右移就是向右移(不一定是除以2),比如:1101–>110;

#include<iostream>using namespace std;
int num_a, num_b;//分别代表A类和B类数void recognize(int x)
{int sum;int sum_0=0, sum_1=0;//分别用来统计0和1的个数while (x > 0){sum = x & 1;//得到末位if (sum == 0) sum_0++;else sum_1++;x=x >> 1;//右移一位,得到上一位}if (sum_1 > sum_0) num_a++;else num_b++;}
int main(void)
{int n;cin >> n;for (int i = 1; i <= n; i++){recognize(i);}cout << num_a << " " << num_b;return 0;
}
  • 因题目过于简单,具体的解释我已经放在了注释中,不再过多说明。

拓展思考:

如何提取一个二进制数的末n位数呢❓

⭐️就比如拿10001110来说,我们要得到1110,那么最简单的方法就是让它和00001111位与,末4位–>与2^4-1位与。
⭐️相信聪明的你已经发现了,要想得到一个二进制数的末n位数,最简便的方法就是让它和2^n-1位与.👍
⭐️那问题又来了,怎么得到任意连续的位数呢❓ 其实这也不难想出,利用位移的思想即可转化为上面的问题。


2. 位掩码(Bitmasking):

❤️位掩码是一种使用位与操作来检查或设置特定位的值的技术。通过定义一些常量或宏来表示不同的位,可以使用位与操作来检查或设置特定位的值。例如,可以使用位与操作来检查一个数字的最低位是否为1,或者将某些位设置为0或1。

#include <stdio.h>#define FLAG_A (1 << 0)  // 第0位为1 001
#define FLAG_B (1 << 1)  // 第1位为1 010
#define FLAG_C (1 << 2)  // 第2位为1 100int main() {unsigned int flags = FLAG_A | FLAG_B;  // 设置第0位和第1位为1   011if (flags & FLAG_A) {printf("Flag A is set\n");}if (flags & FLAG_B) {printf("Flag B is set\n");}if (flags & FLAG_C) {printf("Flag C is set\n");} else {printf("Flag C is not set\n");}return 0;
}

❤️在这个例子中,我们使用位掩码来表示一组标志位。通过定义宏或常量,我们可以将不同的位与特定的含义关联起来。在 main 函数中,我们定义了一个 flags 变量,通过位或操作将 FLAG_A 和 FLAG_B 设置为1。然后,我们使用位与操作检查每个标志位的状态,并打印相应的消息。(位或明天会将,'|'中,有1必1,全0才0)

  • 输出结果将为:

Flag A is set
Flag B is set
Flag C is not set


3. 清零特定位:

❤️位与操作可以用于将一个数字的特定位清零。通过与一个只有特定位为0的掩码进行位与操作,可以将特定位的值清零,而保持其他位的值不变。

#include <stdio.h>
#define CLEAR_BIT(x, n) (x & (~(1 << n)))  //最终得到: 111...0...1int main() {unsigned int num = 0x3A;  // 二进制表示为 0011 1010unsigned int clearedNum = CLEAR_BIT(num, 3);  // 将第3位清零printf("Cleared num: 0x%X\n", clearedNum);return 0;
}

❤️在这个例子中,我们定义了一个宏 CLEAR_BIT,它接受两个参数:一个数字 x 和一个位的索引 n。宏的作用是将数字 x 的第 n 位清零。在 main 函数中,我们定义了一个变量 num,并使用 CLEAR_BIT 宏将其第3位清零。最后,我们使用 printf 函数打印出结果。(~是按位取反的意思,0变1,1变0)

  • 输出结果将为:

Cleared num: 0x32


4. 判断奇偶性:

❤️相信大家对于判断一个数是奇数还是偶数并不陌生。

  • 常见的方法大概是这样的:
#include<iostream>using namespace std;int main(void)
{int n;cin >> n;if(n%2==0)cout << "even" << endl;//偶数elsecout << "odd" << endl;//奇数return 0;
}

❤️但其实位与操作可以用于判断一个数字的奇偶性。通过与一个只有最低位为1的掩码进行位与操作,如果结果为0,则表示该数字为偶数;如果结果为1,则表示该数字为奇数。原因在于如果一个数是偶数,那么它的二进制表示中末位不能是1(为啥啊?),也就是它和1位与是0;奇数则二进制表示中末位一定是1。

  • 进阶代码如下:
#include <stdio.h>int main() {unsigned int num = 9;  // 二进制表示为 0000 1001if (num & 1) {printf("Number is odd\n");//奇数} else {printf("Number is even\n");//偶数}return 0;
}

❤️在这个例子中,我们定义了一个变量 num,它的二进制表示为 0000 1001。通过将 num 与1进行位与操作,我们可以判断最低位是否为1,从而判断数字的奇偶性。如果结果为1,则表示数字为奇数;如果结果为0,则表示数字为偶数。根据结果,我们打印相应的消息。

  • 输出结果将为:

Number is odd


三、思考题:

⭐️如何判断一个数是不是2的幂,怎么利用今天的知识来解决呢❓且听下回分解……


彩蛋:

好了,今天的讲解就到这里了,最后再放一个彩蛋:

❤️七夕节到了,想来一场浪漫的表白却又没有好方式的友友们看过来,别眨眼:

在这里插入图片描述

想不想实现自己的爱心呢?想!怎么做呢?跟着我做!

  1. 首先创建一个txt文本(用记事本就行);
  2. 把下面的html代码复制进去;
  3. 将后缀改为.html即可;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>真挚爱心</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>html, body {height: 100%;padding: 0;margin: 0;background: #000;
}
canvas {position: absolute;width: 100%;height: 100%;
}</style></HEAD><BODY><canvas id="pinkboard"></canvas><script>var settings = {particles: {length:   500, // maximum amount of particlesduration:   2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize:      30, // particle size in pixels},
};(function(){var b=0;var c=["ms","moz","webkit","o"];for(var a=0;a<c.length&&!window.requestAnimationFrame;++a){window.requestAnimationFrame=window[c[a]+"RequestAnimationFrame"];window.cancelAnimationFrame=window[c[a]+"CancelAnimationFrame"]||window[c[a]+"CancelRequestAnimationFrame"]}if(!window.requestAnimationFrame){window.requestAnimationFrame=function(h,e){var d=new Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(function(){h(d+f)},f);b=d+f;return g}}if(!window.cancelAnimationFrame){window.cancelAnimationFrame=function(d){clearTimeout(d)}}}());var Point = (function() {function Point(x, y) {this.x = (typeof x !== 'undefined') ? x : 0;this.y = (typeof y !== 'undefined') ? y : 0;}Point.prototype.clone = function() {return new Point(this.x, this.y);};Point.prototype.length = function(length) {if (typeof length == 'undefined')return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function() {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;
})();var Particle = (function() {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function(x, y, dx, dy) {this.position.x = x;this.position.y = y;this.velocity.x = dx;this.velocity.y = dy;this.acceleration.x = dx * settings.particles.effect;this.acceleration.y = dy * settings.particles.effect;this.age = 0;};Particle.prototype.update = function(deltaTime) {this.position.x += this.velocity.x * deltaTime;this.position.y += this.velocity.y * deltaTime;this.velocity.x += this.acceleration.x * deltaTime;this.velocity.y += this.acceleration.y * deltaTime;this.age += deltaTime;};Particle.prototype.draw = function(context, image) {function ease(t) {return (--t) * t * t + 1;}var size = image.width * ease(this.age / settings.particles.duration);context.globalAlpha = 1 - this.age / settings.particles.duration;context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);};return Particle;
})();var ParticlePool = (function() {var particles,firstActive = 0,firstFree   = 0,duration    = settings.particles.duration;function ParticlePool(length) {// create and populate particle poolparticles = new Array(length);for (var i = 0; i < particles.length; i++)particles[i] = new Particle();}ParticlePool.prototype.add = function(x, y, dx, dy) {particles[firstFree].initialize(x, y, dx, dy);// handle circular queuefirstFree++;if (firstFree   == particles.length) firstFree   = 0;if (firstActive == firstFree       ) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function(deltaTime) {var i;// update active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].update(deltaTime);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].update(deltaTime);for (i = 0; i < firstFree; i++)particles[i].update(deltaTime);}// remove inactive particleswhile (particles[firstActive].age >= duration && firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function(context, image) {// draw active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].draw(context, image);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].draw(context, image);for (i = 0; i < firstFree; i++)particles[i].draw(context, image);}};return ParticlePool;
})();(function(canvas) {var context = canvas.getContext('2d'),particles = new ParticlePool(settings.particles.length),particleRate = settings.particles.length / settings.particles.duration, // particles/sectime;// get point on heart with -PI <= t <= PIfunction pointOnHeart(t) {return new Point(160 * Math.pow(Math.sin(t), 3),130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25);}// creating the particle image using a dummy canvasvar image = (function() {var canvas  = document.createElement('canvas'),context = canvas.getContext('2d');canvas.width  = settings.particles.size;canvas.height = settings.particles.size;// helper function to create the pathfunction to(t) {var point = pointOnHeart(t);point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;return point;}// create the pathcontext.beginPath();var t = -Math.PI;var point = to(t);context.moveTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // baby steps!point = to(t);context.lineTo(point.x, point.y);}context.closePath();// create the fillcontext.fillStyle = '#ea80b0';context.fill();// create the imagevar image = new Image();image.src = canvas.toDataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime   = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar amount = particleRate * deltaTime;for (var i = 0; i < amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width  = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function() {onResize();render();}, 10);
})(document.getElementById('pinkboard'));</script></BODY>
</HTML>

⭐️七夕快乐!愿天下有情人终成眷属!⭐️
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/48087.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Cadence】差分管噪声贡献差别很大的可能原因

举例&#xff1a;M2 M3是一对差分管&#xff0c;噪声贡献差别很大。 理想电感下二者贡献相同&#xff0c; 但在实际电磁仿真后&#xff0c;一个17.6%&#xff0c;一个5.6% 原因是&#xff1a; 电磁仿真存在交叉&#xff0c;不对称&#xff0c;中心抽头不是理想的交流地&#x…

初识C语言

目录 一、C语言的概念 二、第一个C语言程序 三、数据类型 四、变量和常量 4.1 变量定义方法 4.2 变量的命名 4.3 变量的分类 4.4 变量的作用域和生命周期 4.5 常量 五、字符串和转义字符 5.1 字符串 5.2 转义字符 六、注释 七、选择语句 八、循环语句 九、函数 十、数…

如何使用CSS实现一个全屏滚动效果(Fullpage Scroll)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…

node_modules.cache是什么东西

一开始没明白这是啥玩意&#xff0c;还以为是npm的属性&#xff0c;网上也没说过具体的来源出处 .cache文件的产生是由webpack4的插件cache-loader生成的&#xff0c;node_modules里下载了cache-loader插件&#xff0c;很多朋友都是vuecli工具生成的项目&#xff0c;内置了这部…

以创新点亮前路,戴尔科技开辟数实融合新格局

编辑&#xff1a;阿冒 设计&#xff1a;沐由 2023年&#xff0c;对于戴尔科技而言是特殊的一年&#xff0c;这是戴尔科技进入中国市场第25个年头——“巧合”的是&#xff0c;这25年也是中国产业经济发展最快&#xff0c;人们工作与生活发生变化最大的四分之一个世纪。 2023年&…

mysql全文检索使用

数据库数据量10万左右&#xff0c;使用like %test%要耗费30秒左右&#xff0c;放弃该办法 使用mysql的全文检索 第一步:建立索引 首先修改一下设置: my.ini中ngram_token_size 1 可以通过 show variables like %token%;来查看 接下来建立索引:alter table 表名 add f…

.Net程序调试时接受外部命令行参数方式

1.对项目右键&#xff0c;属性 2.在调试中打开常规&#xff0c;打开调试启动配置文件UI 3.输入需要的命令行参数

idea 左下角的Git(Version Control)中显示Local Changes窗口

打开Local Changes窗口来查看当前Git仓库的本地变更。 使用快捷键: - Windows: Alt9 - Mac: Cmd9 解决&#xff1a; &#xff08;1&#xff09;idea打开settings &#xff08;2&#xff09;点击Version Control窗口选项卡&#xff0c;选择Commit选项&#xff0c;对 Use.... in…

springBoot防止重复提交

自定义注解AOPRedis 自定义注解 package com.wzw.config.anno;import java.lang.annotation.*;/*** 自定义注解防止表单重复提交*/ Target(ElementType.METHOD) // 注解只能用于方法 Retention(RetentionPolicy.RUNTIME) // 修饰注解的生命周期 Documented public interface …

【微服务学习笔记】认识微服务

【微服务学习笔记】认识微服务 单体架构 分布式架构 微服务架构 SpringCloud 服务拆分和注意事项 服务拆分的案例demo 各个服务之间的数据库都是相互独立的&#xff0c;你不能直接访问对方的数据库&#xff0c;只能从一个服务像另外一个服务发起远程调用 在订单模块的服务中 …

【宝藏系列】一文讲透C语言数组与指针的关系

【宝藏系列】嵌入式 C 语言代码优化技巧【超详细版】 文章目录 【宝藏系列】嵌入式 C 语言代码优化技巧【超详细版】&#x1f468;‍&#x1f3eb;前言1️⃣指针1️⃣1️⃣指针的操作1️⃣2️⃣关于指针定义的争议1️⃣3️⃣对教材错误写法的小看法 2️⃣指针和数组的区别2️⃣…

Azure文件共享

什么是Azure文件共享 Azure文件共享是一种在云中存储和访问文件的服务。它允许用户在不同的计算机、虚拟机和服务之间共享数据&#xff0c;并在应用程序中进行访问、修改和管理。 Azure文件共享可以用于各种用途&#xff0c;例如&#xff1a; 共享文件资源给多个虚拟机或服务…

数学建模大全及优缺点解读

分类模型 1、距离聚类&#xff08;系统聚类&#xff09;&#xff08;常用&#xff0c;需掌握&#xff09; 优点&#xff1a; ①将一批样本数据按照他们在性质上的亲密程度在没有先验知识的情况下自动进行分类 ②是一种探索性的分析方法&#xff0c;分类结果不一定相同 例如&am…

初始C语言(7)——详细讲解有关初阶指针的内容

系列文章目录 第一章 “C“浒传——初识C语言&#xff08;1&#xff09;&#xff08;更适合初学者体质哦&#xff01;&#xff09; 第二章 初始C语言&#xff08;2&#xff09;——详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言&#xff08;3&#xff09;——…

NestJS 中的 gRPC 微服务通信

想象一下&#xff0c;你回家过节&#xff0c;你的家人决定聚会。而不是让一个人做所有的烹饪&#xff0c;每个人都同意带上他们擅长制作的特色菜。目标是通过组合所有这些菜肴来制作一顿完整的饭菜。你同意做鸡肉炒饭&#xff0c;你哥哥做甜点蛋糕&#xff0c;妹妹做沙拉。 每…

2022年工作架构分析

mpmw自动化流程工具 schema动态数据 Schema 本身是一个JSON &#xff0c;Schema 通过一些特定字段描述和定义 JSON的数据结构。 最常见的表单通过类XML语法定义。一些库支持通过一些特定结构的 JSON (Schema)来生成类XML标签。 formily 是其中实现之一。 表单设计器通过可视…

excel统计函数篇2之count系列

1、COUNT(value1,[value2],…):计算参数列表中数字的个数 2、COUNTA(value1,[value2],…)&#xff1a;计算参数列表中值的个数 联想在excel之数学函数、excel中的通配符一文中提到求和函数&#xff1a; SUMIF(range,ceriteria,[sum_range])&#xff1a;对范围内符合指定条件的…

【广州华锐互动】牲畜养殖VR模拟实操系统为传统教育注入新的生命力

随着科技的不断发展&#xff0c;虚拟现实(VR)技术已经逐渐走进我们的生活。在农业领域&#xff0c;VR技术的应用也日益广泛&#xff0c;为现代农业人才培养提供了新的途径。 由广州华锐互动开发的“牲畜养殖VR模拟实操系统”引起了广泛关注&#xff0c;系统包含了鸡、猪、牛、马…

MFC140.dll缺失的修复方法,安装MFC140.dll文件

大家好&#xff0c;今天我要和大家分享的是如何正确安装和使用MFC140.dll。MFC140.dll是一种常见的动态链接库文件&#xff0c;它是Microsoft Foundation Classes(MFC)的一部分&#xff0c;被广泛应用于Windows操作系统中的各种应用程序中。在本文中&#xff0c;我们将详细介绍…

「Vue|网页开发|前端开发」01 快速入门:用vue-cli快速写一个Vue的HelloWorld项目

本文主要介绍如何用vue开发的标准化工具vue-cli快速搭建一个符合实际业务项目结构的hello world网页项目并理解vue的代码文件结构以及页面渲染流程。 文章目录 一、准备工作&#xff1a;安装node.js二、项目搭建创建项目目录全局安装vue-cli使用Webpack初始化项目启动项目学会…