vue-admin-template模板的使用

1.下载地址

https://github.com/PanJiaChen/vue-admin-template.git

git clone https://github.com/PanJiaChen/vue-admin-template.git

下载对应modules文件：

npm install

2.修改初始配置

• 卸载eslint：npm uninstall eslint --save

• 修改bug

• 在utils文件夹的request.js文件对axios二次封装进行修改（注意*号部分）

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    ......
    if (store.getters.token) {
      // ['X-Token'] 是与后端商量好的token名称
      // 例如后端的token名称就叫token则：config.headers["token"] = getToken();  *******
      config.headers["X-Token"] = getToken();  
    }
    return config;
  },
 ......
);
    
 // 响应拦截器
service.interceptors.response.use(
    ......
    // 如果服务器响应失败则
    if (res.code !== 20000 && res.code !== 200) {    //修改成与后端商量好的返回成功的校验数据******
      Message({
        message: res.message || "Error",
        type: "error",
        duration: 5 * 1000,
      });
     .....  
);

• 在vue.config.js中设置代理，关掉mock假数据的使用，连接服务器

  devServer: {
    ......
    // before: require("./mock/mock-server.js"),  //使用mock数据
    //配置代理跨域******
    proxy: {
      "/dev-api": {
        // 匹配所有以'/jxzz'开头的请求路径
        target: "http://39.98.123.211:8170/", // 代理目标的基础路径
        pathRewrite: { "^/dev-api": "" }, // 重写路径
        // ws: true, // 用于支持websocket
        // changeOrigin: true // 用于控制请求头中的host值
      },
    },
  },

• src–>api文件夹–>user.js (对应接口文件) 修改接口地址，与后端接通

export function login(data) {
  return request({
    url: "/admin/acl/index/login",  //********
    method: "post",
    data,
  });
}
// 获取用户信息
export function getInfo(token) {
  return request({
    url: "/admin/acl/index/info", //********
    method: "get",
    params: { token },
  });
}

• npm run dev 查看是否正常启动

3.基本使用

* 添加一个模块（添加路由）：

1. 在view文件夹创建模板
2. 写好基础模板样式：

<template>
  <div>Attr</div>
</template>

<script>
export default {
  name: "Attr",
};
</script>

<style scoped></style>

3. 在router文件夹的index.js文件添加路由(根据情况把不需要的模块的路由删除)：

export const constantRoutes = [
 .....
  {
    path: "/product",
    component: Layout,
    name: "Product",
    meta: { title: "商品管理", icon: "el-icon-goods" },
    children: [
      {
        path: "trademark",
        name: "TradeMark",
        component: () => import("@/views/product/tradeMark/index"),
        meta: { title: "品牌管理" },
      },
      {
        path: "attr",
        name: "Attr",
        component: () => import("@/views/product/Attr"),
        meta: { title: "平台属性管理" },
      },
      {
        path: "spu",
        name: "Spu",
        component: () => import("@/views/product/Spu"),
        meta: { title: "Spu管理" },
      },
      {
        path: "sku",
        name: "Sku",
        component: () => import("@/views/product/Sku"),
        meta: { title: "Sku管理" },
      },
    ],
  },
  ......
];

4.项目技巧：

• splice配合解构赋值：

  const [baseSaleAttrId, saleAttrName] = this.attrIdAndAttrName.split(":");
  let newSaleAttr = {
    baseSaleAttrId,
    saleAttrName,
    spuSaleAttrValueList: [],
  };
  console.log(newSaleAttr);
  // 显示：
  {baseSaleAttrId: "2",saleAttrName: "版本",spuSaleAttrValueList: []}
  

• 下拉列表收集值与名称（也可直接传对象）

  <el-option :label="item.name" :value="`${item.id}:${item.name}`" v-for="item in attr" :key="item.id"></el-option>
  

• 清空data的数据

  // 取消按钮
  cencel() {
    // 清除数据
    // Object.assign:es6中新增的方法可以合并对象
    // 组件实例this._data，可以操作data当中响应式数据
    // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空
    Object.assign(this._data, this.$options.data());
  },
  

• 当传给子组件的数据不确定时v-bind="$attrs" v-on="$listeners"获取父组件的数据

    <a :title="title" style="margin: 5px">
      <el-button v-bind="$attrs" v-on="$listeners"></el-button>
    </a>
  
  //在父组件中直接传输不用props
  <HintButton
    size="mini"
    type="success"
    icon="el-icon-plus"
    title="添加sku"
    @click="addSku(row)"
  ></HintButton>
  
  // v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
  // v-on="$listeners" 将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用。
  // vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。