VUE是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。

个人学习感受：构建模板，通过数据就可以生成展示的html，上手简单，快速。

引用：VUE官网

• 
  
• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
  
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
  

开始：

1.安装环境

1.node.js (已安装 16.0 或更高版本的 Node.js)

说明：Node.js是一种基于Chrome V8引擎的JavaScript运行环境，是一个可以在服务器端运行JavaScript的开源工具。
NodeJS已经集成了npm，所以npm也一并安装好了。
验证测试： node -v npm -v

2.cnpm

说明 ：由于npm的服务器在海外，所以访问速度比较慢，访问不稳定 ，cnpm的服务器是由淘宝团队提供 服务器在国内cnpm是npm镜像。但是一般cnpm只用于安装时候，所以在项目创建与卸载等相关操作时候我们还是使用npm。

全局安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证测试： cnpm -v

1.IDE与简单上手

1.IDE:webstorm

说明：我个人一直在用jetbrains 旗下的各种 IDA ，我使用起来比较熟练。

配置IDE：

2.简单上手：

到需要创建项目的文件目录

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

之后执行：

npm install

执行完安装后执行启动：

npm run dev

执行成功： 打开网页 http://localhost:5173/

当你准备将应用发布到生产环境时，请运行：

npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。

简单例子 与 说明：

<script setup>  
defineProps({  
    msg: {  
    type: String,  
    required: true  
    }  
})  
</script>  
  
  <!--模板区域-->
<template>  
    <div class="greetings">  
        <h1 class="green">{{ msg }}</h1>  
        <h3>  You’ve successfully created a project with  <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +  <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.  
        </h3>  
    </div>  
</template>  
<!--样式区域-->
<style scoped>  
h1 {  
    font-weight: 500;  
    font-size: 2.6rem;  
    position: relative;  
    top: -10px;  
}  
</style>