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 中引入