在使用vue-cli3创建项目后会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置，那么问题来了,我们如何去开发我们的项目呢,比如设置代理,打包配置等问题呢?vue.config.js 是一个可选的配置文件，当你需要覆盖原有的配置时，可根据需要在项目的根目录下手动创建vue.config.js文件。如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。一、在根目录中创建 vue.con

注：使用时注释去掉{ // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进，默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号) "singleQuote": false, // 行尾逗号,默认none,可选 none|es5|all // es5 包括es5中的数...

用两个button（添加，编辑）按钮展示同一个模态框，并不是什么大问题，问题在于解决这两个模态框得有自己的确定和取消方法父页面完全接管子页面（利于子页面复用）父页面代码：<template> <div>　　<-- 定义两个按钮，一个添加按钮， 一个编辑按钮 --> <a-button type="primary" @click="showModal">添加</a-button> <a-button

最近，项目中碰到需求，要求任务类型可以从下拉框（后台返回的数据）中选择，也可以手动输入添加新项，项目用的是antd-vue，所以最接近的组件就是a-select组件了，废话不多说，改造方法如下：HTML： 1 15 16 {{ item.work_type }}17 18 data定义：1 data () {2 return {3 val

在config下的index.js 将productionSourceMap改为falseproductionSourceMap: false,

再引用antd表格的时候经常用到分页，但是设置如上图多少条每页的时候默认是英文的状态，前几天因为用到所以自己摸索了一下如何变成如上图的中文字样。很多文章提到这是antd的国际化设置，没错在引入antd的时候会带有中文语言包。可作如下操作：import React from 'react// 在需要用到的 组件文件中引入中文语言包import zhCN from 'antd/es/locale/zh_CN';// 引入国际化配置import { ConfigProvider,Table .

vue中下载文件导出保存到本地先分析如何下载：先有一个链接地址，然后使用 location.href或window.open()下载到本地看看返回数据res.config.url 中是下载链接地址，res.data 中是返回的二进制数据如何下载...<el-button icon="el-icon-download" @click="download(id)"></el-button>...download(id) { // 导出 this.$A..

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\misal\AppData\Roaming\npm-cache_logs\2020-08-06T05_46_39_769Z-debug.log说明：全局脚手架和本地脚手架版本不一样。解决方法：执行 npm install npm@latest -g升级到最新版本（若升级到最新版本还是报错，则还需要再全局更新一下npm，更新后检查npm版本号不会变，内部应该有更

npm安装：npm install --save js-md51.在需要使用的项目文件中引入：import md5 from 'js-md5';使用：md5('holle') // bcecb35d0a12baad472fbe0392bcc0432.或者在main.js文件中将md5转换成vue原型：import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文件中使用：this.$md5('ho...

antdv form组件的layout属性1、下图是我想要实现的效果2、按如下代码，可是输入框没有和label在同一行，看起来很奇怪 <a-form :form="applyformInline" labelAlign="left"> <a-form-item label="发票类型"> <a-radio-group name="radioGroup" :default-value="1" v-model="apply...

在Vue-cli中使用lang="less"时报错：Module build failed: TypeError: this.getOptions is not a function at Object.loader (D:\WORK\VueProject\XiaoWei\node_modules\less-loader\dist\index.js:52:26)出现这个问题的原因是less-loader版本过高，降级到5.0.0即可npm install less-loader@5.0.0 .

一般项目使用favicon.ico都是在index.html头部head中加入代码<linkrel="shortcut icon"type="image/x-icon"href="favicon.ico"/>vue项目中使用和上面的方法不同，需要配置webpack才能使avicon.ico生效，记录一下，以备后用。webpack.dev.conf.js文件中修改 let path = require('path') // 增加 new HtmlWebpa...

. 准备工作1.1 安装node.js安装过程很简单，在官网下载安装包，点击安装，一直下一步直到安装完成即可，新版本的node.js会自动添加环境变量，不需要再手动添加环境变量，如有疑问，可自行前往环境变量查看。node.js官网：https://nodejs.org/zh-cn/出现下图所示表示node安装完成。1.2 检查安装的node.js是否成功及其版本号进入cmd（Windows+R进入运行界面，输入cmd回车即可）窗口，在cmd窗口中输入命令：node -v

问题描述本地 vue-cli 启动了一个项目只能通过 localhost:8080 访问到，同一局域网下其他的手机和电脑 (包括本机) 并不能通过 ip 地址访问调试原因这个问题，其实是因为新版 webpack 导致的，因为我们使用 vue-cli 来构建项目的时候，一般都会选择使用的模版是 webpack 。这次 webpack 升级后，导致 /config/index.js 里面的配置项多了几项。其中一项就是 dev 中多了：host: 'locahost', // can b

vue调试工具vue-devtools安装及使用（亲测有效，望采纳）本文主要介绍 vue的调试工具vue-devtools 的安装和使用工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧安装:1.到github下载：（下载一定要记得是master环境的代码，默认克隆后进入的是dev环境，执行npm run build会报错，执行git checkout master切换到master分支）git clone https://github.co..

一、vue项目的前期配置新建vue项目，下载axios，并在main.js中导入axiosnpm i axios -S//main.jsimport axios from "axios";二、配置config文件中的代理地址在项目config目录下的修改 index.js文件，这里是主要书写配置多个后台接口。关于代理可能出现的问题，可以查看我的另一篇文档VueCil代理本地proxytable报错的解析；vue cil2旧版本的代理配置——config/index.js.

工作中需要制作一个看板，选型选用antV G2进行开发。由于项目前端是使用Vue，于是研究了antVG2在Vue中的使用。1.安装antv/g2在WebStrom下面Terminal中输入npm install @antv/g2 --save安装完成后为如下状态2.创建一个Vue文件，引入antV/g2import G2 from '@antv/g2';3.创建一个函数，函数内部创建一个Chart对象，并在挂载时调用（这里我创建了两个函数，创建Chart对象所需的参数

官网使用import G2 from '@antv/g2';引入但是会报一个"export 'default' (imported as 'G2') was not found in '@antv/g2' 得错误找了半天原因，最终解决办法import * as G2 from '@antv/g2'

1. 概述如何vue项目中实现打印功能，GitHub上发现一个插件，既优雅又方便。vuePlugs_printjs2. 使用方法2.1. 注册插件import Print from '@/plugs/print' // 引入附件的js文件Vue.use(Print) // 注册2.2. HTML设置ref，可指定区域打印<template><section ref="print"> 打印内容 <div class=..

vue html页面打印功能vue-print-nbvue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格,在网上找了一个打印组件vue-print-nb本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个https://github.com/shengbid/vue-demo 这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈使...

第一种方法：通过npm 安装插件1，安装npm install vue-print-nb --save2，引入 安装好以后在main.js文件中引入 import Print from 'vue-print-nb' 　　Vue.use(Print); //注册3，现在就可以使用了 <div id="printTest" >　　　　　　<p>明月照于山间</p>　　　　　　<p>清风来...

解决方法是：在main.js中引入中文语言

我们在开发后台管理系统的时候不可避免的会遇到列表分页需求，element 官方尽管已经帮我们封装好了,但是我们每次调用的时候依然要传递不少参数，看上去很复杂，为此我们可以以此封装一个自己的分页组件。在开发之前我们需要清除自己需要的参数，我这里用的是这些。pagination.png接下来我们就开始正式封装我们的pagination组件。<template> <div class="pagination"> <el-pagination..

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：//父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mounted () { console.log(this.$emit('setAge',12345

最近在开发中遇到一个element-ui分页的一个小bug，具体场景如下1、首先点击正常分页来到第二页数据正常展示2、点击搜索，需求为回到第一页按条件搜索，此时也正常展示3、再次点击分页去第二页，此时分页还停留在第一页，current-change事件不触发原因有可能是点击搜索的时候在搜索里面通过代码去改变了current-page让分页回到第一页，但有可能element内部的页码数据未改变，因此当在此点击第二页的时候相当于页码未发生改变，current-change..

Vue中的nextTick涉及到Vue中DOM的异步更新，感觉很有意思，特意了解了一下。其中关于nextTick的源码涉及到不少知识，很多不太理解，暂且根据自己的一些感悟介绍下nextTick。一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message g..

ESLint 是一个插件化的 javascript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查，能够很好的执行编码规范，提高项目代码的质量 打开vscode编辑器 点击左侧‘扩展’- 头部搜索框输入‘eslint‘并搜索组件 点击‘install’安装搜索结果列表中的 Eslint 组件（ps：点击‘卸载’按钮可直接卸载） 点击左下角‘设置’按钮 ，进入设置页面 点击头部输入‘eslint’

一、Vue父子 组件之间传值vue使用中，经常会用到组件，好处是：1、如果有一个功能很多地方都会用到，写成一个组件就不用重复写这个功能了；2、页面内容会简洁一些；方便管控；子组件的传值是通过props来传递数据，$emit来触发事件；下面是一个简单的子组件props传值：父组件的部分：首先引入组件，在组件上绑定你要传给组件的值；然后，在组件里通过props来接收你从父页面传过来的值；so，父组件把值传给子组件就完成了；下面是一个子组件在把值传给父组件的例子：父组件部分：子组件部分

Input 输入框通过鼠标或键盘输入字符。Input （el-input）为受控组件，它总会显示 Vue 绑定值。 通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 不支持 v-model 修饰符。 基础用法 禁用状态 通过 disabled 属性指定是否禁用 input 组件 可清空 使用clearable属性即可得到一个可清空的输入框。 ...

<el-form-item label="备注:" class="layout"> <el-input type="textarea" maxlength="250" v-model="form.remk" placeholder="输入备注信息" @input="this.descInput"></el-input> <span style="float:right;color:#999;">{{this.remnant}}...

DevServer是webpack开发服务器。首先，下载webpack-dev-server库$ npm i -D webapck-dev-server配置package.json：配置webpack.config.js当运行npm run dev的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。webpack-dev-server其它配置devServer.open在DevServer第一次构建完成时，自动...

步骤：1、新建一个空文件，文件名为hhhh2、初始化 git init3、自己要与origin master建立连接（下划线为远程仓库链接）git remote add origingit@github.com:XXXX/nothing2.git远程仓库链接在github这里，如下图红色框内所示的链接：输入命令：4、把远程分支拉到本地git fetch origin dev（dev为远程仓库的分支名）下图红色勾选的为可使用的分支名下面拉...

1.查看当前分支。git branch2。创建本地分支git checkout -b branch111image.png3.测试在创建分支下更改文件image.png查看远程分支并提交image.png提交本地分支，发现抱错，但git给提示该如何下一步进行git push //报错image.pnggit push --set-upstream origin branch111...

vue.js 中使用（...）报错的解决方法这篇文章主要介绍了vue.js 中使用（...）运算符报错的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧今天在起别人项目的时候， 发现报错。这个错误是，项目中不识别es6的扩展运算符， 解决方式很简单。 1 2 // 第一步 cnpm install babel-plugin-transform-object-rest-spread // 第二.

在一个Vue的项目中，反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则，我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。整个过程是轻松加愉快的，只需几步即可。具体步骤如下1、选择“文件 -> 首选项 -> 用户代码片段”，此时，会弹出一个搜索框，输入vue 选择vue后，编辑器会自动打开一个名字为vue.json的文件2、复制以下内容到这个文件中：{ // Place your snippets f...

在开发vue项目中，父子组件的传值是避免不掉的。情况一：父组件给子组件传值方法，使用props父页面：parent.vue 1 <template> 2 <div class="sidebar_contianer"> 3 <sidebar-item :routerData="transmitData"></sidebar-item> 4 </div> 5 </template>

1。新建一个vuetext（项目名）文件夹来放置项目，在新建文件夹的上一级文件夹右键打开命令行工具，输入命令行：vue init webpack vuetext1(项目名)注：项目名不能大写，不能使用中文解释一下这个命令，这个命令的意思是初始化一个vue项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vuetext1是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。2。以下是脚手架安装过程（安装步骤解析在图片下面）vue-cli初始化项目选项配

关于旧版本Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。Node 版本要求Vue CLI 需要Node.js8.9 或更高版本 (推荐 8.11.0+)。你可以使用nvm或nvm-windows在同一台电脑中管理多个 Node 版本。可以使用下列任一命令安装...