【vue3入门】-【1】Vue介绍与项目结构

Vue是什么？

渐进式javaScript框架，易学易用，性能出色，适用场景丰富的web框架

官方文档

地址：https://cn.vuejs.org

Vue简介

是渐进式javascript框架，易学易用，性能出色，适用场景丰富的web前端框架

Vue是一款用于构建用户节点的javascript框架。它基于标准html、css、javascript构建并提供了一套声明式的，组件化的编程模型，帮助高效开发用户界面。

渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的 需求，但是web世界时十分多样化的。不同的开发者，在web上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，vue的设计非常注重灵活性和可以被逐步集成这个特点。根据需求场景，可以使用不同的方式使用vue。

• 无需构建步骤，渐进是增强静态的html
• 在任何页面中作为web components嵌入
• 单页应用（SPA）
• 全栈/服务端渲染（SSR）
• Jamstack/静态站点生成（SSG）
• 开发桌面端、移动端、webGL，甚至是命令行终端中的界面

Vue版本

目前，在开发中有Vue2和Vue3，老项目中一般使用Vue2，而新项目一般选择vue3开发。Vue3对Vue2兼容

Vue API风格

Vue的组件可以按照两种不同的风格书写：选项式API（vue2）和组合式API(vue3)

大部分的核心 概念在两种风格之间都是通用的。熟悉一种风格以后，可以很快了解另一种风格，组合式相对选项式更简洁

Vue开发

Vue开发前的准备

前提条件：

1. 熟悉终端命令行
2. 已安装15.0或者更高版本nodejs

创建vue项目

npm init vue@latest

这一命令将会安装并执行create-vue，它是vue官方的脚手架工具。将会看见一些诸如一些typescript和测试支持之类的可选功能提示，创建过程中不要使用大写

创建过程中会提供很多选项，初期阶段都默认否就行，后期时根据需要选择对应选项

项目创建后，通过以下步骤安装依赖并启动开发服务器

cd

npm install

npm run dev

启动后可根据此访问路径在浏览器访问，出现以下页面则说明启动成功

开发环境准备

推荐的IDE配置是vscode+Volar扩展，可能出现版本兼容性问题，需要更新vscode

vscode搜索组件库后，选择vue-official

打开上述项目后，可查看到创出文件的目录信息

vue项目的目录结构

package.json文件内容

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9