Vue2 入门

发表于 2022-08-08 分类于框架， js

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view)
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue
被设计为可以自底向上逐层应用。Vue
的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue
也完全能够为复杂的单页应用提供驱动。

安装

兼容性

Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5
特性。但它支持所有兼容 ECMAScript 5 的浏览器。

语义化版本控制

Vue
在其所有项目中公布的功能和行为都遵循语义化版本控制。对于未公布的或内部暴露的行为，其变更会描述在发布说明中。

更新日志

最新稳定版本：2.7.16

每个版本的更新日志见 GitHub。

vue 开发者工具 Vue Devtools

在使用 Vue 时，我们推荐在你的浏览器上安装
Vue Devtools。它允许你在一个更友好的界面中审查和调试
Vue 应用。

Vue Devtools 的旧版本 (v6)
Vue.js devtools - Chrome 应用商店
|
火狐
【新版本】Vue.js devtools-
用于调试 Vue.js 应用程序的 Chrome
开发工具扩展。Vue.js devtools - Chrome 应用商店
| 火狐

直接用 `<script>` 引入

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

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

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

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

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

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

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

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

1
2
3

<script type="module">
  import Vue from "https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.esm.browser.js";
</script>

你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM
包的源代码。

Vue 也可以在 unpkg 和
cdnjs 上获取 (cdnjs
的版本更新可能略滞后)。

添加国内镜像 BootCDN|
Staticfile CDN

请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把
vue.js 换成
vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

安装之命令行工具 (CLI)

注：Vue CLI 现已处于维护模式! 现在官方推荐使用 create-vue 来创建基于 Vite
的新项目。

安装：

1
2
3

npm install -g @vue/cli
# OR
yarn global add @vue/cli

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

1	vue -V 或 vue --version

可选：让 Vue CLI 永远用 npm

1	vue config --set packageManager npm

使用 vue create 命令创建项目：

1
2
3

vue create vue2_project
# OR
vue ui

运行调试 npm run serve 或 vue serve

打包 npm run build

简单示例

https://blog.feipig.fun/mypage/vue.js/vue2.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <title>Vue.js 2 案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
  </head>

  <body>
    <div id="app">
      {{ message }}
    </div>

    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hello vue.js 2!",
        },
      });
    </script>
  </body>
</html>

参考

介绍 — Vue.js

安装

兼容性