1 下载node.js
先下载 node.js LTS 并安装:node.js 的 npm,用于管理前端项目包依赖,这里以 14.17.3 这个版本为例。如果已经安装过 node.js,可以在设置中找到应用,点进去搜索 node.js 即可卸载
node.js 14.17.3 安装包
链接:https://pan.baidu.com/s/1ZjfnBzxMwvfcOFlexqnmRw?pwd=8956
提取码:8956
下载安装包后点击即可安装,安装方式非常简单,只需要点下一步即可,设置安装路径的时候需要注意一下,推荐安装到D盘
安装成功后,打开cmd,输入node -v,输出nodejs版本就是安装成功了
2 全局安装 Vue 插件 cli : npm install -g @vue/cli , 这样我们就可以创建 Vue 工程
3 创建 Vue 项目
(1)创建文件夹 D:\java_project\vue3_project ,在该文件夹下进入cmd,通过指令 vue create ssm_vue 创建 Vue 项目 ssm_vue
(2)选择你需要的插件
(3)相关配置
(4)启动项目-按给出指令执行即可
cd ssm_vue
npm run serve
(5)启动项目成功, 会提示如下界面
(6)完成测试,浏览器访问
4 使用 idea 打开 ssm_vue 项目, 并配置项目启动
(1)使用 idea 打开项目
(2)配置 ssm_vue 使用 npm 方式启动
(3)配置成功,点击绿色箭头即可启动(启动前需要将在终端启动的vue给退出,可以使用ctrl+c 退出)
5 Vue3 项目结构梳理
(1)梳理 Vue3 最重要的路由机制
(2)index.html 页面说明
(3)assets 目录和 components 目录说明
(4)router/index.js 用于配置路由
(5)store/index.js 用于存放数据
(6)视图使用的基本介绍
(7)package.json 说明前端项目包依赖关系,类似 maven 的 pom.xml
(8) main.js 用于引入资源(css/组件等), 同时也是创建 App 挂载#app, 引入 ./router ./store 等资源的所在
6 配置Vue服务端口
修改项目下的 vue.config.js 文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true
})
module.exports = {devServer:{port:10001 // 启动端口}
}
启动测试, 可以看到现在是 10001 端口了
7 Element Plus 和 Element UI
基本介绍:
- Element Plus 是 Element 对 Vue 3.0 的升级适配
- Element 诞生于 2016 年,起初是饿了么内部的业务组件库,开源后深受广大前端开 发者的喜爱,成为 Vue 生态中最流行的 UI 组件库之一
- Element Plus 是重构的全新项目。Element 团队重写了 Element 的代码,用于支持 Vue 3
- Element UI 还在维护和升级,因为 Vue2 仍然有项目在使用, Vue3 支持的浏览器范围 有所减少, 这是一个大的改变, 所以在一段时间内, Vue2 仍然会在项目使用
官方文档:
Element UI 官方文档:Element - The world's most popular Vue UI framework
Element Plus 官方文档:Overview 组件总览 | Element Plus (element-plus.org)
安装 element-plus 插件 :
npm install element-plus --save