Vue3项目的创建与使用

Vue 有 Vue2 和 Vue3 ，因为 Vue2 已经停止维护，所以我是直接从 Vue3 开始学习的。

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML 、 CSS 和 JavaScript 构建，并提 供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

1.Vue3环境搭建

使用 Vue 的前提是需要安装 Node.js 环境；创建一个 Vue3 项目必须使用 Node.js10.0 以上的版本。

打开命令行窗口输入 node -v 看看是否安装了 node.js 或版本，，如果版本不对或者没有安装 node.js 则需要进行更新或者下载

除了检查 node -v 外，还需要输入 npm -v 看看是否也安装了 npm 。因为 npm 是 node 包管理器，安装node.js时候一起配套安装的；所以一般来说都是有的。

安装 node.js

链接 : Node 官网链接

node.js 的安装类似 JDK的安装，安装步骤详见 Node.js 安装及环境配置超详细教程【 Windows 系统】

2.Vue-cli 脚手架工具的安装

打开命令行窗口，输入命令安装 Vue-cli

npm install --g vue-cli

vue-cli 安装好后，便可以直接使用它来创建 Vue 项目

3.创建项目

3.1 创建一个项目目录

 在该目录里打开命令行窗口，该目录将作为Vue3 的项目目录

3.2 命令行输入命令，按指示创建项目

1. 输入命令，创建项目

npm create vue@latest

2. 按提示选择以下

 

npm run dev 就是启动的命令，可以在终端输入该命令进行启动

3.idea 配置启动项

 

点击应用，配置成功。

4. 创建模板文件

创建好项目后，由于是第一次使用 Vue ，可能还需要创建 vue 的模板文件，具体参考如下

IDEA 创建 .vue 格式的文件 _idea 怎么创建 vue 文件

4.案例使用

Vue3一般与 ElementUI 一起使用，ElementUI是前端页面的一个组件库，用来丰富前端的页面。

Element-Plus 官网连接 Element Plus (element-plus.org)

1. 安装 Element Plus, 打开终端，输入以下

npm install element-plus --save

2. 安装好后引入 , 在 main.js 中引入