Vue3 + Element-UI开发示例
Vue3 + Element-UI开发示例
1、说明：如果安装使用过vue脚手架，或使用过vue2，请先卸载！卸载语句如下：
输入 npm uninstall vue-cli -g 回车
运行完毕后，就是一个干净的脚手架工具了！
2、安装脚手架：npm install -g @vue/cli 回车运行即可。
3、查看脚手架版本
vue --version
4、创建项目：
A、进入你需要放项目的文件夹。D:\webworkspace
B：初始化项目文件夹，如我的项目名是 myvue3 ，输入 vue create myvue3 回车运行即可。
C：根据自己的需求选择项目需要的功能。
也可以选择默认的vue3，即可不必做以下勾选。
5、创建完毕后，进入你的项目根目录D:\webworkspace\myvue3，再输入 npm run serve 回车运行程序即可。
6、打开浏览器，在地址栏输入 http://localhost:8080 即可看到你创建的初始项目。
7、安装router、安装axios、安装element-ui
npm install vue-router@4
npm install axios --save
npm install --save element-plus （vue2： npm i element-ui --save）
main.js
import router from './router'
import axios from 'axios';
import ElementPlus from 'element-plus';
//import 'element-plus/lib/theme-chalk/index.css'; (路径不准确)
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App).use(router).use(ElementPlus, { locale })
// 全局配置
app.config.globalProperties.$axios = axios
// 请求超时时间配置
axios.defaults.timeout=60000
app.mount('#app')
8、src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TableView from '../views/TableView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/table',
name: 'table',
component: TableView
}
]
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
export default router
这里配置遇到了一个问题：
刷新页面，报404，而点击相应的tab就可以正常访问
解决方案:
history: createWebHistory(process.env.BASE_URL), --H5模式
改为：
history: createWebHashHistory(process.env.BASE_URL), --Hash模式（url会多#号）
当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。 不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。
如果是用nginx部署项目，vue官网有解决方案（服务器配置）。
9、App.vue
<template>
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/table">Table</router-link>
</nav>
<router-view/>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: #2c3e50;
}
nav a.router-link-exact-active {
color: #42b983;
}
</style>
10、main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios';
import ElementPlus from 'element-plus';
//import 'element-plus/lib/theme-chalk/index.css';
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App).use(router).use(ElementPlus, { locale })
// 全局配置
app.config.globalProperties.$axios = axios
// 请求超时时间配置
axios.defaults.timeout=60000
app.mount('#app')
11、.env.development
# 开发环境配置
ENV = 'development'
VUE_APP_SERVER_URL = 'http://localhost:8083/web'
12、view/TableView.vue
<template>
<div class="dataTable">
<div class="zo-item" title="刷新" @click="refreshList"><i class="el-icon-refresh"></i></div>
<el-table border :data="dataList" size="medium" class="table">
<el-table-column prop="userCode" min-width="100" show-overflow-tooltip label="用户编码">
</el-table-column>
<el-table-column prop="userName" min-width="80" show-overflow-tooltip label="姓名">
</el-table-column>
<el-table-column prop="password" min-width="140" show-overflow-tooltip label="密码">
</el-table-column>
</el-table>
<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
:current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total"
background layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
name: 'DataTable',
data () {
return {
dataList: [],
pageNum: 1,
pageSize: 10,
total: 0,
orderBy: ''
}
},
methods: {
// 获取数据列表
refreshList() {
this.$axios({
url: '/api/user/findList',
method: 'post',
data: {
'pageNum': this.pageNum,
'pageSize': this.pageSize,
'orderBy': this.orderBy
}
}).then(({
data
}) => {
if (data) {
this.dataList = data.list
this.total = data.total
}
})
},
// 每页数
sizeChangeHandle(val) {
this.pageSize = val
this.pageNum = 1
this.refreshList()
},
// 当前页
currentChangeHandle(val) {
this.pageNum = val
this.refreshList()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zo-item{
width: 35px;height: 35px;border: 1px solid #DCDCDC;
border-radius: 50%;margin-right: 7px;background: #FFF;
cursor: pointer;text-align: center;line-height: 33px;color: #A0A0A0;
}
</style>
13、vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: "./",
productionSourceMap: false,
css: {
loaderOptions: {
less: {
modifyVars: {
},
javascriptEnabled: true,
}
}
},
outputDir: './dist',
devServer: {
port: 3001, // 前端端口
proxy: {
'/api': {
target: process.env.VUE_APP_SERVER_URL, // 后端服务地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
}
},
lintOnSave: undefined
})
效果：
=END=