伸手党系列五：vue3.0+cli4.0+elementPlus项目搭建过程

1. 使用npm安装 cli 脚手架

// npm是node的包管理工具,如果你的电脑还没有安装node请先去node官网下载node安装包，再来执行下面的操作。
npm install -g @vue/cli
// 如果嫌慢也可以用cnpm install -g @vue/cli  来安装。
// cnpm淘宝镜像安装方法 →  npm install -g cnpm -registry=https://registry.npm.taobao.org

如果以前安装过cli脚手架，可以先检查下脚手架版本
应为只有(4.5.4 以上版本)才有创建 Vue3 的选项。

// cli脚手架版本检查方法：
vue -V    
或者  
vue --version

2. 使用 vue-cli 命令行创建项目

// 使用vue create + 项目名称  开始创建项目 （名称中不能有大写字母）
vue create vue3demo

输入命令后，会出现以下命令行交互窗口

? Please pick a preset: (Use arrow keys)            //请选择预选项

> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)

一般我们选择 Manually select features 来自定义选择

如果出现上下箭头失效无法控制的情况可以看看我以前的这篇文章，可以帮你解决这个问题.

解决windows系统下 git 里使用 vue cli 创建项目上下箭头无效的三种解决方法

3. 根据项目情况自定义选择所需插件

选择自定义后会出现下面的选项，让我们自己来选择自己项目所需要的插件
（使用空格选择所需的插件，最后点击回车键完成选择）

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter						// 格式化工具
 ( ) Unit Testing							// 单元测试
 ( ) E2E Testing

一般我们选择以上这些就足够了。选择完成回车以后会出现 下面的选项

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x				 // 选这个就是创建vue2的项目
  3.x (Preview)      // 选这个就是创建vue3的项目

选择3版本后会提示是否使用 history 模式来初始化router插件（这个根据自己的情况自己选择）

路由模式选完后，会进行下面css预处理器的选择（这个也根据自己喜好来选择）

然后会出现ESLint的一些配置(自己看情况选择就好)

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

选完后会进一步让你选择ESLint的功能

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save             // 保存的时候进行Lint
 ( ) Lint and fix on commit   

回车后让你选择这些配置文件是单独存放，还是直接存放在package.json文件里。（这个根据自己的情况自己选择）

这一步是问你需不需要把这些配置保存下来，（如果选择保存的话，下次在使用vue create + 项目名称，创建项目时就会按照这次已经选择的这些配置直接创建项目。）

Save this as a preset for future projects? (y/N) yes
// 选择保存后 ↓↓↓
Save preset as ：   // 这里填写一个名称

4. 自定义模板选择完毕开始构建项目

这样我们的项目模板就开始自动创建了。

最后我们进入 我们创建的这个项目根目录中执行 npm run serve 执行成功后会出现下面的的地址

点击任意一个地址就能看到我们的这个demo了。

5. 安装 element-plus

① 安装element-plus

npm install element-plus

② 在main.js 或者 main.ts 页面引入

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

③ 在需要的页面加上官网的代码就可以了
element-plus官网地址

看完感觉还行请记得点个赞，您的支持是我创作的动力。谢谢！