前端装机之vue最佳实践-v2.6（二）

书接上回，安装好路由了，开始开发页面。把开发组件的配置配好。分为三个地方，我们一HTML,JS,CSS来说

1.HTML--element UI

这里用element ui 来做例子，其他的组件库都是一样的。打开element ui官网，看看起步，入门。

element UI官网

如何下载，如何引入都有指引的。我的项目用的yarn ,就直接yarn add xxxx就可以了，用npm或者其他的都一样的。

引入element，有两种，我为了方便直接全局全部引用了，有些项目为了更小的打包，可以分片引入，详细参考官网，我直接贴引入代码了

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router/router-config'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(ElementUI);

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

引入组件，并且引入css的样式表即可。使用vue.use挂载插件。

然后再自己的组件中加入一个element组件试试，看有没有效果

<template>
  <div class="ele-box">
    <span>test</span>
     <el-button type="success">主要按钮</el-button>
  </div>
</template>

加入到任意一个vue文件的template中看看有没有一个绿色的按钮，如果有，那就恭喜引入成功了

2.css --scss

css为了更好的结构，或者一些其他的功能，我使用的scss预编译。

scss下载的话，我这边建议下载这两个版本

    "node-sass": "^6.0.1",
    "sass-loader": "^10.2.0",

很多时候这两个是搭配使用的。如果版本不一致可能会出现一些奇怪的bug

vue.config.js中加入css配置，如果发现项目上没有这个文件，那就自己创建一个

module.exports = {
  chainWebpack: (config) => {
    config.entry("app").clear().add("./src/main.js");

    config.resolve.extensions
      .clear()
      .add(".ts")
      .add(".mjs")
      .add(".js")
      .add(".jsx")
      .add(".vue")
      .add(".json")
      .add(".wasm")
      .end();
  },

  devServer: {
    proxy: {
      "/api/xxx": {
        target:"http://xxx.xx.xx.xx:8080",
        screen: false,
        changeOrigin: true,
      //   pathRewrite:{ //将api替换成空，以满足本地的接口
      //     '^/api':''
      // } 
      },
     
    },
  },
  configureWebpack: {
    devtool: "source-map"
  },
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/static/variables.scss";`//公共样式位置，additionalData可能会有变化，以官网为准
      }
    } 
  },
  publicPath: './',
  assetsDir: "static",
  outputDir: "dist/best-paractice-vue2.6"//设置打包路径以及名称
};

先不用管其他的，主要找到最后几行那个css配置项，那个scss配置，那个@import 后面的路径是全局的样式地址，你想放哪里就放哪里，我放在src下面的static文件下

配置好就可以写scss了。怎么写呢。回到vue文件

<style scoped lang="scss">
.ele-box {
  > span {
    background: red;
  }
}
</style>

 style标签加入lang属性，scss，然后写scss的话，去官网看看，就是这种级联的方式写的。我翻译一下上面这个代码，就是  .ele-box 标签下面的 所有span子元素设置背景为红色。哈哈哈

3.js--axios

js部分主要是axios的调用接口方式，以及简单的封装调用方式。

下载axios，同理，yarn add axios或者npm i axios;

新建一个service文件夹，新建一个axios-http.js文件，看看里面应该怎么写

axios-http.js

/**
 * axios的简单二次封装，基础api在此配置
 */

const axios = require("axios");

let setting = {
  baseURL: "",
};
const server = axios.create(setting);
server.interceptors.response.use((response) => {
  if (response.status === 200) {
    if (response.headers["content-disposition"]) {
      //post文件下载，用于取文件名
      return response;
    } else {
      return response.data;
    }
  } else {
    throw new Error("接口出错");
  }
});

/**
 * 
 * @param {*} type "get","post"
 * @param {*} url  "xxxx/xxx/"
 * @param {*} options  {a:"",b:""}
 * @returns 
 * 例：HTTP("get","api/xxx/xxx").then(res=>{
    console.log(res,'res');
})
 */

const HTTP = (type, url, options = {}) => {
  if (type == "get") {
    const len = Object.keys(options).length;
    if (len != 0) {
      url += "?";
      Object.keys(options).forEach((key, index) => {
        url += key + "=" + options[key];
        if (index != len - 1) {
          url += "&";
        }
      });
    }
    return server.get(url);
  }

  if (type == "post") {
    return server.post(url, options);
  }

  return null;
};

export default HTTP;

通过nodejs引入axios，通过封装get和post，根据不同的业务来封装修改。我这里只是统一了get和post调用方式。最后export方法。然后只需要在使用的vue文件中引入使用即可。回到vue文件

<script>
import HTTP from "../service/axios-http";
export default {
  name: "ElementTest",
  created() {
    console.log(HTTP, "a");
    HTTP("get", "api/xxx/xxx").then((res) => {
      console.log(res, "res");
    });
  },
};
</script>

import文件，然后直接使用方法即可。具体操作，查看axios官方文档。

总体

上面说的差不多了，整体看下现在的组件结构

ElementTest.vue

<template>
  <div class="ele-box">
    <span>test</span>
     <el-button type="success">主要按钮</el-button>
  </div>
</template>

<script>
import HTTP from "../service/axios-http";
export default {
  name: "ElementTest",
  created() {
    console.log(HTTP, "a");
    HTTP("get", "http://192.168.0.74:9000/readsselection/cnrs/taskStatus/").then((res) => {
      console.log(res, "res");
    });
  },
};
</script>

<style scoped lang="scss">
.ele-box {
  > span {
    background: red;
  }
}
</style>

整个文件就上面这些，加入了三个插件，平时开发这三个就够了。后续我会更新一些常用的通用方法，敬请期待。。。。