创建Vue3.x项目加Element plus

1、创建Vue3.x项目

前端小白，博客中所记为个人练习遇到的问题，仅供参考。

1.1 准备vue CLI（4.x）

官网地址：vue CLI

注：此时默认你以安装Node.js，Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。因为我们会用到3.0才有的 vue ui 进行可视化创建项目，所以推荐安装4.x，命令参照官网。

可能出现的问题：
  可能你已经存在 vue CLI 了，但是版本是2.x，官方给了升级的命令，但是升级是没有用，比如我原本是2.9.6就不行。参考博客：关于vue-cli2升级到最新版本失败，这篇博客写的非常清晰，唯一需要注意的是：升级完请关闭cmd窗口，再重新打开输命令查看版本，不然在原本的窗口看到的还是老版本。
安装命令：

npm install -g @vue/cli

版本查看命令：

vue --version

升级命令：

npm update -g @vue/cli

1.2 通过vue ui创建vue项目

  进入需要创建项目的文件夹内，在上面的地址栏输入 cmd 回车，打开cmd 输入命令 vue ui

vue ui是在vue CLI3.x才支持的，假如你输入vue ui 没反应，说明你的版本有问题，可以升级一下。

启动完成后会自动打开页面，如果没打开，浏览器手动输入localhost:8000 即可访问。

1、点击顶部 “创建”
创建项目，选择保存位置。

这里是因为我之前已经创建过项目了，如果你第一次使用，默认会在C盘的用户文件夹，而且不能选择电脑里的文件夹，即使在输入框输入路径也不能生效，所以一定要在需要创建项目的文件夹内打开cmd。

点击 在此创建新项目 即可进入到项目详情页。
2、项目详情

此页面需要输入项目名称，选择 包管理器，选项分别有npm、 yarn、 pnpm三项，选择 npm 进入下一步。
3、项目预设

选择 手动，点击下方 下一步（选中手动后，创建项目按钮就变成了下一步）
4、选择功能

属性	描述
Choose Vue version	选择Vue版本
Babel	转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
TypeScript	TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue路由
Vuex	vue的状态管理模式选择Vue版本
CSS Pre-processors	CSS 预处理器
Linter / Formatter	代码风格检查和格式化
Unit Testing	单元测试
E2E Testing	end to end 测试
使用配置文件	将插件的配置保存在各自的配置文件(比如 baber)中。

默认选择的 Choose Vue version、 Babel、 Linter / Formatter三项，加上Router、Vuex、CSS Pre-processors、使用配置文件 四项，点击 下一步。

5、配置

1、Choose a version of Vue. s that you want to start the project with
这个比较简单，就是选择vue版本，选项有 2.x、 3.x，默认是 2.x，根据需求选择。

2、Use history mode for router? (Requires proper server setup for index fallback in production)

使用历史模式路由器?(在生产环境中需要适当的服务器设置索引回退)建议不打开

3、Pick a CSS pre-processor:

选择一个CSS预处理器(默认支持PostCSS, Autoprefixer和CSS模块)，选择 Sass/SCSS (with dart-sass)

4、Pick a linter / formatter config

属性	描述
ESLint with error prevention only	只有报错功能
ESLint + Airbnb config	简化模式
ESLint + Standard config	标准模式
ESLint + Prettier	严格模式

选择ESLint + Prettier

5、Pick additional lint features

选择校验时机， 保持默认打开 Lint on save

点击 创建项目，会弹窗“保存为新预设”，选择 保存项目，不保存预设，等待一会会，项目构建完成。

项目构建完成，会进入看板，可视化的操作项目依赖、配置。

二、引入Element Plus

2.1 vue ui引入

2.1.1 选择插件

  通过上面的操作，项目创建完成就会进入到看板，点击左侧 插件 选项进入插件页面，再点击左上角添加插件就能进到插件安装界面

找到自己需要的插件，点击右侧的 + 进入选中状态，点击下面的 安装，进入到配置页面。

2.1.2 配置插件

这个地方我就选择了语言，从默认的 en 改到 zh-cn

2.1.3 文件改动

到这里，去查看你的项目

多出了 plugins 文件夹，以及element.js。但是，居然还修改了App.vue文件

安装插件之后，修改了App.vue，而且代码还不对，没有最外层的div，即使修改过后，项目也有bug。

引入虽然方便，但是修改了我其他文件，这个有点可怕，假如在项目中使用这种方式，到时候出现bug还不知道怎么回事。也可能是操作的问题，试了好几次都不能避免这个情况，果断放弃，还是采用命令引入吧。

2.2 命令引入

参考官网：element plus

2.2.1 npm安装element plus

npm install element-plus --save

2.2.2 main.js引用

// element plus
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount("#app");

最下面一行是本来就有的，只是加一下.use()即可

2.2.3 测试使用

随便找一个，或者建一个一面，复制代码：

<el-row>
    <el-button disabled>默认按钮</el-button>
    <el-button type="primary" disabled>主要按钮</el-button>
    <el-button type="success" disabled>成功按钮</el-button>
    <el-button type="info" disabled>信息按钮</el-button>
    <el-button type="warning" disabled>警告按钮</el-button>
    <el-button type="danger" disabled>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button plain disabled>朴素按钮</el-button>
    <el-button type="primary" plain disabled>主要按钮</el-button>
    <el-button type="success" plain disabled>成功按钮</el-button>
    <el-button type="info" plain disabled>信息按钮</el-button>
    <el-button type="warning" plain disabled>警告按钮</el-button>
    <el-button type="danger" plain disabled>危险按钮</el-button>
  </el-row>

启动项目，进到页面：

代码是官网复制的，因为按钮是不可点击的，所以看起来有点灰

至此，创建项目加引入Element plus基本完成，小白经历，挺难。

Tip:
  关于引入Element Plus的方式有一点小想法（小白写法），每次引入组件都在 main.js 里面去添加，假如我们将会引入很多组件，感觉在 main.js 会有很多，关键是每个组件可能都不止一个import，就比如我们刚刚引入的Element Plus就import了三行，假如我们要去掉或者修改组件，可能就不怎么方便。
  有了这个想法就让我想到刚才第一种引入方式（vue ui）会创建一个plugins文件夹专门管理引入的组件，比如我们现在需要引入Element Plus组件，就在src 下创建一个文件夹 plugins（项目创建的时候是没有这个文件夹的），创建一个element.js 的js文件。

在js文件里面引入组件：

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
  app.use(ElementPlus, { locale })
}

然后在 main.js文件中引入：

import installElementPlus from './plugins/element'

// element plus
createApp(App).use(store).use(router).use(installElementPlus).mount("#app");

这种方式感觉会比较舒服，单独的文件管理组件。

END

---

南风知我意，吹梦到西洲