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 表示该安装包是一个被长期支持的版本，可以理解成是一个稳定版本。

点击下一步。






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

修改全局依赖包下载路径：
默认情况下，我们在执行npm install -g XXXX下载全局包时，这个包的默认存放路径位C:\Users\用户名\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g查看。
我们可以自定义存放目录,在CMD窗口执行以下两条命令修改默认路径：

npm config set prefix "C:\node\node_global"
1

npm config set cache "C:\node\node_cache"
1

或者打开c:\node\node_modules\npm.npmrc文件，修改如下：

prefix =C:\node\node_global
cache = C:\node\node_cache
1
2

创建一个 Vue 应用

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

npm create vue@latest
1

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

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

cd <your-project-name>
npm install
npm run dev
1
2
3

创建后的项目目录如下：

• 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/