如何用纯 HTML 文件实现 Vue.js 应用，并通过 CDN 引入 Element UI
相关名词解释
- Vue.jsVue.js：是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供声明式的、组件化的编程模型，可高效开发用户界面。具有响应式数据绑定等特性，能自动跟踪数据变化并更新 DOM。
- Element UI：是一个基于 Vue.js 的流行前端 UI 框架，由饿了么团队开发和维护。它提供了一系列预设计的 Vue 组件，如按钮、输入框、表格等，可帮助开发者快速构建高质量的 Vue.js 应用程序，具有响应式布局、国际化、主题定制等特点。
- CDN（Content Delivery Network，内容分发网络）：是一种分布式的网络架构，通过在多个地理位置部署服务器节点，将内容（如 JavaScript 库、CSS 文件等）缓存到离用户更近的节点上，从而加快用户对内容的访问速度。通过 CDN 引入 Vue.js 和 Element UI，无需将相关文件下载到本地，直接引用网络上的资源即可。
实现步骤
- 创建 HTML 文件：新建一个 HTML 文件，例如
index.html。 - 引入 Vue.js：在
<head>标签或<body>标签中添加<script>标签，通过 CDN 引入 Vue.js。建议使用以下链接引入 Vue 2 版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
如果想使用 Vue 3，可以使用以下链接：
<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script>
- 引入 Element UI 样式：在
<head>标签中添加<link>标签，引入 Element UI 的样式文件，代码如下：
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
- 引入 Element UI 组件库：在引入 Vue.js 之后，添加
<script>标签引入 Element UI 的组件库，代码如下：
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
需注意，必须先引入 Vue，再引入 Element UI，否则 Element UI 组件与样式可能无效。
5. 创建 Vue 实例并挂载：在页面合适位置（通常在<body>标签末尾的<script>标签中）创建 Vue 实例，并指定挂载点。例如：
<div id="app"></div>
<script>new Vue({el: '#app',data: {// 在这里定义数据，如message: 'Hello, Vue + Element UI!'message: 'Hello, Vue + Element UI!'}});
</script>
上述代码中，<div id="app"></div>是 Vue 应用的挂载点，new Vue创建了一个 Vue 实例，el: '#app'表示将该实例挂载到id为app的 DOM 元素上。
6. 使用 Element UI 组件：在挂载点对应的 DOM 元素内部，即可使用 Element UI 组件。例如，使用一个 Element UI 的按钮组件：
<div id="app"><el - button type="primary">{{message}}</el - button>
</div>
<script>new Vue({el: '#app',data: {message: 'Hello, Vue + Element UI!'}});
</script>
上述代码中，<el - button>是 Element UI 的按钮组件，type="primary"指定了按钮的样式为主要按钮，{{message}}是 Vue 的数据绑定，会将message的值显示在按钮上。