uniapp使用uni-push模拟推送-CFANZ编程社区

一、引言

1.1. 概述

Vue 是一款用于快速构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

Vue是一个框架，也是一个生态。我们可以用不同的方式使用Vue：

1.2. Vue与Vue3

目前市面上主要存在的两个Vue版本分别为Vue2和Vue3，其中Vue2在各大企业中还广泛应用，而Vue3是未来的趋势，它在性能、内核、TS支持度以及封装等各方面对比Vue2有了极大提升。因此，我们在学习Vue时，需要同时掌握Vue2和Vue3两个版本的技术知识。本学习栏目将带领大家快速掌握这些内容。

1.3. Vue学习路线

1. Vue2核心技术：如 Vue Router（路由管理）、Vuex（状态管理）等

2. 移动端项目练习：Vant组件库和ESLint（掌握企业级开发规范）

3. Vue3核心技术：如构建工具Vite、Pinia（状态管理）等

4. PC端管理系统练习：引入Element组件库

1.4. Vue的渐进式

我们前面提到Vue是一个渐进式的框架，这意味着它可以适应项目的不同阶段，从简单的单页应用(SPA)开始，到复杂的大型应用。

Vue.js 的主要特性包括：

响应式数据绑定和组件系统。
解耦视图和数据，可以使得维护变得更简单。
可以用于构建单页面应用，也可以嵌入到已经存在的应用中。

渐进式表明Vue可以采取不同的方式来应对不同的开发需求。它允许你按需引入Vue的不同特性，例如：

可以只使用Vue的响应式系统。
可以使用Vue进行构建用户界面的过程，同时不使用Vue的构建工具和库。

这样，Vue 就为不同的开发场景提供了灵活的解决方案。

而我们针对Vue的话也是一个渐进式的学习过程，通过掌握Vue，在日常企业的前端开发工作中，能极大地提高我们的开发效率。

二、Vue初体验

2.1. Vue示例演示步骤

构建用户界面，创建Vue实例，初始化渲染步骤：

1. 准备容器

2. 引包（官网：开发版本/生产版本）

3. 创建Vue实例 new Vue()

4. 指定配置项 el data => 渲染数据

el 指定挂载点

data 提供数据

2.2. 示例代码

我们通过VSCode来创建一个简单的Vue框架页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue Introduction</title>
    </head>
    <body>
        <!-- 
            创建Vue实例，初始化渲染
            1. 准备容器(Vue所管理的范围)
            2. 引包（开发版本包/生产版本包 官网 当前学习引入开发版本即可）
            3. 创建实例
            4. 添加配置项 => 完成渲染
        -->
        <div id="app">
            <!-- 这里作为编写一些用于渲染的代码逻辑 -->
             {{ msg }}
        </div>

        <!-- 引入的时开发版本包 -包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>
        // 一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el配置选择器，指定Vue管理的是哪个盒子
            el: '#app',
            // 通过data提供数据
            data: {
                msg: 'Hello 王哲晓'
            }
        })
    </script>
    </body>
</html>