vue-cli3与element-plus安装以及使用教程

vue-cli3与element-plus安装教程

---

---

前言

Vue Cli官网：Vue-Cli
Element Plus官网：element-plus

---

一、关于vue-cli和element-plus

Element Plus： Element Plus是一套基于 Vue.js 的前端 UI 组件库，它是饿了么前端团队开发的，旨在为开发者提供丰富的界面组件，帮助开发者快速构建美观和易用的 Web 应用程序。Element Plus 是 Element UI 的升级版本，相比于 Element UI，Element Plus 采用了 Vue 3 的语法，并且在性能、可访问性和开发体验上进行了优化。Element Plus 的组件库包含了按钮、表格、输入框、弹窗、下拉菜单等常用 UI 组件，同时还提供了一些高级组件如日历、时间选择器和图片上传等。使用 Element Plus 可以快速构建出现代化的界面，并且兼容各种主流浏览器。

---

Vue CLI： Vue CLI是一个基于Vue.js的官方命令行工具，用于快速搭建Vue项目的脚手架。它为开发者提供了一套交互式的命令行界面，帮助开发者初始化、配置和构建Vue项目。
Vue CLI具有以下主要功能：

• 快速创建Vue.js项目：使用Vue CLI可以轻松地创建一个全新的Vue项目，包括配置文件、依赖项和目录结构等。
• 集成开发服务器：Vue CLI可以启动一个开发服务器，支持热重载和实时预览，方便开发调试。
• 插件系统：Vue CLI通过插件系统，可以集成各种功能和工具，例如Babel、TypeScript、ESLint等，以满足不同项目的需求。
• 项目构建和打包：Vue CLI可以将项目打包为生产环境所需的静态文件，优化代码并进行压缩，以提高性能和加载速度。

二、vue-cli安装步骤

1.node.js环境

需要有node.js环境
下载安装即可,nodejs下载链接：node.js

2.全局安装脚手架工具

在cmd内输入命令全局安装

npm install -g @vue/cli 
1

3.创建项目

3.3

vue create project（project为你的项目名称）
1

按个人需要选择配置，（第三个选项可以自己选择插件）。

3.4
这里我选的上面第三个，进入插件选择，空格为选中。这里建议选择上router路由插件。

之后一直回车即可。
3.5

出现此界面即为创建项目成功。
3.6

cd czdemo（你的项目名称）
1

输入命令进入文件内
3.7
输入以下命令即可运行项目

npm run serve 
1

出现下图则为运行成功，输入图中路径即可打开

三、element-plus安装步骤

注：cmd中ctrl+c为停止当前进程命令

1.在项目路径的cmd内输入命令下载element-plus

npm install element-plus --save
1

在项目路径下通过以下命令运行项目

npm run serve 
1

2.打开main.js，路径如下图

修改代码如下以导入element-plus

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-plus/theme-chalk/index.css'
import ElementPlus from 'element-plus'
import "@element-plus/icons-vue"
createApp(App).use(ElementPlus).mount('#app')

1
2
3
4
5
6
7
8
9

保存后即可使用element-plus中的组件

三、实战

1.例如使用element-plus中的布局容器

2.复制代码到vue文件中即可使用

<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>Navigator One
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>Navigator Two
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>Navigator Three
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ><setting
            /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script  setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

3.若图标不显示则是未安装icon，输入以下命令即可安装（ctrl+c退出当前cmd进程）

npm install @element-plus/icons-vue
1

答疑合作

若有问题疑问v：CforikF_0827