Vue技术点整理-Vue CLI

Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架

注：具体安装步骤可参考Vue CLI，默认安装的脚手架，是没有service、util等工具类的，以下主要描述如何在脚手架的基础上进行快速开发
GitHub示例地址 vue-ht-cli

一，vue.config.js配置文件

默认Vue CLI安装完成后，是没有这个配置文件的，需要手动在项目根目录创建，并修改使用:

以下为我简单配置的文件，更多详细配置，请参考 Vue CLI官网

vue.config.js

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  // outputDir: 在npm run build时 生成文件的目录 type:string, default:"dist"
  outputDir: "dist",
  // assetsDir 静态文件目录(js, css, img, fonts) under
  // assetsDir: "static",
  // lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
  lintOnSave: true,
  // productionSourceMap：{ type:Bollean,default:true } 生产源映射
  // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
  productionSourceMap: false,
  // devServer:{type:Object} 3个属性host,port,https
  // 它支持webPack-dev-server的所有选项
  devServer: {
    port: 8085, // 端口号
    host: "192.168.3.49",
    //host: "localhost",
    https: false,
    open: false, //配置自动启动浏览器
    proxy: null
  }
};

设置代理模式

devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
}

 

二，使用postcss-pxtorem自动px转换为rem

注：根据UI设计稿的比例(750、375等)，设置rootValue的值

开发时直接使用px进行开发，项目启动或者部署后，会直接按照比例转换为rem

postcss.config.js

module.exports = {
  plugins: {
    "autoprefixer": {
        browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": {
      "rootValue": 37.5, // 设计稿宽度的1/10,
      "propList": ['*']// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
  }
};

package.json

增加postcss-pxtorem的依赖，然后npm install

 三，使用UI vant进行快速项目开发

1，安装babel-plugin-import依赖

2，在.babelrc 或者 babel.config.js文件里面加入以下配置

babel7版本以上配置：

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

babel7版本以下配置：

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

3，在项目中引入直接使用

import { Button } from 'vant';

具体vant使用参考官网

四，api请求axios、jsonp、util等插件封装

1，axios、jsonp请求统一封装为httpRequest.js

import axios from "axios";
import jsonp from "jsonp";
// 请求拦截器
axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
// 返回拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    return Promise.resolve(error.response);
  }
);
class HttpRequest {
  get(url, paramer, header) {
    return this.post(url, paramer, header, "get");
  }
  /**
   * url : 请求地址
   * param : 请求参数
   * header : 需要添加的header,例如:{"Authorization":"xxxxx"}
   * json: "application/json; charset=utf-8"
   * form: "application/x-www-form-urlencoded; charset=utf-8"
   */
  post(url, params, header, method) {
    let headers = { "Content-Type": "application/json" };
    if (header) {
      Object.assign(headers, header);
    }
    let data = new Promise((resolve, reject) => {
      axios
        .request({
          url: url,
          method: method ? "get" : "post",
          params: method == "get" ? params : null,
          data: method != "get" ? params : null,
          headers: headers,
          timeout: 10000,
          responseType: "json"
        })
        .then(response => {
          resolve(response["data"]);
        })
        .catch(function(error) {
          reject(error);
        });
    });
    return data;
  }
  /**
   * url:请求地址
   * pm:服务端接收jsonp的名称,默认为jsoncallback
   * 注：callback为服务端返回的函数名称
   */
  jsonp(url, pm) {
    const data = new Promise((resolve, reject) => {
      jsonp(
        url,
        {
          timeout: TIMEOUT,
          param: pm === true ? pm : "jsoncallback",
          name: "callback"
        },
        (err, data) => {
          if (err) {
            reject(err);
          } else {
            resolve(data);
          }
        }
      );
    });
    return data;
  }
}
export default new HttpRequest();

View Code