Vue.js 学习笔记一：Vue 框架简介和环境快速搭建

最新推荐文章于 2024-06-07 10:08:27 发布

stary1993

最新推荐文章于 2024-06-07 10:08:27 发布

阅读量190

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： vue js

本文链接：https://blog.csdn.net/qq_27875933/article/details/114997813

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

Vue 框架简介

Vue 环境快速搭建

Vue 框架简介

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 学习起来非常简单，本笔记基于 Vue 2.x 版本测试。

需要了解的知识：

HTML
CSS
JavaScript

Vue 提供了以下的功能：

虚拟DOM

Vue 使用了虚拟 DOM，这个虚拟 DOM 也被 React，Ember 等其他框架所使用。这个改变不是在 DOM 上进行的，而是创建了一个以 JavaScript 数据结构形式存在的 DOM 副本。每当进行任何更改时，都会对 JavaScript 数据结构进行更改，并将后者与原始数据结构进行比较。然后，最终的更改将更新为真实的 DOM，用户将看到这种变化。这在优化方面是很好的，它比较容易，可以以更快的速度进行改变。

数据绑定

数据绑定功能可以帮助操纵或分配 HTML 属性的值，改变样式，通过 Vue 提供的称为v-bind的绑定指令来分配类。

组件

组件是 Vue 的重要功能之一，可以帮助创建可以在 HTML 中重用的自定义元素。

事件处理

v-on 是添加到 DOM 元素以监听 Vue 中的事件的属性。

动画/过渡

Vue 提供了多种方式来在向 DOM 元素添加/更新或删除 HTML 元素时应用转换。 Vue 有一个内置的转换组件，需要将其包装在元素中以获得转换效果。我们可以轻松地添加第三方动画库，也可以为界面添加更多的交互性。

计算属性

这是 Vue 的重要特性之一。它有助于倾听对 UI 元素所做的更改并执行必要的计算。这不需要额外的编码。

模板

Vue 提供基于 HTML 的模板，将 DOM 与 Vue 实例数据绑定。Vue将模板编译为虚拟DOM渲染功能。我们可以使用渲染函数的模板，这样必须用渲染函数替换模板。

指令

Vue 有内置的指令，例如：v-if，v-else，v-show，v-on，v-bind和v-model，这些指令用于在前端执行各种操作。

观察者

观察者(Watcher)被应用于改变的数据。例如，表单输入元素。在这里不必添加任何额外的事件。观察者负责处理任何数据更改，使代码简单快捷。

路由

页面之间的导航是在 vue-router 的帮助下完成的。

轻量级

Vue 脚本非常轻便，性能也非常快。

Vue 公司-CLI

可以使用vue-cli命令行界面在命令行安装 Vue 。这有助于使用vue-cli轻松构建和编译项目。

Vue 环境快速搭建

直接用 `<script>` 引入（新手推荐）

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

开发版本包含完整的警告和调试模式

生产版本删除了警告，33.30KB min+gzip

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

对于制作原型或学习，你可以这样使用最新版本CDN：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

 # 最新稳定版
 $ npm install vue

Vue CLI 命令行工具

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。如果你是新手，我们强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI

可以使用下列命令安装这个新的包：

 npm install -g @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

上面列出来的命令是用于升级全局的 Vue CLI。如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade：

用法： upgrade [options] [plugin-name]

（试用）升级 Vue CLI 服务及插件

选项：
  -t, --to <version>    升级 <plugin-name> 到指定的版本
  -f, --from <version>  跳过本地版本检测，默认插件是从此处指定的版本升级上来
  -r, --registry <url>  使用指定的 registry 地址安装依赖
  --all                 升级所有的插件
  --next                检查插件新版本时，包括 alpha/beta/rc 版本在内
  -h, --help            输出帮助内容

运行以下命令来创建一个新项目：