如何快速上手Vue框架

一、Vue框架
- 1.Vue简介
- 2.Vue的产生背景
- 3.Vue主要功能
- 4.Vue运行环境
- 5.Vue框架特点
- - 5.1 易学易用
  - 5.2 性能出色
  - 5.3 灵活多变
- 6.Vue的项目结构
- 7.Vue官网
- 8.Vue的Hello World!示例代码
二、Vue框架
- 1.Vue和Node.js的关系
- - 1.1 下载Node.js
  - 1.2 安装Node.js
  - 1.3 同意协议
  - 1.4 安装目录
  - 1.5 自定义安装
  - 1.6 本机模块工具
  - 1.7 正式安装Node.js
  - 1.8 安装完成
- 2.创建一个 Vue 应用
三、学习和资源

如何快速上手Vue框架

一、Vue框架

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。

1.Vue简介

Vue是基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

一个成熟的、经历了无数实战考验的框架;
目前生产环境中使用最广泛的JavaScript框架之一;
可以轻松处理大多数web应用的场景;
并且几乎不需要手动优化;
并且完全有能力处理大规模的应用。

如果你是一个初学者，或者是想要了解如何快速上手Vue框架的开发者，那么这篇博客将会是你的好帮手。

2.Vue的产生背景

Vue由Evan You（尤雨溪）创建，于2014年发布。
Vue使用model-view-viewmodel （MVVM）体系结构。
Evan You之前在Google研究过AngularJS，并提取了Angular的部分特性以提供一个更轻量级的框架。

3.Vue主要功能

Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue是一个框架，也是一个生态。可以用不同的方式使用Vue：
无需构建步骤，渐进式增强静态的HTML；
在任何页面中作为Web Components嵌入；
单页应用 (SPA)；
全栈/服务端渲染 (SSR)；
Jamstack/静态站点生成 (SSG)；
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面。

4.Vue运行环境

Vue可以直接安装在Windows或适用于Linux的Windows子系统 (WSL) 上，可使用Node包管理器 (npm) 安装。

5.Vue框架特点

5.1 易学易用

基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。

5.2 性能出色

经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。

5.3 灵活多变

丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

6.Vue的项目结构

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	包含了几个目录及文件：
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

上表为Vue的目录结构

7.Vue官网

Vue中文官网
如何快速上手Vue框架

Vue演练场

8.Vue的Hello World!示例代码

<script>
export default {data() {return {msg: 'Hello World!'}}
}
</script><template><h1>{{ msg }}</h1><input v-model="msg">
</template>

二、Vue框架

1.Vue和Node.js的关系

如果web项目中没有前后端分离，直接使用的方式引入vue，可以不安装nodeJs。因为这时候当客户端访问网页，网页中使用了vue，然后网页是运行在客户端的浏览器中的，vue.js是js文件，浏览器本来就可以执行js文件，因为浏览器底层有js引擎。

如果web项目中有前后端分离，前端项目想单独运行在服务器端，那么就要依赖nodeJs，不管前端项目是用vue技术栈还是react技术栈，因为项目想要运行，就必须依赖服务器，传统的nodejs可以用express充当服务器；而vue生态圈中有vue-cli脚手架，它已经实现服务器的功能，并且可以在它里面运行vue前端项目。

1.1 下载Node.js

Node.js下载地址
https://nodejs.org/en/download/
如何快速上手Vue框架

【Node.js Windows 64位安装版】下载地址

1.2 安装Node.js

双击node-v20.11.1-x64开始安装
如何快速上手Vue框架

1.3 同意协议

同意node协议
如何快速上手Vue框架

1.4 安装目录

选择安装目录

如何快速上手Vue框架

1.5 自定义安装

自定义需要的项目安装(Vue框架的系统默认就可以了)

如何快速上手Vue框架

1.6 本机模块工具

不必打勾,Next
如何快速上手Vue框架

1.7 正式安装Node.js

点击install开始正式安装Node.js
如何快速上手Vue框架

1.8 安装完成

点击Finish，安装完成。
如何快速上手Vue框架

可以在CMD里面输入命令“node -v”和“npm -v”即可查看版本。

2.创建一个 Vue 应用

在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。

在命令行中运行以下命令：

npm命令

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

npm命令

cd <your-project-name>
npm install
npm run dev

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

三、学习和资源

要深入学习Vue.js，你可以参考官方文档，它提供了详细的指南和API参考。此外，社区中有许多教程、博客文章和视频教程可以帮助你解决具体问题或学习高级概念。

深度指南
https://cn.vuejs.org/guide/introduction.html

互动教程
https://cn.vuejs.org/tutorial/#step-1

示例大全
https://cn.vuejs.org/examples/#hello-world

术语表
https://cn.vuejs.org/glossary/

生产环境错误代码参考
https://cn.vuejs.org/error-reference/

通过这些步骤和资源，能够快速上手Vue框架，构建Vue应用。
不断实践和探索是成为Vue开发者的关键！