从零搭建基于element-plus的Vue3项目01——基本项目搭建

Vue的中文文档还是比较齐全的，参考官网：https://cn.vuejs.org/

参考文档：https://cn.vuejs.org/guide/quick-start.html

Vue3需要16.0 或更高版本的 Node.js

Vue3介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

最新版本的 Vue (3.x) 只支持原生支持 ES2015 的浏览器。这并不包括 IE11。Vue 3.x 使用的 ES2015 功能无法在旧版本的浏览器中进行兼容，如果你需要支持旧版本的浏览器，请使用 Vue 2.x 替代。参考：https://cn.vuejs.org/about/faq.html

安装Node.js

地址：https://nodejs.org/zh-cn

官方安装

本地使用可以选择最新版本，不过公司一般选用长期支持（LTS）版本，统一版本比较好：

下载好之后双击，一步一步安装即可。

NVM安装

如果需要用nvm管理多个版本Node.js，可以访问：https://github.com/nvm-sh/nvm，不过一般前端开发用不上多个版本Node.js，也就不需要用nvm工具。

前端项目一般都是打包成纯静态项目，可以跑在nginx之下，运行时一般也不用Node.js环境。

Windows环境使用：coreybutler/nvm-windows · https://github.com/coreybutler/nvm-windows/releases

安装好nvm之后可以检查nvm版本，然后可以很方便安装不同版本的nodejs：

nvm -v # 输出1.1.12
nvm install 20 # 安装20.x的最新版本
nvm use 20 # 切换到20.x版本，切换时写上大版本号就可以

C:\Users\meng>nvm use 20
Now using node v20.10.0 (64-bit)

检查安装结果

安装成功之后检查版本：

node -v
npm -v

输出刚才安装的版本，包含Node.js和npm

C:\Users\gary.fu>node -v
v20.10.0

C:\Users\gary.fu>npm -v
10.2.3

新Vue3项目

新建Vue项目

参考官网文档，直接init项目，这个会自动下载create-vue工具，这里使用组合式API模式，不再使用Vue2的常规写法

npm create vue@latest

执行命令，按照需求选择

C:\MyCodes\OtherCodes>npm create vue@latest
Need to install the following packages:
create-vue@3.9.0
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... simple-element-plus-template
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在构建项目 C:\MyCodes\OtherCodes\simple-element-plus-template...

项目构建完成，可执行以下命令：

  cd simple-element-plus-template
  npm install
  npm run format
  npm run dev

根据需要初始化项目，这里以ES6语言为主，没有使用TypeScript。

运行Vue项目

进入项目目录之后运行：

cd simple-element-plus-template
npm install
npm run dev

以前vue2是npm run serve，vue3是npm run dev，基于vite，其实是对应package.json中的scripts。

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
}

启动成功，默认端口是5173，地址：http://localhost:5173：

C:\MyCodes\OtherCodes\simple-element-plus-template>npm run dev
> simple-element-plus-template@0.0.0 dev
> vite
  VITE v5.0.7  ready in 976 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

可以访问看看：

配置ESLint

Vue 3项目默认包含"plugin:vue/vue3-essential", "plugin:vue/vue3-strongly-recommended" 以及"plugin:vue/vue3-recommended" 三种规则，有继承关系，规则越来越严。

参考地址：https://eslint.vuejs.org/rules/

plugin:vue/vue3-essential：仅包含一些错误的规则
plugin:vue/vue3-strongly-recommended：强烈推荐（提高可读性）
plugin:vue/vue3-recommended：推荐（潜在危险模式）

默认项目建立好使用的是vue3-essential，需要根据实际情况可以安装其他规则，哪怕是使用最严格的vue3-recommended，规则严格程度也达不到以前Vue2的@vue/standard规则，这里可以使用eslint-config-standard规则代替，提升代码质量。

参考：

https://github.com/vuejs/eslint-config-standard/tree/main/packages/eslint-config-standard#readme

安装：

npm install -D @vue/eslint-config-standard @rushstack/eslint-patch

配置.eslintrc.cjs：

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/eslint-config-standard'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
}

配置好之后，可以配置IDE支持，我这里使用的是Intellij IDEA，和WebStorm差不多：

集成element-plus

element-plus是以前vue2版本element-ui的升级版

参考地址：https://element-plus.gitee.io/zh-CN/guide/installation.html

安装element-plus

进入工程目录，安装element-plus

npm install element-plus --save

在main.js中引入element-plus，引入css，并以插件形式引入ElementPlus：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'

import App from './App.vue'
import router from './router'
import './assets/main.css'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.use(ElementPlus)

app.mount('#app')

集成之后删除一些不用的结构，按照自己需要的结构搭建界面

自定义布局

按照自己从设计布局界面，主要分为Top导航栏，左侧菜单栏，中间主界面。

参考主体布局如下：

<script setup>
import LeftMenu from '@/components/LeftMenu.vue'
import TopNav from '@/components/TopNav.vue'
import { ref } from 'vue'
const collapseLeft = ref(false)
</script>

图标使用

element-plus的图标也是以组件的形式存在

常用图标：https://element-plus.gitee.io/zh-CN/component/icon.html

安装：

npm install @element-plus/icons-vue --save

注册图标组件：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

使用格式如下：

<el-icon><user/></el-icon><span>用户管理</span>
<el-icon><Menu/></el-icon><span>角色管理</span>

注意：比较特殊的是Menu图标，因为html中已经又menu作为标记，使用的时候可以用大写字母开头的Menu方式，其他图标大小写都可以。

这里先这样用着，后面会统一包装一层，并且以icon-的前缀来命名防止组件重复等

最终开源地址：

https://github.com/fugary/simple-element-plus-template