第一章 vue3+elemnet plus开发环境的搭建

1、vue是什么？

• vue是一款MVVM框架，即model-view-viewmodel（模型-视图-视图模型），这与MVC有些类似，也可以理解为是MVC的变种。它是采用虚拟DOM技术解决浏览器的渲染性能问题，它是一个响应式的、轻量级的渐进式框架，Vue3.x的组合式API解决功能分散和难以维护的问题。
  • View视图层，在前端开发中通常指的是DOM层，是用户能够看到的界面；
  • Model模型层，也叫数据层，是来自服务器请求数据，也可以是模拟的数据；
  • ViewModel视图模型层，主要实现了数据绑定（data bindings）,可以在Model层数据发生变化的时候，及时将变化反映到View上；当用户于View进行交互时，ViewModel又可以通过监听DOM事件的变化并反馈给Model。

2、认识Element与Element Plus

• 它们是非常优秀的前端UI框架，是饿了么团队开发的、开源的前端组件库。
• 文档结构清晰，易于学习理解，组件丰富，有60个组件，包含基础组件、Form表单组件、数据组件、导航组件、消息组件和其他6类。
  • 基础组件：按钮、链接、布局等；
  • 表单组件：输入框、单选框、多选框、滑块、开发、时间选择器等；
  • 数据组件：表格、分页组件等；
  • 导航组件：菜单、标签页、步骤条等；
  • 消息组件：消息提示、消息弹框、通知组件等。
  • Element Plus的组件支持更多，有67个。

3、安装Vue

3.1使用npm安装

#提示：安装vue之前，需要先安装node环境，安装了node之后，npm也就可以用了。

#使用npm安装最新稳定版
npm install vue@next

 3.2使用yarn安装

#第一步:安装yarn
 npm install yarn -g
#第二步:使用yarn安装vue
yarn add vue@next

3.3 使用Vue CLI安装

#通过yarn或npm命令进行安装

yarn global add @vue/cli
或者
npm install -g @vue/cli

#判断是否安装成功
vue -V
或者
vue --version

若显示出了版本号，则表示安装成功了。

 3.4 通过vue CLI来创建vue3项目

#创建vue3项目
vue create <project-name>  
#<project-name> 是项目名称，例如：
vue create my-first-vue3  
#需要注意的是：项目名称都应当小写，若有大写会报错。

#如果我们选择Default(vue3)选项，即可以快速创建一个vue3的项目，项目默认加入了babel和eslint两上必不可少的包。

#进入刚刚创建的项目，并运行程序
cd my-first-vue3
npm run serve

#不出意外的话，项目已经运行起来了，可以根据终端提示的连接打开web页面了。