带你用vue2写后台系列（配置插件篇）

带你用vue2写后台系列(配置插件篇)

1、js-cookie的安装和使用

(1) +js-cookie介绍

js-cookie是一个简单的,轻量级的处理cookies的js API，用来处理cookie相关的插件

(2)+ 安装

登录后复制

npm install--save js-cookie

• 1.

(3)+引入

登录后复制

import Cookies from 'js-cookie'

• 1.

(4)+使用

• 添加cookie

登录后复制

// 创建一个名称为username，对应值为value的cookie

没有设置失效时间，默认失效时间为该网站关闭时

Cookies.set(username, value)

// 创建一个有效时间为7天的cookie
Cookies.set(username, value, { expires: 7 })

// 创建一个带有路径的cookie
Cookies.set(username, value, { path: '' })

// 创建一个value为对象的cookie
const obj = { username: 'ryan' }
Cookies.set('user', obj)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.

• 获取cookie

登录后复制

// 获取指定名称的cookie
Cookies.get(name) // value

// 获取value为对象的cookie
const obj = { name: 'ryan' }
Cookies.set('user', obj)
JSON.parse(Cookies.get('user'))

// 获取所有cookie
Cookies.get()

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

• 删除cookie

登录后复制

// 删除指定名称的cookie
Cookies.remove(name) // value

// 删除带有路径的cookie
Cookies.set(name, value, { path: '' })

Cookies.remove(name, { path: '' })

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.

2、使用nprogress 全局加载进度条

(1)安装nprogress 全局加载进度条：

登录后复制

npm install--save nprogress

• 1.

安装成功以后就会提示我们：

登录后复制

added1 package in 9s

• 1.

(2)引入

源使用其实是在项目的src下面的main.js里面

一般正常写在你的路由拦截器里面

我的在 permission.js

登录后复制

import NProgress from "nprogress"; // 导入 nprogress模块

import "nprogress/nprogress.css"; // 导入样式，否则看不到效果

NProgress.configure({ showSpinner: false }); // 显示右上角螺旋加载提示

• 1.
• 2.
• 3.
• 4.
• 5.

使用前

使用后

(3)使用

登录后复制

router.beforeEach((to, from, next) => {
    console.log(to, from, next,'路由加载中！')
    NProgress.start(); //开启进度条
	//满足要求后就可以next()
    next();
});

router.afterEach(() => {
    console.log('路由加载完成！');
    NProgress.done(); //完成进度条
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.

3、安装 vuex

在vue2的项目之中我们还是使用vuex用来存储数据更加的方便，最主要的就是稳，毕竟已经有无数人为踩好了坑

• 安装vuex

这里安装部分我们就选择了3.6.0版本部分的

登录后复制

npm install vuex@3.6.0  //vuex状态管理器安装

• 1.

• 引入

在项目的入口文件(一般是main.js)中导入 Vuex 并安装，但是在复杂一些项目之中一般会写到store文件下的index.js文件里面，这里我的store就是

这里可以先看看我的目录部分

• index.js文件里面

登录后复制

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

• 1.
• 2.
• 3.

试着存储一个状态

登录后复制

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {}; //直接修改数据
const actions = {}; //行为
const mutations = {}; //修改state 里面数据

 const store = new Vuex.Store({
    state: {
        userId: '',
        count: 0, // 示例状态
    },
 })
 export default store

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.

接下来我们如果需要使用就需要用到仓库之中的状态和行为一起：

创建一个新的 Vuex store 需要定义 state、mutations、actions 和 getters。

登录后复制

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
    decrement(context) {
      context.commit('decrement');
    }
  },
  getters: {
    getCount: state => state.count
  }
});

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.

• 使用

在组件之中其实我们是触发相对应的行为，然后触发行为去改变状态！

登录后复制

<template>
  <div>
    <p>Count: {{ getCount }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getCount'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
}
</script>

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

4、安装 sass-loader

在项目目录中安装vue-loader和sass-loader

登录后复制

npm install sass-loader

• 1.

5、安装 node-sass

登录后复制

npm install node-sass

• 1.

6、vue 配置 package.json

这边各种报错，朋友直接建议我去复制一下开源项目若依的，我建议你也是！ package.json配置

登录后复制

{
  "name": "nexusvue",
  "version": "0.1.0",
  "description": "nexus",
  "author": "nexus",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
    "admin",
    "dashboard",
    "element-ui",
    "boilerplate",
    "admin-template",
    "management-system"
  ],
  "repository": {
    "type": "git",
    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
  },

  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "@riophae/vue-treeselect": "0.4.0",
    "axios": "0.24.0",
    "canvg": "^4.0.1",
    "clipboard": "2.0.8",
    "core-js": "3.25.3",
    "easemob-websdk": "^4.1.2",
    "echarts": "^4.7.0",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.15.12",
    "ezuikit-js": "^0.7.2",
    "file-saver": "2.0.5",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.3",
    "js-beautify": "1.13.0",
    "js-cookie": "3.0.1",
    "jsencrypt": "3.0.0-rc.1",
    "jspdf": "^2.5.1",
    "normalize.css": "^8.0.1",
    "nprogress": "0.2.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "vue": "2.6.14",
    "vue-amap": "^0.5.10",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-meta": "2.4.0",
    "vue-qr": "^4.0.9",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "3.4.9",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },

  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "@vuemap/unplugin-resolver": "^1.0.4",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "4.1.0",
    "compression-webpack-plugin": "5.0.2",
    "connect": "3.6.6",
    "eslint": "5.15.3",
    "eslint-plugin-vue": "5.2.2",
    "lint-staged": "10.5.3",
    "runjs": "4.4.2",
    "sass": "1.32.13",
    "sass-loader": "10.1.1",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "unplugin-auto-import": "^0.14.4",
    "unplugin-vue-components": "^0.24.0",
    "vue-template-compiler": "2.6.12"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

• 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.
• 50.
• 51.
• 52.
• 53.
• 54.
• 55.
• 56.
• 57.
• 58.
• 59.
• 60.
• 61.
• 62.
• 63.
• 64.
• 65.
• 66.
• 67.
• 68.
• 69.
• 70.
• 71.
• 72.
• 73.
• 74.
• 75.
• 76.
• 77.
• 78.
• 79.
• 80.
• 81.
• 82.
• 83.
• 84.
• 85.
• 86.
• 87.
• 88.
• 89.
• 90.
• 91.
• 92.
• 93.
• 94.
• 95.
• 96.
• 97.
• 98.
• 99.
• 100.
• 101.
• 102.
• 103.
• 104.
• 105.
• 106.
• 107.
• 108.

7、项目配置主题色

采取方法-----切换已定义好的css文件

登录后复制

定义：
:root {
  --ltbbac-color:#F0F0F0; /*最大的根目录背景色*/
  --ltbbtn-color:#F0F0F0; /*按钮背景色*/
  --ltbfont-color:#fff;/*字体背景色*/
}

使用：
background: var(--ltbbac-color);
color: var(--ltbfont-color);

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

① public 文件下新建样式文件

② 放入根主题样式

登录后复制

theme-dark.css

:root {
  --primary-color: #000; // 黑色主题颜色
}

theme-light.css
:root {
  --primary-color: #1890FF; // 黑色主题颜色
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

③使用

index.html 中引入

登录后复制

<link id="theme-link" rel="stylesheet" type="text/css" href="./static/style/theme-light.css" />

• 1.

• App.vue里面我们直接尝试背景色

登录后复制

#app{
    background: var(--primary-color);
}

• 1.
• 2.
• 3.

④切换主题色

登录后复制

按钮<el-button @click="switchTheme()">切换主题-太白</el-button>


// 切换主题函数方法
switchTheme(){
   document.getElementById("theme-link").href = './static/style/theme-dark.css';
},

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

切换以后