新冠物资管理系统_前端

xinguan-vue

0000

• 搭建Vue架子
  • cmd的vue ui启动，创建项目，运行即可生成node_modules信息

0101

• 在login.vue登录界面

  • 1、添加背景色（青绿色）
  • 2、添加居中白色方形图案
  • 3、添加剧中头像（此处仅动图）
  • 4、添加输入框
  • 5、添加登录和重置按钮
  • 6、添加验证码（此处仅动图）

• Element

  • npm的方式安装npm i element-ui -S

  • 放入全部组件，实现方法：在main.js中加入

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

• less-loader

  • 需要添加less-loader，否则会报错：Failed to resolve loader: less-loader;You may need to install it.

  • 项目中想使用less进行进行样式编辑：<style lang="less" scoped>

  • 需要在终点命令：npm install -D less-loader@7.x

• less-loader错误解决

  • 添加版本不符时：

    • 正常添加终点命令：npm install --save-dev less-loader less

    • 如果这样报错的话，是版本问题，需要在上一条命令后追加--legacy-peer-deps

    • npm install --save-dev less-loader less --legacy-peer-deps

    •  npm ERR! code ERESOLVE
       npm ERR! ERESOLVE unable to resolve dependency tree
       npm ERR!
       npm ERR! While resolving: vol.vue3@0.1.0
       npm ERR! Found: vue@3.2.20
       npm ERR! node_modules/vue
       npm ERR!   vue@"^3.0.0" from the root project
       npm ERR!
       npm ERR! Could not resolve dependency:
       npm ERR! peer vue@"^2.5.17" from element-ui@2.15.6
       npm ERR! node_modules/element-ui
       npm ERR!   element-ui@"*" from the root project
       npm ERR!
       npm ERR! Fix the upstream dependency conflict, or retry
       npm ERR! this command with --force, or --legacy-peer-deps
       npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
       npm ERR!
       npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.
        
       npm ERR! A complete log of this run can be found in:
       npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-10-11T06_27_44_908Z-debug.log
      

  • 仍然错误时

    • 报错：error in .ciews/Main.vue?vue&type=style&index=0&id=c1f1971a&lang=less&scoped=true&

    • 报错：Syntax Error: TypeError: this.getOptions is not a function

    • 进入package.json文件中，找到less-loader和less版本，相差过多

    • // 卸载
      npm uninstall --save less-loader
      // 安装
      npm install -D less-loader@7.x
      

• app.vue

  • <router-link to="/login">Login</router-link>

• index.js

  •   {
        path: '/login',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
      }
    

0102

删除无关代码

• 直接删文件

  • home.vue
  • about.vue

• 删除代码

  • app.vue

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

  • router/index.js

    • import Vue from 'vue'
      import VueRouter from 'vue-router'
      Vue.use(VueRouter)
      const routes = [
        {
          path: '/',
          redirect: '/login', //重定向到/login
        },
        {
          path: '/login',
          name: 'Login',
          component: () => import('../views/Login.vue')
        }
      ]
      const router = new VueRouter({
        routes
      })
      export default router
      

0202

• el-menu 主菜单
• el-submenu 子菜单
• el-menu-item 内容项