基于Vue3.0和ElementPlus开发后台框架(login+back+i18n)

zzzzzzzzzz

已于 2023-09-05 16:00:14 修改

阅读量1.9k

点赞数

分类专栏： vue前端 vue router 文章标签： vue.js typescript 前端前端框架

于 2022-02-27 17:20:02 首次发布

本文链接：https://blog.csdn.net/zhoutx/article/details/122788834

版权

vue 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

router

3 篇文章 0 订阅

订阅专栏

vue前端

1 篇文章 0 订阅

订阅专栏

10 开始步骤

参照上一篇文章，执行如下步骤

安装最新版(16)nodejs
path中增加npm执行路径
npm init @vitejs/app myproj --template vue-ts，cd myproj，npm install，npm run dev 测试工程

2023年09月05日补充：@vitejs/create-app is deprecated, use npm init vite instead

npm init vite lmesv1 --template vue-ts

npm install element-plus --save
npm install @element-plus/icons-vue
npm install less -D
npm install axios
npm install vuex@next --save
npm install vue-router@next --save
npm install vue-i18n@next --save 或npm install vue-i18n -S 加入国际化，或npm install vue-i18n@next

20 构建路由框架

20.10 组织空页面

建立src\back空目录，增加login.vue(前文已有代码) 以及如下vue

back.vue, back_header.vue, back_menu.vue, db_add.vue , db_edit.vue , db_del.vue,db_list.vue

在login.vue里增加<h1>login</h1>，以用于测试首页。

注意有些标签大写如<H1>login</H1>, 会触发浏览器警告：

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

20.20 组织路由

建立src\router目录以及index.ts文件

import {createRouter,createWebHashHistory} from "vue-router";
import login from "../back/login.vue"
import back from "../back/back.vue"
import db_add from "../back/db_add.vue"

const routes=[
    {path:"/",        redirect:'/login'},
    {path:"/login",   component:login},
    {path:"/back",    component:back,
        children:[
            {path:"/back/db_add",    component:db_add},
        ]
    }
]
export default createRouter({history:createWebHashHistory(),routes})

20.30 修改main.ts文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import axios from 'axios'

const app = createApp(App).use(router).use(ElementPlus,{locale})
app.config.globalProperties.myaxios = axios
app.mount("#app")
//createApp(App).mount('#app')

由于版本升级，

import locale from 'element-plus/lib/locale/lang/zh-cn' 需要修改为

import locale from 'element-plus/dist/locale/zh-cn.mjs'

20.40 清理app.vue

清理原有内容，替换为：


<script setup lang="ts">
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
  export default {
    name:'app'
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

删除多余的src\components目录，以及其下没有用的文件，如 HelloWorld.vue

20.50 测试login与后台联通

重构login.vue

<template>
    <H1>Login</h1>
    <el-form ref="form" :model="form" >
        <el-form-item label="账号"> <el-input v-model="form.usr"></el-input></el-form-item>
        <el-form-item label="密码"> <el-input v-model="form.pwd"></el-input></el-form-item>
        <el-form-item > <el-input v-model="form.roleattrid" type="hidden"></el-input></el-form-item>
        <el-form-item > <el-button @click="onsubmit"> 登录</el-button></el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "login",
        data() { return {form: {usr: '', pwd: '',roleattrid:'10'}}},
        mounted() {  } ,
        methods:{
            onsubmit()
            {
                alert("usr=" + this.form.usr+" pwd="+this.form.pwd+" roleattrid="+this.form.roleattrid);
                this.myaxios.get("http://127.0.0.1:7999/lmes/sys/login?usr=" + this.form.usr + "&pwd=" + this.form.pwd+ "&roleattrid=" + this.form.roleattrid).then((req, res) => {
                    let data = req.data;
                    if (data["msg"] == "success" && data.code == 200)
                        this.$router.push("/back");
                    else
                        this.$router.push("/login");
                    console.log("get data:", req);
                });
                //this.$router.push("/main");
                console.log("login error");
            }
        }
    }

</script>

<style scoped>
</style>

测试成功，后台收到请求，并把数据成功传送到前端。

30 使用 vue-i18n

30.10 新建目录src\locale与文件框架：

src\locale\, src\locale\index.ts, src\locale\modules\, src\locale\modules\en.ts,src\locale\modules\zh-cn.ts, 以及目录src\locale\moules\en\, src\locale\moules\zh-cn\, 最后这两个目录下分辨建立 common.ts 文件。

\src\locale\moules\en\common.ts 的内容如下

export default {
    common: {
        add: 'add',
        update: 'update',
        del: 'delete',
        exportExcel:'export excel',
    },
}

\src\locale\modules\zh-cn\common.ts的内容如下：

export default {
    common: {
        add: '新增',
        update: '修改',
        del: '删除',
        exportExcel:'导出excel',
    },
}

\src\locale\moules\en.ts内容如下：

import enLocale from 'element-plus/lib/locale/lang/en'
import common from './en/common'
const lang = {
    el: enLocale.el, // element-plus i18 setting
    message: {
        language: 'English',
        ...common,
    }
}

export default lang

由于版本升级，

import locale from 'element-plus/lib/locale/lang/en' 需要修改为

import locale from 'element-plus/dist/locale/en.mjs'

\src\locale\moules\zh-cn.ts内容如下：

import enLocale from 'element-plus/lib/locale/lang/zh-cn'
import common from './zh-cn/common'
const lang = {
    el: enLocale.el, // element-plus i18 setting
    message: {
        language: '中文',
        ...common,
    }
}

export default lang

由于版本升级，

import locale from 'element-plus/lib/locale/lang/zh-cn' 需要修改为

import locale from 'element-plus/dist/locale/zh-cn.mjs'

src\locale\index.ts 内容如下：

import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
/** 国际化主函数，调用vue-i18n插件生成 */

const files= import.meta.globEager('./modules/*.ts')

let messages: LocaleMessages<VueMessageType> = {}
Object.keys(files).forEach((c: string) => {
    const module = files[c].default
    const moduleName: string = c.replace(/^\.\/(.*)\/(.*)\.\w+$/, '$2')
    messages[moduleName] = module
})

const lang =   navigator.language
const locale = lang.indexOf('en') !== -1 ? 'en' : 'zh-cn'
const i18n = createI18n({
    __VUE_I18N_LEGACY_API__: false,
    __VUE_I18N_FULL_INSTALL__: false,
    locale: locale,
    fallbackLocale: 'zh-cn',
    messages
})

document.getElementsByTagName('html')[0].setAttribute('lang', 'zh-cn')

export default i18n

由于版本升级，locale: locale 这一行前需要增加一行：legacy: false,，变更为

legacy: false,
locale: locale,

30.20 \src\main.ts改写以支持i18n

import i18n from './locale'

app.use(i18n)

注意 use需要在mount前，记录如下

import i18n from './locale'
const app = createApp(App).use(router).use(ElementPlus,{locale})
app.config.globalProperties.myaxios = axios
app.use(i18n)
app.mount("#app")

30.30 在app.vue里引入使用

<script lang="ts">
  export default {
    name:'app'
  }
</script>

以上内容修改为：

<script lang="ts">
  import { defineComponent, computed } from 'vue'
  import { useI18n } from 'vue-i18n'
  export default {
    name:'app',
    setup() {
      const i18n = useI18n()
      const locale = computed(() => {
        return {
          name: i18n.locale.value,
          el: i18n.messages.value[i18n.locale.value].el
        }
      })
      return {
        locale
      }
    }
  }
</script>

30.30 在login.vue里引入使用

以下一行代码

<h1>Login</h1>

修改为

<h1>login {{ $t('message.common.add')}}</h1>

测试效果为下图，可以看出汉字按照要求显示出来了：“新增”

：

40 布局管理

参考 https://element-plus.gitee.io/zh-CN/component/layout.html

40.10 back框架说明

后台框架包括back.vue、back_header、back_menu三个部分，后两者均被back.vue引入。主体部分显示数据，包括左侧树形数据（稍后加入）。布局如下：

整体： back

header back_header

左侧树形菜单

back_menu

左侧树形数据

back_dbmenu

暂不接入

back_header.vue内容如下：

<template>
    <h1>header</h1>
</template>

<script>
    export default {
        name: "back_header"
    }
</script>

<style scoped>
</style>

back_menu.vue内容如下：

<template>
<h1>menu</h1>
</template>

<script lang="ts">
    export default {
        name: "back_menu"
    }
</script>

<style scoped>
</style>

40.20 back.vue代码

<template>
    <div>
        <el-container  >
            <el-header ><back_header></back_header></el-header>
            <el-container>
                <el-aside> <back_menu></back_menu></el-aside>
                <el-main><router-view></router-view></el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import back_header from './back_header.vue'
    import back_menu from './back_menu.vue'
    export default {
        name: "back",
        components:{
            back_header,
            back_menu
        },
    }
</script>

<style scoped>
</style>