原文链接1Web概述Web三要素：HTML、CSS、JavaScript。HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制网页的行为。1.1HTMLHTML即超文本标记语言（HyperTextMarkupLanguage），一种用于设计网页标记语言的纯文本语言。用这种语言编写的文件以.html或.htm为后缀，由浏览器解释执行，在HTML页面上可以嵌套脚本语言编写程序段，如JavaScript。HTML的工作原理：HTML是部署在服务器上的文本文件。根据HTTP协议，浏览器向服务器发送请求，服务器响应浏览器并返回一个HTML，浏览器解释并执行HTML来显示内容。1.2CSSCSS即层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。CSS是HTML的化妆师。1.3JavaScriptJavaScript是一种嵌入在浏览器中的HTML中的脚本语言。它有类似java和C语言的语言。它是一种用于向HTML页面添加交互行为的Web编程技术。它直接嵌入到HTML页面中并由浏览器解释。在没有预编译的情况下执行代码。2新建项目启动，安装依赖包：npminstall如果部分包安装失败：npmauditfix--force启动：npmrunserve打包：npmrunbuild3安装Vue3.1安装Node.js在安装vue之前，需要先安装Node.js。Node.js下载地址为：https://nodejs.org/en/download/选择对应版本下载，选择WindowsInstaller(.msi)forWindows。双击下载的.msi安装包，按照默认配置一步步执行。安装完成后，打开命令提示符，输入路径：path在输出的众多路径中，可以看到环境变量中已经包含了安装node.js的路径：D:\NodeJS\查看版本ofNode.js:node--version输出版本号：v16.15.1表示安装成功。3.2安装Vue.jsNode.js安装成功后，就可以安装Vue.js了。国内直接用npm官方镜像很慢，一般用淘宝npm镜像。首先切换安装镜像：npminstall-gcnpm--registry=https://registry.npmmirror.com然后使用cnpm命令安装vue：cnpminstallvue安装完成后查看vue版本，输入：vue--version输出版本号：2.9.6表示安装成功。4单页示例4.1安装环境首先全局安装vue-cli：cnpminstall--globalvue-cli使用cd命令切换到一个新的存放web项目的目录（可以跳过这一步，使用默认目录）你嫌麻烦):#从C盘切换到D盘C:\Users\zblz2>d:#进入vue目录D:\>cdVue基于webpack模板新建项目，项目名为my-vue:vueinitwebpackmy-vue默认配置：这将安装Vue2.x版本的模板。默认输入：?项目名称我的项目？项目描述Vue.js项目？作者runoobmailto:test@runoob.com?Vue独立构建？使用ESLint来检查你的代码？是的？选择一个ESLint预设标准？使用Karma+Mocha设置单元测试？是的？使用Nightwatch设置端到端测试？是vue-cli生成“my-project”。开始：cdmy-projectnpminstallnpmrundev文档可以在https://vuejs-templates.github找到...输入新建的my-vue文件:cdmy-vue4.2启动项目，执行安装运行命令：cnpminstallcnpmrundev看到输出：DONECompiledsuccessfullyin5292msI你的应用运行在这里：http://localhost:8080表示执行成功，打开浏览器访问http://localhost:8080/，可以看到前端输出结果：PackageVueProject:npmrunbuild执行后，vue项目下会生成一个dist目录。dist目录包含静态目录和index.html文件。静态目录包含静态文件js、css和图片目录images。4.3目录结构node_modules文件夹是项目依赖包，是cnpminstall命令下载的依赖。代码主体在src文件夹下。想了解更多编程知识，请关注我的公众号：代码之道
