Vue后台管理系统

作者：运维做开发 | 2024-07-17 14:02:35

踩

vue后台管理系统

请添加图片描述
npm 是node的包管理工具 yarn是为了弥补npm的缺陷而出现
yarn的速度快并行安装离线模式
安装版本的统一 .lock文件
更简洁的输出
更好的语义化

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

vue-cli搭建的详细过程

使用之前必须有node环境，确保电脑上安装了node.js
node -v可以查看安装node版本
npm -v可以查看npm是否存在了
可以选择安装cnpm和yarn

安装cnpm

http://npmmirror.com/
npm install -g cnpm --registry=https://registry.npmmirror.com安装cnpm
cnpm -v查看是否安装成功

有人说cnpm可能会引起一些奇怪的bug，稳妥起见还是把npm的源改成taobao镜像就好这里我是安装好了yarn

可以使用cnpm install -g @vue/cli安装脚手架
vue -V可以查看脚手架是否安装成功显示安装的版本

创建项目

使用 vue create projectname
在这里插入图片描述

element-ui在网页中使用

CDN
https://www.bootcdn.cn/
elementUI官网

vue官网

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true" type="success">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
  <script>
    new Vue({
     
      el: '#app',
      data: function() {
     
        return {
      visible: false }
      }
    })
  </script>
</html>
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

element-ui结合脚手架使用之全部引入

npm i element-ui --save-dev
在这里插入图片描述
main.js中添加

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

页面中使用个组件即可
打包时内容过大

按需引入

为了更好的看出完整引入和按需引入的差别可以先对项目进行打包
npm run build
相关步骤看官网即可

vue路由的使用

npm i vue-router@3.2.0
在这里插入图片描述
main.js引入router

import router from './router'
new Vue({
   
  router,
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6

src下创建router文件夹下面有index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
   
    path: '/',
    name: "Home",
    component: () => import('../views/Home')
  }
]

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

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

views文件夹放置对应的路由页面Home.vue

想要显示的页面上要写<router-view></router-view>

首页整ui的搭建

使用Container布局容器
想要使用less npm i less npm i less-loader@5.0.0
views/Main.vue

左侧菜单栏的引入

navmenu
commponet/CommonAside.vue

一级菜单的实现

导航栏的文本以及数据可以存储在一个数组中，每一个在里面又是一个对象

menu: [
        {
   
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
   
          path: '/mail',
          name: 'mail',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
   
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
   
          label: '其他',
          icon: 'location',
          children: [
            {
   
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            }, 
            {
   
              path: 'page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              ulr: 'Other/PageTwo'
            }
          ]
        }
      ]
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

处理数据使用计算属性computed

 computed: {
   
    noChildren() {
   
      return this.menu.filter(item => !item.children)
    },
    hasChildren() {
   
      return this.menu.filter(item => item.children)
    }
  }
  //判断是否有子项 没有的话就是一级菜单
1
2
3
4
5
6
7
8
9
10
11
12

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/840273