Vue梳理1——Vue2的安装-优快云博客

本文链接：https://blog.youkuaiyun.com/haozihua/article/details/143311857

1——Vue2的安装

概念: Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

1.1 Vue部署开发环境

英文Vue.js官网https://vuejs.org/
Vue3.jshttps://cn.vuejs.org/
Vue2.jshttps://v2.cn.vuejs.org/

1.1.1 本地下载Vue.js脚本

在官网下载开发环境JS脚本和生产环境JS脚本

在html页面中引入<script></script>标签

<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="../favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

引入开发环境的Vue.js脚本

1.1.2 引入CDN服务

Vue2的开发环境版本

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Vue2的生产环境版本

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1.2 Vue的发展历史

VUE2:稳定; 2016年9月分别, 8年多时间, 200次左右的更新

VUE3:趋势

性能提升=> 1.2-2倍;
内核体积更小=>10kb
TS支持度更高
组合式API,封装复辑

2.1 构建用户界面

基于数据渲染出用户可以看到的界面

2.2 渐进式

循序渐进，不一定非得把Vue中左右的API都学完才能开发, 可以学一点开发一点
库: 类似于工具箱, 是一堆方法的集合, 比如: axios, echarts等
框架: 是一套完整的解决方案, 实现了大部分功能, 我们只需要按照一定的规则

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>构建第一个vue实例</title>
  </head>
  <body>
    <!-- 
        创建vue实例
        1. 准备容器(Vue所管理的范围)
        2. 引包(开发版本'生产版本)官网
        3. 创建实例 new Vue
        4. 添加配置项(el,data), 完成渲染
    -->
    <!-- 不是vue管理的范围 -->
    <div class="box2">box2---{{message}}</div>

    <!-- vue所有管理的范围 -->
    <div id="app">
      <h1>{{message}}</h1>
    </div>
    <!-- 引入VUE: 开发版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
      //  一旦引入vue核心包, 在全局环境中, 有vue的构造函数, 创建vue实例
      var app = new Vue({
        // 通过el 配置选择器, 指定 vue 管理的哪个盒子
        el: '#app',
        // 通过 data 提供数据
        data: {
          message: 'hello 山西!!!',
        },
      });
    </script>
  </body>
</html>