使用vue-cli和element-ui快速搭建后台管理系统

最新推荐文章于 2024-03-05 17:21:29 发布

丹哥不是哥

最新推荐文章于 2024-03-05 17:21:29 发布

阅读量966

点赞数

文章标签：前端微前端 qiankun vue elementui

本文链接：https://blog.csdn.net/u010622874/article/details/112625396

版权

前端积累专栏收录该内容

20 篇文章 2 订阅

订阅专栏

使用vue-cli和element-ui入门实践

1. 环境配置

安装node

从Node官网下载对应平台的安装程序https://nodejs.org/en/

在window上安装时要注意：选择全部组件，包括勾选Add to Path。

安装完成后，在window环境下，打开命令行窗口，然后输入node -v，如果安装正常，可以看到输出如图所示：
在这里插入图片描述

2. 安装vue-cli

参考文档https://cli.vuejs.org/zh/

npm install -g @vue/cli

目前按照这种方式安装应该是Vue CLI 4.X（需要Node.jsV8.9或更高版本）

2.1 查看Vue cli的所有版本号

vue-cli3.X 和vue-cli4.x所有版本号查看

npm view @vue/cli versions --json

vue-cli1.x和vue-cli2.x的所有版本号查看

npm view vue-cli versions --json

2.2 安装指定版本号的vue-cli

安装3.x和4.x版本（推荐安装这两个版本）

npm install -g @vue/cli@版本号

安装1.x和2.x版本

npm install -g vue-cli@版本号

安装完成后，命令行执行vue -V，正常输出版本号，则说明安装成功。

3. 项目搭建

3.1 创建一个vue-cli3项目

vue create mmp-subapp1

mmp-subapp1为自定义项目名称，回车之后依次选默认的即可

3.2 使用element-ui组件

安装element-ui依赖
```
npm install element-ui
```
安装sass和sass-loader ，因为element-ui中的样式默认是使用sass来编写的
```
npm install sass --save-dev
npm install sass-loader --save-dev
```

在main.js文件中引入element-ui和样式，添加以下代码即可

import ElementUI from 'element-ui'; //引入ElementUI
import 'element-ui/lib/theme-chalk/index.css' //引入element-ui样式

Vue.use(ElementUI)

使用elment-ui组件

例如在App.vue中：

<template>
  <div id="app">
    <!-- 全局引入的element-ui的组件 -->
    <el-button>按钮组件</el-button>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

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

页面效果

3.3 使用自定义组件(以header组件为例)

components文件夹中添加如下结构文件

在这里插入图片描述

Index.vue文件中添加头部组件的内容如下

<template>
    <div class="base-header">
        <div class="base-header-logo">
            <img src="../../assets/logo.png"/><span >支付模块管理平台</span>
        </div>
        <div class="base-header-userInfo">
            <div class="base-header-userName">{{userName}}</div>
            <span class="base-header-logout-btn" @click="logout">退出登录</span>
        </div> 
    </div>
</template>

<script>
export default {
    name:'CusHeader',
    data() {
        return {
            userName: '韦小宝' //要显示的用户名称
        }
    },
    methods: {
        logout() {
            //退出登录操作
            console.log('退出登录')
        }
    },
}
</script>

<style lang="scss" scoped>
.base-header {
    background-color:#001529;
    height:calc(5vh);
    color:#fff;
    .base-header-logo {
        margin-left:10px;
        display: inline-block;
        img {
        display: inline-block;
        width: 2.8em;
        height: 2.8em;
        vertical-align: middle;
        }
        span {
            font-size:1.5em;
            display: inline-block;
            vertical-align: middle;
        }
    }
    .base-header-userInfo {
        float: right;
        height: 100%;
        line-height: 2.8em;
        margin-right: 20px;
        .base-header-userName {
            display: inline-block;
            margin-right: 10px;
        }
        .base-header-logout-btn {
            display: inline-block;
            cursor: pointer;
            font-size:1.2em;
            font-weight: 700;
            margin-right: 10px;
        }
    }
}

</style>

App.vue中使用组件

<template>
  <div id="app">
    <!-- 全局引入的element-ui的组件 -->
    <el-button>按钮组件</el-button>
    <!-- 自定义组件 -->
    <cus-header></cus-header>
  </div>
</template>

<script>

import CusHeader from '@/components/Header/Index.vue'
export default {
  name: 'App',
  components: {
    CusHeader
  }
}
</script>

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

3.4 带路由功能的导航菜单组件

安装vue-router依赖（官方文档：https://router.vuejs.org/zh/）
```
npm install --save vue-router
```
src文件夹下添加页面文件

在这里插入图片描述

以View1.vue为例，文件添加的内容为：

<template>
    <div>
        这是View111111111
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

src文件夹下添加如下结构文件，并添加路由配置

在这里插入图片描述

index.js

const routes = [
    {
      /**
       * path: 路径为 / 时触发该路由规则
       * name: 路由的 name 为 Home
       * component: 触发路由时加载 `Home` 组件
       */
      path: "/View1",
      name: "View1",
      component: resolve => require(['../views/View1.vue'], resolve),
    },
    {
      path: "/View2",
      name: "View2",
      component: resolve => require(['../views/View2.vue'], resolve),
    },
    {
      path: "/View3",
      name: "View3",
      component: resolve => require(['../views/View3.vue'], resolve),
    }
  ];
  
  export default routes;

添加Vue Router，其实就是将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

main.js引入vue-router并使用

import Vue from 'vue'
import App from './App.vue'
//引入UI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
// 引入路由
import VueRouter from 'vue-router'
import routes from './router'


Vue.config.productionTip = false
Vue.use(ElementUI)

Vue.use(VueRouter)

const router = new VueRouter({
  mode: "history",
  routes,
})


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

components文件夹下面添加menu组件，结构如图

在这里插入图片描述

Index.vue

<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
            <template v-for="item in menuData" >
                <el-submenu v-if='item.children' :index="item.index" :key="item.index">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="subItem in item.children" :index="subItem.index" :key="subItem.index">{{subItem.name}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item v-else :index="item.index" :key="item.index">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
    export default {
        name:'CusHorizMenu',
        props:{
            menuData:{
                type:Array,
                default(){
                    return[]
                }
            }
        },
        data() {
            return {
                activeIndex: 'View1'
            }
        },
        methods: {
            handleSelect() {
                console.log('选中导航菜单的时候触发') 
            }
        },
        
    }
</script>

<style lang="scss" scoped>

</style>

更多el-menu相关配置见官方文档（https://element.eleme.cn/#/zh-CN/component/menu）

App.vue文件中引入菜单组件，并定义菜单栏数据menuData

<template>
  <div id="app">
    <!-- 全局引入的element-ui的组件 -->
    <el-button>按钮组件</el-button>
    <!-- 自定义组件 -->
    <cus-header></cus-header>
    <!-- 带路由的自定义组件（内部是element-ui组件）-->
    <horiz-menu :menuData="menuData"></horiz-menu>
    <!-- 路由组件内容展示区 -->
    <router-view></router-view>
  </div>
</template>

<script>

import CusHeader from '@/components/Header/Index.vue'
import HorizMenu from '@/components/HorizMenu/Index.vue'
export default {
  name: 'App',
  components: {
    CusHeader,
    HorizMenu
  },
  data() {
    return {
      menuData: [
        {
          index:'View1',
          name:'View1页',
          icon:'el-icon-location',
        },
        {
          index:'View2',
          name:'View2页',
          icon:'el-icon-location',
        },
        {
          index:'View3',
          name:'View3页',
          icon:'el-icon-location',
        }
      ]
    }
  },
}
</script>

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

3.5 路由跳转

普通跳转

使用 <router-link> 标签创建 a 标签来定义导航链接

View1.vue

<template>
    <div>
        这是View111111111
        <h1>使用 router-link 标签 创建 a 标签来定义导航链接</h1>
        <router-link to="/View2">Go to Foo</router-link>
    </div>
</template>

<script>
    export default {
        name:'View1'
    }
</script>

<style lang="scss" scoped>

</style>

常用的编程式导航

View2.vue

<template>
    <div>
        这是View22222222222
        <h2>编程式导航</h2>
        <el-button @click="toView3">跳转到View3页面</el-button>
        <h3>编程式导航的两种带参数跳转</h3>
        <div>
            <el-button @click="toView3Param">带参数跳转到View3页面name和params组合</el-button>
            <el-button @click="toView3Query">带参数跳转到View3页面path和query组合</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name:'View2',
        methods: {
            toView3() {
                this.$router.push('View3')
                // this.$router.push({path:'View3'})
            },
            toView3Param() {
                this.$router.push({ name: 'View3', params: { userId: '地址栏看不见的参数' }})
            },
            toView3Query() {
                this.$router.push({ path: '/View3', query: { userId: '地址栏看得见的参数' }})
            }
        },
        
    }
</script>

<style lang="scss" scoped>

</style>

导航守卫–组件内的导航守卫

<template>
    <div>
        这是View33333333333
        <div>接收到从View2带来的参数</div>
        <div>param={{param}}</div>
        <div>query={{query}}</div>
    </div>
</template>

<script>
    export default {
        name:'View3',
        data() {
            return {
                param:'',
                query:''
            }
        },
        beforeRouteEnter(to, from, next) {
            //to, 即将要进入的目标路由对象
            //from, 当前导航正要离开的路由
            //next() 进行管道中的下一个钩子，如果钩子全部执行完了，则导航的状态就是comfirmed
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            console.log(to, from, next)
            //next必须写，否则跳转不会成功，通过 `vm` 访问组件实例
            next(vm=>{
                vm.param = to.params.userId ? to.params.userId : ''
                vm.query = to.query.userId ? to.query.userId : ''
            })
        },
        beforeRouteUpdate (to, from, next) {
            console.log(to, from, next)
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            // 可以访问组件实例 `this`
        },
        beforeRouteLeave (to, from, next) {
            console.log(to, from, next)
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
        }
    }
</script>

<style lang="scss" scoped>

</style>

导航守卫参考（https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB）

3.6 添加配置

文件夹根目录位置添加vue.config.js

常用的几个：

module.exports = {
	publicPath:'',//部署应用包时的基本 URL,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/
	outputDir:'', //生成的生产环境构建文件的目录 buil时使用，目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
	assetsDir：'',//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录,相对地址
    devServer: {
      port: 10001, //指定启动项目所用的端口号
    //   proxy: 'localhost:8080', //代理地址，你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
    //   open: true,
    //   // 关闭主机检查，使微应用可以被 fetch
    //   disableHostCheck: true,
    //   // 配置跨域请求头，解决开发环境的跨域问题
    //   headers: {
    //     'Access-Control-Allow-Origin': '*',
    //   },
    }
}

具体的各项配置含义：https://cli.vuejs.org/zh/config/#vue-config-js

丹哥不是哥

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用vue-cli和element-ui快速搭建后台管理系统

使用vue-cli和element-ui入门实践1. 环境配置安装node从Node官网下载对应平台的安装程序https://nodejs.org/en/在window上安装时要注意：选择全部组件，包括勾选Add to Path。安装完成后，在window环境下，打开命令行窗口，然后输入node -v，如果安装正常，可以看到输出如图所示：2. 安装vue-cli参考文档https://cli.vuejs.org/zh/npm install -g @vue/cli目前按照这种方式安装应
复制链接

扫一扫