Vue+Element-plus搭建_vue2集成element-plus

一.下载node

看这篇博客：

http://t.csdn.cn/kTeRL

二.安装vue的脚手架(vue-cli)

如果没有切换node的下载镜像，使用这条命令切换淘宝镜像：

npm config set registry https://registry.npm.taobao.org

然后直接下载

npm install vue-cli -g  //（vue-lcli2) 
npm install -g @vue/cli //(vue-cli3） 我是使用这个

检查安装是否完成

vue --version

三.搭建VUE项目

1.创建文件

vue create（项目名）

自动安装Vue3.x：回车后便会自动安装3.x版本的Vue
自动安装Vue2.x：回车后便会自动安装2.x版本的Vue
手动配置：需要自己手动的去配置自己的喜好
我们这里选择手动配置（↓选择到Manually select features回车选择）

2.选择配置

我选择的是这几项，可以选typeScript

空格选择，回车下一步！！！
Babel：Babel是一个 JavaScript 编译器。（必选）
TypeScript：TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。
Progressive Web App (PWA) Support：渐进式网页应用
Router：Vue.js 的官方路由（必选）
VueX：是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
CSS Pre-processors：CSS预处理
Linter / Formatter：代码风格、格式校验（建议有一定基础在选择）
Unit Testing： 单元测试，对软件中的最小可测试单元进行检查和验证。
E2E Testing：自动化测试框架

后面的几项全部回车，这里就不做介绍了，大胆回车就行，出了事算我的，除非你有特殊需求。

3.下载element-plus依赖

npm install //下载好依赖
 
 npm install element-plus --save

在main中配置Element-Plus：

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

到这里，Element-Plus里面的控件你都可以使用了。
后面讲介绍，如何使用ElementPlus中的Icon控件的配置。

四、配置Icon

（1）在终端执行下面代码进行安装：

 npm install @element-plus/icons-vue

（2）在main中进行配置
 

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}
app.use(router).use(ElementPlus).mount('#app')