权限系统reademe.md文档---待整理

我的码云仓库地址

• 使用ElementUI插件:

安装elementui npm/cnpm i element-ui -S/--save
在main.js完整引入elementui:

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

将登录页面写过来:点击登录，请求数据，处理数据,获取到token，有token，进入首页

• 使用axios：

1.npm install axios --save
2.在main.js中引入  
import Axios from 'axios'
Vue.prototype.$axios = Axios  //将引入的axios挂到原型上
3.在具体组件中的mounted钩子中使用：
 mounted: {
   
    this.$axios.get('url')
      .then(res => {
   
        console.log(res.data)
      })
      .catch(error => {
   

	  })
 }

• 创建cookie，存储数据到cookie的教程：

1,在src新建一个文件夹，生成一个cookie.js文件：
用来封装cookie的set get方法
2.在登录页面引入：
import {
   setCookie,getCookie} from '@/utils/cookie.js'  
//使用set get方法   存储数据给cookie，取数据

• 设置拦截器：

1 路由拦截: 
在需要进行登录验证的路由设置meta: {
   requireAuth:true}
利用vue-router提供的钩子函数beforeEach()对路由进行判断  写在路由入口文件
2 axios拦截器:
//在路由拦截中，只要需要登录验证并且token存在就可以进入首页。
//如果token失效了但它依然存在，也可以进入首页，不允许这样的情况出现，所以需要axios拦截。
如果token存在就把token写进请求头
【相当于将token状态发送给后台】，后台会给返回值告诉前端token是否失效，如果失效就回去登录页面

• iview的使用：

1 npm install iview --save  
2 为了统一iview标签的书写规范，安装iview loader
  npm install iview-loader --save
3 在main.js中引用并注册iview:
  import iView from 'iview'
  import 'iview/dist/styles/iview.css'
  Vue.use(iView)
4  修改webpack配置：
     rules: [
    ...(config.dev.useEslint ? [createLintingRule()] : []),
    {
   
      test: /\.vue$/,
      use: [
        {
   
          loader: 'vue-loader',
          options: vueLoaderConfig
        },
        {
   
          loader: 'iview-loader',
          options: {
   
              prefix: false
          }
        }
      ]  
    },
    {
   
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
 }

• 按需引入组件 (推荐)：
  babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 。
  安装插件:

npm i babel-plugin-import -D

在 babel.config.js 中配置

module.exports = {
   
  plugins: [
    ['import', {
   
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

• 使用vant：
  通过 npm 安装npm i vant -S
  接着你可以在代码中直接引入 Vant 组件

// 插件会自动将代码转化为按需引入形式
import {
    Button } from 'vant'

引入vant后可以在方法中引用轻提示：

function () {
   
    this.$toast({
   
    message:'登录成功',
	})
}

• 接入代码报错，Module build failed 原因是package.json的依赖问题—“babel-plugin-import”: “^1.12.2” 问题解决方法参考
  解决方法：

//cmd定位到项目根目录，
//vue ui安装babel-plugin-import依赖  
//再重启项目npm run serve
E:\自学代码\VUE\companypro\permissionsys>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

• 列表和菜单结合的思路
• 渲染菜单接口数据 遇到菜单名称显示不出来的问题的解决办法： label

vuex安装和使用

1，npm i vuex -S
2.在main.js导入包  import Vuex from 'vuex'
3.在main.js注册vuex到vue中:  Vue.use(Vuex)
4.在main.js 中new一个vuex实例，得到一个数据仓储对象
const store = new Vuex.Store({
     //每个应用只有一个store实例，包含了全部的应用层级状态，单一状态树
  state: {
    //存储数据  这里存储的数据，可以全局使用，所有组件都可以使用 $store.state.count
    count: 0
  },
  mutations: {
    //通过调用mutations的方法去操作state的数据，强烈不推荐直接操作state中的数据，容易造成数据紊乱，无法快速定位到错误源
    increment(state) {
    //通过increment方法操作state中的count数据  子组件如果想要操作count数据就去调用increment方法 this.$store.commit('方法名')    
      state.count++;
    }
  },
  getters: {
    //只负责对外提供数据，不负责修改数据  $store.getters.optCount 把原数据做一层包装，提供给调用者
    //只要state中的数据发生变化了，如果getters也正好引用了数据，就会理解触发getters的重新求值
    // optCount: function(state) {
   
    //   return '当前最新的count值是：'+state.count
    // }
  }
})
5，把store挂载到vm实例中  所有子组件能通过this.$store访问到 
new Vue({
    
  router,
  store,
  render: h => h(App)
}).$mount('#app')

store中 state用来存储数据，在子组件中使用this.$store.state来获取，数据不能通过state直接修改，改是可以改但是容易出错，也不符合vuex原理

在mutations中修改state数据【this.$store.commit('方法名称'，唯一的一个参数)】，

getters只负责向调用者提供数据 $store.getters.方法名

#this.$emit(‘父组件中的方法名’)

nginx配置，解决跨域问题：

1.安装nginx，解压到无中文名的路径，

start nginx 启动
修改nginx.conf配置文件，
nginx.exe -s reload重启，
localhost打开页面显示welcome to nginx 或者人去管理器查看进程有nginx说明启动成功。

2.在根目录新建vue.config.js文件，遍历配置信息 保存文件重启项目

添加链接描述

module.exports = {
   
    runtimeCompiler: true,
    devServer: {
   
        port: 8080,
        host