在这里插入图片描述

vue-vuetify-admin案例讲解

在这里插入图片描述

在这里插入图片描述

vue-vuetify-admin: https://github.com/NelsonEAX/vue-vuetify-admin.

1. Introduction

1.1 directory structure

在这里插入图片描述

1.2 vue-cli

  • vue-cli
    CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。Vue CLI是一个官方发布 vue.js 项目脚手架。使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
  • 特点
    开箱即用
    基于 webpack
    功能丰富且易于扩展
    支持创建 vue2 和 vue3 的项目
  • 启动
    npm run serve
//package.json
  "scripts": {
    "serve": "vue-cli-service serve --https",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },

1.3 vuex

  • Vuex Website: https://vuex.vuejs.org/zh/guide/getters.html.
  • 介绍
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
  • vuex中的五个状态
    State
    提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，类似于data
    Getter
    有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数
    Mutation
    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
    Action
    Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action
    Module
    当遇见大型项目时，数据量大，store就会显得很臃肿
    Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
1.3.1 在store目录创建index.js
import Vue from 'vue';
import Vuex from 'vuex';
import syncStorage from './plugins/syncStorage';
import permission from './modules/permission';
import settings from './modules/settings';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    permission,
    settings,
    user,
  },

  plugins: [
    syncStorage({}),
  ],

  state: {},
  mutations: {},
  actions: {},
  getters: {},
});
1.3.2 在main.js中引入
import App from './App.vue';
import router from './router';
import store from './store';

import './router/permission';
import './registerServiceWorker';

new Vue({
  router,
  store,
  i18n,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');
1.3.2 操作数据
import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        pathName: "",
        currDbSource: {},
        currJobData: {},
        DbSource: []
    },
    mutations:{
        // 保存当前菜单栏的路径
        savePath(state,pathName){
            state.pathName = pathName;
        },
        // 保存当前点击的数据源
        saveCurrDbSource(state,currDbSource){
            state.currDbSource = currDbSource;
        },
        // 保存当前点击的元数据
        saveCurrJobData(state,currJobData){
            state.currJobData = currJobData;
        },
        // 保存所有数据源
        saveDbSource(state,DbSource){
            state.DbSource = DbSource;
        }
    }
})

methods:{
    click(){
        // 点击按钮进行一些操作，然后保存数据
        this.$store.commit('saveCurrDbSource',this.db)
    }
}
1.3.4 获取store中的值
//在方法中获取
this.$store.state.变量名

//直接展示在页面
<p>{{$store.state.变量名}}</p>

1.4 vue-router

  • 介绍
    Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。
  • 功能
    嵌套路由映射
    动态路由选择
    模块化、基于组件的路由配置
    路由参数、查询、通配符
    展示由 Vue.js 的过渡系统提供的过渡效果
    细致的导航控制
    自动激活 CSS 类的链接
    HTML5 history 模式或 hash 模式
    可定制的滚动行为
    URL 的正确编码

1.5 axios

  • 介绍
    axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个方法。
  • 特点
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
    1.从浏览器中创建 XMLHttpRequests
    2.从 node.js 创建 http 请求
    3.支持 Promise API
    4.拦截请求和响应
    5.转换请求数据和响应数据
    6.取消请求
    7.自动转换 JSON 数据
    8.客户端支持防御 XSRF
  • 支持的浏览器
    在这里插入图片描述
1.5.1 example
// Make a request for a user with a given ID
import axios from 'axios';


axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Optionally the request above could also be done as
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

// Performing a POST request
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//Performing multiple concurrent request
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });
1.5.2 api
// axios(config) => Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// axios(config) => Send a Get request
axios({
  method: 'get',
  url: 'https://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
  

// axios(url[, config]) (default method get)
axios('/user/12345');

1.6 vuetify

  • 介绍
    vuetify是一个基于vue2.0，为移动而生的组件框架，一个渐进式的UI框架
  • 优点
    Vuetify几乎不需要任何CSS代码，而element-ui有许多布局样式由其编写。
    Vuetify是从底层构建起来的语义化组件。简单易学，容易记住。
    Vuetify基于Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统一。

2. Code

2.1 Login Page

  • 访问 http://localhost:8080
    在这里插入图片描述
  • 快速找到对应的页面
    登陆页SingIn.vue
    登出页Landing.vue
    注册页SingUp.vue
    在这里插入图片描述
  • 点击按钮登陆SingIn.vue
    在这里插入图片描述
  • 验证后直接跳转到首页
    在这里插入图片描述
  • 通过邮箱进行校验
    在这里插入图片描述
  • 故意写错，查看报警，具体内容要花时间研究在这里插入图片描述

2.2 入口文件

  • App.vue,路由匹配到的组件将显示在这里
    在这里插入图片描述
  • 登陆成功后，跳转到/
    其实就是跳转到了Dashboard
    在这里插入图片描述
    在这里插入图片描述
  • router的设定，导入下面的layout。
    在这里插入图片描述
  • 所有东西都在layout里面
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.3 vuex状态查看

  • 插件安装
    在这里插入图片描述
  • 实时查看store的状态
    在这里插入图片描述
  • 详细设定，请参考1.3
    1.创建store目录，创建index.js
    2.main.js中导入store
    在这里插入图片描述
    3.以user为例，查看store的使用
    定义数据结构，mutation里面定义方法，异步执行使用action
    在这里插入图片描述

2.4 dashboard

  • 最上面的内容
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 中间的三个chart
    在这里插入图片描述
    在这里插入图片描述
  • 最下面两个框框
    123
    在这里插入图片描述
    在这里插入图片描述

2.5 vue-i18n切换语言

  • 语言切换
    1.遍历src/locale/vuetify.js
    2.按钮点击呼叫方法，执行setLocale
    3.切换到对应语言的index.js
    在这里插入图片描述

3. Awakening

         在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人，自然是不一样的命运。
在这里插入图片描述

# vue.js # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue