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
2
3
4
5
6
7
8

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
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

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
        }
    }
})
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

methods:{
    click(){
        // 点击按钮进行一些操作，然后保存数据
        this.$store.commit('saveCurrDbSource',this.db)
    }
}
1
2
3
4
5
6

1.3.4 获取store中的值

//在方法中获取
this.$store.state.变量名
1
2

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

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);
  }
}
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

// Performing a POST request
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
1
2
3
4
5
6
7
8
9
10
11

//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
2
3
4
5
6
7
8
9
10
11
12
13
14

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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
  
  
• 最下面两个框框
  
  
  

2.5 vue-i18n切换语言

• 语言切换
  1.遍历src/locale/vuetify.js
2.按钮点击呼叫方法，执行setLocale
3.切换到对应语言的index.js
  

3. Awakening

         在一秒钟内看到本质的人和花半辈子也看不清一件事本质的人，自然是不一样的命运。