Vue学习

Vue.js前端框架入门

一、什么是Vue.js

是渐进式JavaScript框架，广泛使用的前端开发框架。

1. 广泛使用的前端开发框架：PC端网页、移动端H5站点、小程序、App（安卓、IOS）
2. 用于开发单页面应用：只有一个HTML页面（Single Page web Application，SPA），使用JavaScript动态切换HTML内容，不需要通过刷新重新加载页面。
3. 组件化开发方式：把一个页面按照模块拆分成N个小块。
   什么是组件：按模块划分的前端代码片段，可复用的前端代码片段，容易维护的前端代码片段
   
4. 生态丰富、学习成本低

优点：

• 用户体验更好
• 减轻服务器的压力
• 前后端完全分离，通过接口（Restful API）进行通信
• 接口代码的复用

二、Vue.js生态圈及其周边扩展

• 官方维护开发的框架及扩展
• 第三方UI框架、组件库。如：VantUI
• 基于Node.js的模块
• 完整的技术文档和学习资料

三、Vue.js框架的结构、组件开发思想

四、Vue.js所适用的场景

异步网络请求库
组件拆分，前端功能实现
接口实现，前后端联调

Vue安装

Node.js环境安装

Node.js 官网：https://nodejs.org/en ，下载 Node.js LTS 版本的安装包：

LTS 表示该安装包是一个被长期支持的版本，可以理解成是一个稳定版本。

点击下一步。






安装完成后验证安装是否成功：

创建一个 Vue 应用

进入到当前工作目录正是打算创建项目的目录：

npm create vue@latest

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

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

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

创建后的项目目录如下：

• node_modules : 项目依赖包文件夹，比如通过 npm - - install 包名 安装的包都会放在这个目录下；
• public : 公共资源目录，用于存放公共资源，如 - favicon.ico 图标等；
• index.html : 首页；
• package.json : 项目描述以及依赖；
• package-lock.json : 版本管理使用的文件；
• README.md : 用于项目描述的 markdown 文档；
• src : 核心文件目录，源码都放在这里面；

• assets : 静态资源目录，用于存放样式、图片、字体等；
• components: 组件文件夹，通用的组件存放目录；
• App.vue: 主组件，也是页面的入口文件，所有页面都是在 App.vue 下进行路由切换的；
• main.js : 入口 Javascript 文件；项目的核心文件。

成功执行以上命令后访问 http://localhost:5173/，输出结果如下所示：

vue官网：https://cn.vuejs.org/