【Vue3】概述以及环境搭建
一，概述
在已经有了HTML和JS，CSS的情况下，已经可以做一个非常完善的网站了。那我们为什么还需要Vue呢？
假设你要做一个待办事项列表，用户可以：
- 输入新事项
- 点击“添加”按钮，事项添加到列表
- 点击事项旁的“删除”按钮，删除该项
- 列表底部实时显示“共 X 条事项”
用原生 JS 实现大致需要：
<ul id="todo-list"></ul>
<div>共 <span id="count">0</span> 条</div>
<input id="input" type="text">
<button id="addBtn">添加</button>
let todos = [];
const listEl = document.getElementById('todo-list');
const countEl = document.getElementById('count');
const inputEl = document.getElementById('input');
function render() {
// 手动清空列表
listEl.innerHTML = '';
// 循环生成每个li，并绑定删除事件
todos.forEach((todo, index) => {
const li = document.createElement('li');
li.textContent = todo.text;
const delBtn = document.createElement('button');
delBtn.textContent = '删除';
delBtn.onclick = () => {
todos.splice(index, 1);
render(); // 删除后又要手动重新渲染整个列表
};
li.appendChild(delBtn);
listEl.appendChild(li);
});
// 手动更新计数
countEl.textContent = todos.length;
}
document.getElementById('addBtn').onclick = () => {
const val = inputEl.value.trim();
if (val) {
todos.push({ text: val });
render(); // 添加后再次手动渲染
inputEl.value = '';
}
};
// 初始渲染
render();
这段代码暴露了三个缺点：
- 数据和DOM手动同步：每次数据变化（增删），都必须显式调用
render()，而且要自己操心怎么更新DOM（清空、重建、绑定事件）。 - 低效且易错：如果列表很大，清空重建性能差；如果忘记调用
render()，页面就会显示错误的数据。 - 逻辑分散：修改数据的代码（
todos.push、splice）和更新页面的代码（render）分离，维护起来很累。
而用 Vue，你可以这样写：
<template>
<div>
<ul>
<li v-for="(todo, idx) in todos" :key="idx">
{{ todo.text }}
<button @click="todos.splice(idx, 1)">删除</button>
</li>
</ul>
<div>共 {{ todos.length }} 条</div>
<input v-model="newTodoText" @keyup.enter="addTodo">
<button @click="addTodo">添加</button>
</div>
</template>
<script>
export default {
data() {
return {
todos: [],
newTodoText: ''
};
},
methods: {
addTodo() {
if (this.newTodoText.trim()) {
this.todos.push({ text: this.newTodoText });
this.newTodoText = '';
}
}
}
};
</script>
你只需要关心数据 todos 和 newTodoText 的变化（调用 push、splice、修改文本），Vue 会自动、高效地更新列表、计数、输入框。
Vue的主要作用是通过响应式的数据系统，将数据与页面内容的渲染进行声明式解耦。开发者只需要维护数据状态，Vue会自动高效地将数据状态映射到用户界面上。
二，环境搭建
1.方式一：CDN引入
CDN是什么？
CDN 的全称是 Content Delivery Network，中文叫内容分发网络。
核心思想是就近获取。
没有CDN的时候：用户访问一个网站，所有请求都要去网站原来的服务器（比如在北京）处理。如果你是广东的用户，也得千里迢迢去北京取数据，容易导致访问慢、卡顿。
有CDN时：网站会把图片、视频等静态内容提前复制并分发到全国各地甚至海外的众多“边缘节点”服务器上。广东用户访问时，系统会自动从离广东最近（比如深圳）的节点提供服务，速度飞快。
那么通过CDN引入Vue，就差不多是这种方式。
通过CDN引入Vue时，浏览器第一次会从CDN服务器下载文件并保存到本地硬盘缓存；在缓存有效期内（通常很长），第二次及以后访问时，浏览器直接从本地硬盘缓存读取，不再重新下载，除非缓存被清除或过期。
这里要说明一下缓存也是磁盘上的，关机之后不会丢失，和内存不一样，所以安全。
只需要在一个hmtl文件中加载vue3的cdn链接，就可以写vue代码了。
如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue3 CDN 示例</title>
<!-- 1. 引入 Vue 3 全局构建版本 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- 2. 定义 Vue 将要控制的 DOM 区域 -->
<div id="app">
<p>{{ message }}</p>
<button @click="changeMessage">点我</button>
</div>
<!-- 3. 编写 Vue 3 逻辑 -->
<script>
// 从全局 Vue 对象中拿到 createApp 和 ref
const { createApp, ref } = Vue;
// 创建应用
createApp({
setup() {
// 响应式数据
const message = ref('你好，Vue 3！');
// 方法
const changeMessage = () => {
message.value = '按钮被点击了！';
};
// 返回给模板使用
return { message, changeMessage };
}
}).mount('#app'); // 挂载到 div#app
</script>
</body>
</html>
常用的vue3的cdn链接：
开发版（带警告提示）：https://unpkg.com/vue@3/dist/vue.global.js
生产版（体积更小，无警告）：https://unpkg.com/vue@3/dist/vue.global.prod.js
ES 模块版（用于 type=“module”）：https://unpkg.com/vue@3/dist/vue.esm-browser.js
2.使用脚手架创建一个工程化的vue3项目
前提：你需要先有Node.js。
Node.js 会自带 npm（包管理器），用来下载依赖和运行脚本。
使用以下命令验证：
node -v # 应显示 v16.x.x 或更高
npm -v # 应显示版本号
验证成功之后，我们进入创建好的项目文件夹，在文件的那个地址栏输入cmd，在命令窗口中输入以下内容：
npm create vue@latest
create-vue 是 Vue 官方推荐的脚手架工具，基于 Vite。
运行之后，会被问道几个选项：
| 问题 | 推荐选择（初学者） |
|---|---|
| Project name | 输入项目名，例如 my-vue3-project |
| Add TypeScript? | No（先不学 TypeScript） |
| Add JSX support? | No |
| Add Vue Router? | No（后面再学路由） |
| Add Pinia? | No（状态管理，以后再说） |
| Add Vitest? | No |
| Add an end-to-end testing solution? | No |
| Add ESLint? | No（代码检查，可先不要） |
这里按照个人需要来就行。
之后我们可以看到在执行命令的文件夹之中多了刚刚创建的vue3项目。
现在我们还没有安装依赖，首先进入vue3项目之中。
cd my-vue3-project
npm install
之后启动开发服务器。
npm run dev
在浏览器中打开运行之后显示的地址，可以看到一个vue欢迎页面。
注意，这里并不能用vscode中的Live Server插件来启动，它只是一个轻量级的静态文件服务器，主要功能是把硬盘上的HTML，CSS，JS文件在本地提供一个HTTP地址来访问。
Live Server不理解Vue的代码。它无法处理 .vue 文件，也不能解析 import 这种现代JavaScript的模块语法，这些代码浏览器根本无法执行
总之，在项目的命令窗口中运行npm run dev才能运行vue项目。它不只是一个简单的HTTP文件服务器，还是一个开发环境发动机。它的核心任务就是处理那些现代前端项目（如Vue）特有的、浏览器无法直接理解的文件（比如 .vue 单文件组件），并提供一个热更新的开发环境。
假设在开发完成之后，需要把项目打包成纯粹的 HTML/CSS/JS 文件时运行。
运行以下命令：
npm run build
这会生成一个 dist 文件夹，里面的文件就是你可以部署到服务器的最终代码。
接下来说说这里脚手架生成的项目结构。
使用vscode打开项目文件，会看到已经有了以下内容：
| 文件 / 文件夹 | 属于哪一层 | 核心作用（大白话解释） | 需要经常修改吗？ |
|---|---|---|---|
src/ |
核心工作区 | 你的主战场。存放所有的源代码（JS、Vue组件、样式等）。 | 天天改 |
package.json |
项目的地基 | 项目账本。记录了项目名称、版本以及安装了哪些第三方插件。 | 偶尔改（装新插件时） |
index.html |
项目的地基 | 唯一的舞台。单页面应用的入口 HTML，Vue 负责把内容塞进这里。 | 几乎不改 |
node_modules/ |
项目的地基 | 依赖库房。存放下载好的第三方代码体积巨大，禁止手动修改。 | 绝不手动改 |
vite.config.js |
工具配置 | 打包器配置。用来控制项目如何运行、打包、怎么处理路径。 | 极少改 |
public/ |
工具配置 | 公共仓库。放不需要被编译的原生资源，如网页标签栏的图标。 | 极少改 |
jsconfig.json |
工具配置 | 代码提示助手。给 VS Code 用的，让它写路径时能自动提示。 | 几乎不改 |
.vscode/ |
工具配置 | 编辑器配置。存放只针对这个项目的 VS Code 专用设置。 | 几乎不改 |
.gitignore |
工具配置 | Git 忽略清单。告诉 Git 哪些文件（如 node_modules）不需要提交。 | 几乎不改 |
README.md |
工具配置 | 项目说明书。用 Markdown 写的项目启动和开发指南。 | 偶尔改 |
代码应该写在哪里？
你未来 95% 的时间都在src/文件夹里写代码。初学第一步，直接点开src/App.vue，把你看到的所有默认内容删光，这里就是你写第一个组件、开始实现业务逻辑的地方。
更多推荐
10
0- 0
已为社区贡献11条内容
所有评论(0)