客户管理系统开发定制Vue.2&Vue.3项目引入Element-UI教程&踩坑-巴掌软件-高性价比的软件定制开发解决方案

说明：Vue.2 & Vue.3项目引入Element UI 客户管理系统开发定制时下载的组件库对应的是Element UI & Element plus；

客户管理系统开发定制下面给出相应的方法和示例：

Vue.2引入Element-UI参考

1.安装Element UI：

npm i element-ui -S

注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm i element-ui -S --legacy-peer-deps

2.引入Element UI以及原生组件样式文件


import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
 
Vue.use(ElementUI);
 
new Vue({
  el: '#app',
  render: h => h(App)
});

主要加入以下几行代码：


import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

3.使用element ui 创建一个表格示例

主要代码如下：


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
 
    //表格组件主要代码
    <el-table :data="list" border style="width: 100%" class="tableel12">
      <el-table-column prop="tradeId" label="序号" width="180" />
      <el-table-column prop="stockHolderId" label="股民id" width="180" />
      <el-table-column prop="bankCardId" label="卡号" />
      <el-table-column prop="addedMoney" label="交易金额" />
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="type" label="操作股票方式" />
      <el-table-column label="重传">
        <template #default="scope">
          <el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button>
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>
 
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行后如图：

至此Vue.2引入并使用教程结束！！！

Vue.3引入Element-UI

注意：element ui 官方文档上没有说明element ui不支持Vue.3版本,我也是自己测试了才知道，Vue.3引入element ui时，没有出现报错，但是运行后浏览器出现了白屏的问题，所以需要安装element plus。

1.安装Element plus：

npm install element-plus --save

注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm install element-plus --S --legacy-peer-deps

2.引入Element plus以及原生组件样式文件


//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/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')

主要加入以下几行代码：


//main.js
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
 
createApp(App)
    .use(ElementPlus, { locale })

3.使用element plus 创建一个表格示例

主要代码如下：


<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App" />
 
//表格组件主要代码
    <el-table :data="list" border style="width: 100%" class="tableel12">
      <el-table-column prop="tradeId" label="序号" width="180" />
      <el-table-column prop="stockHolderId" label="股民id" width="180" />
      <el-table-column prop="bankCardId" label="卡号" />
      <el-table-column prop="addedMoney" label="交易金额" />
      <el-table-column prop="state" label="状态" />
      <el-table-column prop="type" label="操作股票方式" />
      <el-table-column label="重传">
        <template #default="scope">
          <el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button>
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>
 
  </div>
</template>
 
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
 
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

运行后如图：

至此Vue.3引入Element-UI并使用教程结束！！！

知识分享，持续更新，求关注不迷路~