Vue 开发设置使用淘宝镜像 yarn 设置 对于国内的前端开发来说，经常会依赖大量的 npm 包，使用国内淘宝的镜像下载时会更加快速，强烈推荐使用！ yarn 是 FaceBook 推出的包管理器，相对于 npm 来说做了很多改进，更快速和稳定，我一直在使用它。 1.查询当前配置的镜像 yarn config get registry 设置成淘宝镜像 yarn config set registry http://registry.npm.taobao.org/……

阅读全文

webpack 自定义别名后，VScode 路径提示问题 问： 用@vue/cli 3 创建的项目，配置了自定义别名。例如"@/xxx"，配置完后 VScode 没有代码提示了。 VScode 是装了插件的，用相对路径有提示，如"./xxx"时是有路径提示。 答： 可以在项目的根目录下创建 tsconfig.json 或者……

阅读全文

使用 parcel 的 watch 整合单页应用和 JAVA WEB 由于通常情况下使用 NODE 进行前端开发时，会启动相应的应用服务器。而使用 JAVA WEB 开发时也有相应的应用服务器要启动。这在本机开发时要通过 Proxy 的方式进行整合。 如果不需要那么多麻烦的整合就好了，本着能省就省的方式。既然 JAVA WEB 的应用服务器必须要启用，那可否直接利用 JAVA 的应用服……

阅读全文

Vue 单页项目发布到 Nginx 独立目录 Nginx 配置 对于 Nginx 的配置与原来 Nginx 和 Tomcat 搭配配置完全一样，无需任何改动。例如： server { listen 80; # listen somename:8080; charset utf-8; server_name localhost; gzip on; location / { proxy_pass http://localhost:8080/; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header ABCXYZ-REAL-IP $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Nginx-Proxy true; proxy_set_header Connection ""; #limit_req zone=limitdashi burst=5 nodelay; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } } 通过这样一个代理将请求转发给后端的 Tomcat 服务器 目录说明 现有使用 Vue 3.3 生成的 VuePro……

阅读全文

VSCode 如何避免 es6 import {} 自动换行 import { Message } from "element-ui"; // 格式化后立马变成下面这样，丑死了 import { Message } from "element-ui"; 其实只要设置 VsCode 的设置即可。 在 MacBook Pro 下： Code -> 首选项 -> 设置 然后搜索 beautify 并点击在 json 中编辑，在 json 配置文件的末尾加入如下配置即可： "beautify.config": { "brace_style": "collapse,preserve-inline" } 测试过确实可行！ 问题参考链接： es6 import 格式化 GitHub issue 链接：https://git……

阅读全文

我的 .eslintrc.js 配置 module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "@vue/standard"], rules: { "no-console": process.env.NODE_ENV === "production" ? "error" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off", semi: 0, "no-throw-literal": 0, "keyword-spacing": [ "error", { before: true, after: true, }, ], "space-before-function-paren": 0, quotes: [0, "double"], }, parserOptions: { parser: "babel-eslint", }, };……

阅读全文

Vue 开发时如何忽略 ES Lint 校验 使用.eslintignore 文件 在 Vue 工程的根目录下，打开 eslint 的忽略文件.eslintignore（若无则创建一个） 不想校验什么文件，就写进去。 假如不想校验所有的 js 文件，写上*.js 就可以了。……

阅读全文

使用 ElementUI 上传图片前预览 当使用 ElementUI 上传图片时，需要先预览该选中的图像文件 <div class="layui-inline"> <img v-if="poster.length>0" :src="poster" width="40" height="40" /> <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-change="onFileSelected" :auto-upload="false" :multiple="false" :with-credentials="true" :show-file-list="false" accept="image/*" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只……

阅读全文

使用 axios 的 Promise 封装 简单的 axios 封装 ajax.js import axios from "axios"; const headers = { "Content-Type": "application/x-www-form-urlencoded" }; function process(res) { let body = res.data; if (body.code === 0) { return new Promise(function (resolve, reject) { resolve(body.data); }); } else { return new Promise(function (resolve, reject) { reject({ code: body.code, msg: body.msg }); }); } } function get(uri, params) { return axios.get(uri, { params: params, headers: headers }).then((res) => { return process(res); }); } function post(uri, params) { let data = new FormData(); for (let item in params) { data.append(item.toString(), params[item].toString()); } return axios .post(uri, data, { headers: headers, }) .then((res) => { return process(res); }); } function remove(uri, params) { return axios .delete(uri, { params: params, headers: headers, }) .then((res) => { return process(res); }); } const ajax = { get: get,……

阅读全文

axios 使用 post 的正确姿势 当进行 Ajax POST 请求时，后端程序使用 request.getParameter 的方式获取参数，需要将 axios 的缺省配置进行调整才可能正确传递参数 直接上代码： function post(uri, params) { let data = new FormData(); for (let item in params) { data.append(item.toString(), params[item].toString()); } return axios.post(uri, data, { headers: { "Content-Type": "application/x-www-form-urlencoded" }, }); } 即可，没有网络上那么多复杂的转码设置。……

阅读全文