Electron 集成 Vue & Vuetify 开发应用
Electron 集成 Vue & Vuetify 开发应用 由于electron能够用 Nodejs 编写跨平台系统的应用软件，目标系统包括 windows、MacOs、Linux 这三大主流操作系统，因此能够省去大量的跨端开发工作。更因为能够重用 Vue 组件，因此可以编写出与 WEB 端媲美的漂亮界面，而且组件的重用更是大大的提高了开发的效率。 VS code……
包含标签 vue 的文章
Vue开发设置使用淘宝镜像
Vue 开发设置使用淘宝镜像 yarn 设置 对于国内的前端开发来说，经常会依赖大量的 npm 包，使用国内淘宝的镜像下载时会更加快速，强烈推荐使用！ yarn 是 FaceBook 推出的包管理器，相对于 npm 来说做了很多改进，更快速和稳定，我一直在使用它。 1.查询当前配置的镜像 yarn config get registry 设置成淘宝镜像 yarn config set registry http://registry.npm.taobao.org/……
webpack 自定义别名后，VScode 路径提示问题
webpack 自定义别名后，VScode 路径提示问题 问： 用@vue/cli 3 创建的项目，配置了自定义别名。例如"@/xxx"，配置完后 VScode 没有代码提示了。 VScode 是装了插件的，用相对路径有提示，如"./xxx"时是有路径提示。 答： 可以在项目的根目录下创建 tsconfig.json 或者……
使用 Node 运行 ES6 模块
使用 Node 运行 ES6 模块 由于 Node 的模块组织方式和 ES6 的模块组织方式不同，因此 ES6 的模块导入和导出语法在 Node 命令行程序执行下会报错 另外，某些 ES6 关键字的用法亦不兼容，因此需要使用 Babel 进行转换后执行 比如: 有个 ES6 写的 logger.js 直接上代码： const Level = { DEBUG: 1, INFO: 2, ERROR: 3, NONE: 4, }; class Logger { constructor(level) { this.level = level || Level.INFO; } } // 执行默认构造行数并打印 const……
使用parcel的watch整合单页应用和JAVA WEB
使用 parcel 的 watch 整合单页应用和 JAVA WEB 由于通常情况下使用 NODE 进行前端开发时，会启动相应的应用服务器。而使用 JAVA WEB 开发时也有相应的应用服务器要启动。这在本机开发时要通过 Proxy 的方式进行整合。 如果不需要那么多麻烦的整合就好了，本着能省就省的方式。既然 JAVA WEB 的应用服务器必须要启用，那可否直接利用 JAVA 的应用服……
Vue单页项目发布到Nginx独立目录
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如何避免 import{} 自动换行
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 配置
我的 .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校验
Vue 开发时如何忽略 ES Lint 校验 使用.eslintignore 文件 在 Vue 工程的根目录下，打开 eslint 的忽略文件.eslintignore（若无则创建一个） 不想校验什么文件，就写进去。 假如不想校验所有的 js 文件，写上*.js 就可以了。……
使用 ElementUI 上传图片前预览
使用 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">只……