Beamon__的博客

vue-cli创建的vue3+webpack5项目；配置proxy代理后，控制台报错，不影响使用，但是不美观，并且不利于在控制台调试代码；代理问题，新配置的接口代理，影响到了项目内置的本地服务代理配置，参考。

最近新建一个vue项目，配置了element-ui，较之前使用时发生了些许变化，对新的配置方式进行记录创建项目vue项目，使用vue-cli，就不做赘述了，可参考官网创建项目 在main.js引入组件库及相关样式完成引入，即可在项目中使用。因为element-ui整个引入，项目依赖变得冗余，打包发现，多了好几M，不合理，这很不合理，对组件进行按需引入；安装带三方插件babel-plugin-component在src目录下新建文件夹element，element文件夹添加文件com

创建vue项目报错，提示如下Command vue init requires a global addon to be installed.Please run yarn global add @vue/cli-init and try again.按照提示安装@vue/cli-init，并再次执行创建项目命令，依然提示相同问题

1. 安装cordova参考：https://blog.youkuaiyun.com/u012211003/article/details/1072147102. 安装java jdk参考：https://blog.youkuaiyun.com/u012211003/article/details/1072147103. 安装Android Studio参考：https://blog.youkuaiyun.com/qq_42391248/article/details/1017819944. 环境Android环境变量配置参考：

Vue项目启动速度慢，观察控制台发现提示：No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.解决方案：1.升级vue-loader版本2.降低prettier的版本，降低为prettier1.12.1cnpm i

ps：项目已配置less，关于less配置不做多说1.安装相关所需依赖包npm install style-resources-loader vue-cli-plugin-style-resources-loader -D2.添加全局less文件3.设置vue.config.js// 在暴露的配置对象添加如下配置pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patte

与vue-cli2.0使用了uglifyjs-webpack-plugin插件进行优化配置不同，vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化。具体配置可以参考node_modules/@vue/cli-service/lib/config/prod.js在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置，vue.config.js配置如下：

最近项目需要实现将局部页面输出pdf文件，做了以下案例html：<template> <div id="test-page"> <!-- 额外元素 --> <div class="myInput"> <el-input v-model="text"></el-...

最近项目遇到了一个关于控制用户粘贴的功能，简单研究了下，提出以下方案：使用Jquery获取的DOM对象绑定paste方法具体如下：1.安装jquerynpm i jquery -S修改项目中build/webpack.base.config.js// 顶部引入webpackconst webpack = require('webpack');...modul...

修改config/index.js，设置build选项，具体如下：build: { // 设置打包后index.html的位置 index: path.resolve(__dirname, '目标路径(相对于build/build.js)/dist/index.html'), // 设置打包后dist文件夹位置 assetsRoot: path.resol...

最近项目需要封装一些组件，结合自己的开发风格，想让组件尽可能的高复用、低耦合、操作简单，就对自定义组件使用了v-model，在组件内部处理模块逻辑，与调用环境的状态数据实现双向绑定以下就是我在自定义组件中使用v-model的一些关键知识案例代码<template> <div class="my-input-comp"> <i...

问题描述：在vue中通过v-html回显富文本内容，遇到了设置富文本样式不生效问题；原因：<style>标签添加了scoped属性；解决方案：1. 去掉<style>标签的scoped属性；2.使用 /deep/深度作用选择器 (案例如下)；案例代码：html：<div class="fwb" v-html="htmlVal">&...

步骤1：设置config/index.js在build配置中，将 assetsPublicPath 设置为 ./ ,如下图以上解决的js与css文件找不到问题步骤2：设置build/utils.jsExtractTextPlugin插件添加publicPath配置，如下图共需配置两处以上解决的静态图片与icon找不到问题...

安装sass相关loader与依赖后可直接使用npm i node-sass sass-loader -D无需任何其他配置，直接使用

1.在创建路由的配置文件中改变引入组件的方式，将原始引入方式改为异步引入// 原始引入方式import Home from "@pages/home";// 异步引入方式const Home = () => import('@/pages/home');2.修改webpack的output配置修改 build/webpack.base.conf.js// 添加c...

在vue中不同组件通信方式如下1.父子组件，通过prop2.非父子组件，通过vuex或根vue转载器通常是以上两种情况，然而还有一种比较特殊的情况，即孙子组件或更深层次的组件通信1.下面是a.vue<template> <div class="test"> <son prop="data"></son&...

最近帮朋友看一个vue项目，需要在整个表单的一个输入控件上添加校验，因为表单是动态创建的，就没有考虑整个表单绑定rules，而是在&lt;el-form-item&gt;上绑定了rules，具体代码如下：template/html部分：&lt;el-form-item label="自定义校验" prop="text" :rules="[ { ...

最近项目不忙，看了看vue，看到了slot，练习了下，与大家分享下，希望有用～ 个人理解：用法等同于“占位符”，占据一定的“位置”，进行不同的回显，可以设置默认值，效果类似于v-if，但是功能更丰富 slot用法一（基础用法）子组件代码设置如下：&lt;template&gt; &lt;div&gt; &lt;slot&gt;默认&lt;/slot...

公司新项目使用了vue-cli与element-ui做了项目基础，考虑项目需求要做多语言实现，一番百度加案例，使用vue-i18n第三方实现，具体步骤如下：前期项目准备工作略过，直接开始国际化配置...1.安装vue-i18n：npm i vue-i18n -S2.项目配置vue-i18n：在src目录下创建i18n文件夹，在i18n文件夹内添加基础配置及各语言文本配置文件；...

在使用vue-cli脚手架创建vue项目时，我们一路回车，不经意间就会打开eslint，如果项目不需要eslint，可通过如下操作关闭，更改配置文件build/webpack.base.conf.js的createLintingRule配置：具体操作如下所示，注释掉选中的代码...

核心：sass-resources-loader组件实现过程如下：1.安装npm i sass-resources-loader -S 2.修改配置文件build/utils.js2.1 在cssLoaders中添加如下代码：// 全局less变量配置function lessResourceLoader() { var loaders = [ c...

使用vue-cli创建的vue项目直接打包会出现静态资源找不到的问题，解决方案如下：修改config/index.js的build配置，将assetsPublicPath的值修改为 ./再次打包如下，静态资源路径已经改为了./ ...

使用vue-cli搭建vue项目打包后在ie上打开静态资源出现空白，但是在chrome上一切正常，经检测发现打包后的js存在兼容问题，ie等低版本浏览器对es6存在不支持情况，解决方法如下：1. 安装babel-polyfillnpm i babel-polyfill -S2. 在main.js引入abel-polyfill完成！...

描述：自己封装了修改（弹窗）组件，每次的打开修改弹窗后请求修改项数据进行回填，关闭弹窗时使用Form组件的resetFields方法重置表单，第一次使用该组件正常，第二次使用该组件在关闭时，会闪现第一次打开时的修改项的数据；原因：form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是更新,那么重置之后以第一次更新的数据作为标准；解决方法：每次关闭弹窗时销毁组件，每次...

开始时间设置：&lt;el-time-picker v-model="form.preClockOffTime" class="date-box" format='HH:mm' 设置下拉框时间格式 value-format="HH:mm" 设置返回值时间格式 :picker-options="{ 校验开始时间不的大于结束时...

进一步使用vue知识构建项目中了解了vue的自定义指令这一知识，记录过程分享；参考网址：https://cn.vuejs.org/v2/guide/custom-directive.html我个人对vue指令的理解为： “重复性比较高DOM操作封装”1. 注册指令全局注册：通过vue实例的directive方法组册指令，directive方法接受两个参数，分别为指令名称，指令操作集...

最近项目中数次遇到了 “页面没有按照预想渲染” 的现象，特推出以下两种解决思路：1. $nextTic()方法具体操作：在$nextTic()方法回调函数内进行data更新this.$nextTick(() =&gt; { // ...});2. $forceUpdate()方法具体操作：执行方法，即可使组件强制重新渲染// ...this.$forceUp...

element-ui是vue项目中常用的pc端ui组件库，但是其样式上可能与我们的项目需求有较大差异，通常使用自己的样式覆盖ui组件库样式以达到目的方法1: 创建自定义样式文件 在main.js或app.vue中引入 ps：只适合做整体样式的设置，无法细分到组件的具体使用场景，如果细分至组件使用场景，代码过于集中，不利于维护方法2: 在代码内...

1.父组件传值子组件原理：父组件给子组件添加属性，子组件通过props获取属性值，接收到父组件传递的参数；案例如下：父组件代码如下：&lt;template&gt; &lt;div&gt; &lt;!-- 父组件添加入参生成模块 --&gt; 父组件传递：&lt;input type="text" v-model="value"&gt; ...