## Vue2版

Vue2官网：https://v2.cn.vuejs.org/v2/guide/

### 1. 创建vue项目

#### 全局安装

```powershell
npm install -g @vue/cli
```

#### 安装后查看是否安装成功

```
vue -V
```

![image-20240402143500429](D:\work\公司\实训\实训计划\实训-Vue\image-20240402143500429.png)

#### 创建Vue项目

```powershell
vue create project-name
```

![image-20240402143807384](D:\work\公司\实训\实训计划\实训-Vue\image-20240402143807384.png)

![image-20240402144106303](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144106303.png)

![image-20240402144156264](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144156264.png)

#### 创建完成

![image-20240402144406688](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144406688.png)

### 2. 运行

```powershell
cd project-name
npm run serve
```

![image-20240402144507047](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144507047.png)

![image-20240402144535517](D:\work\公司\实训\实训计划\实训-Vue\image-20240402144535517.png)

### 3. element-ui

官网：https://element.eleme.cn/#/zh-CN/component/installation

#### 安装

```powershell
npm i element-ui -S
```

#### 引入：全局引入

```js
//main.js
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);
```

#### 引入：按需引入方式1

```js
//main.js
import "@/plugins/element";
//@/plugins/element.js
import Vue from "vue";
import { Button, Loading,MessageBox } from "element-ui";
Vue.use(Button);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
```

#### 引入：按需引入方式2

```js
//babel.config.js
module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    ["@babel/preset-env", { modules: false }],
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};
```
```js
//./components/element/index.js
import { Button, Input, Radio, Table, Form } from "element-ui";
const coms = [Button, Input, Radio, Table, Form];
export default {
  install(Vue, options) {
    coms.map((c) => {
      Vue.component(c.name, c);
    });
  },
};
```
```js
//main.js
import element from "./components/element";
Vue.use(element);
```

#### 使用

```html
//vue文件中
<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>
```

![image-20240402145534211](D:\work\公司\实训\实训计划\实训-Vue\image-20240402145534211.png)