---

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 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• vuex中的五个状态
  State
  提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，类似于data
  Getter
  类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据
  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.6 vuetify

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

2. Code

2.1 入门

2.2 入门

2.3 入门

3. xxx

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