分类 vue 下的文章
vue create hello-world创建项目的时候选择了Linter / Formatter，所以写代码的时候会有代码规范检查，怎么才能关闭这个校验呢1.项目创建好后会生成 .eslintrc.js文件module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
// '@vue/standard',//这行注释就可以
'@vue/typescript'
],
rules: {
'no-c- 阅读剩余部分 -
两种方案清除定时器，开发者经常使用方案1，建议使用方案2方案1首先我在data函数里面进行定义定时器名称：data() {
return {
timer: null // 定时器名称
}
},
然后这样使用定时器：this.timer = (() => {
// 某些操作
}, 1000)
最后在beforeDestroy()生命周期内清除定时器：beforeDestroy() {
clearInte- 阅读剩余部分 -
在二级路由配置redirect:'/reconciliation/list',也就是增加个redirect的指向就可以了示例代码：const admin = [
{
path: '/',
name: 'index',
component: (resolve) => require(['@/page/index'], resolve),
children: [
{
path: '/',
redirect: 'fixManage'
},
{
path: - 阅读剩余部分 -
npm run dev 错误提示：{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
解决方法：找到你的工程文件夹里的 YourProName\node_modules\vue-loader\lib\template-compiler\index.js//将以下代码
if (!isProduction) {
code = prettier.format(code, { semi: false, parser: 'babylon' - 阅读剩余部分 -
一. 标签实现新窗口打开：官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用<a>标签，但事实上vue2版本的 是支持 target="_blank" 属性的(tag="a")，示例如下：<router-link target="_blank" :to="{path:'/user/document',query:{id:'1'}}">新页面打开home页</router-link- 阅读剩余部分 -
如何完美滴使浏览器访问一个 HTML 页面时禁用缓存？在测试某个 SPA 项目时，发现更改后 Chrome 浏览器页面刷新还是使用之前的版本。经调查发现 Chrome 默认缓存值为 300 秒。经测试跨浏览器禁止缓存的 headers 如下：Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
Cache-Control is for HTTP 1.1Pragma is for HTTP 1.0Expires is for proxies因为是 HTML 页面，可以于 H- 阅读剩余部分 -
在优化基于vue-cli开发的vue项目中，把vue-router改成外部引入的时候，配置参数： externals: {
'vue': 'Vue',
'vue-router':'VueRouter',
'axios':'axios',
"ElementUI": "element-ui",
'babel-polyfill': 'window'
},
console中提示Uncaught TypeError: Cannot redefine property: $router
分析问题，研究- 阅读剩余部分 -
mpvue 安装比较简单，直接就把官方的步骤贴过来了# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
1.在mpvue + vuex项目中我们不能通过vue那种方式来将store对象实例注入到每个子组件中从而无法使用this.$store.state.xxx、t- 阅读剩余部分 -
在vue项目中，如果服务上没有这张图片，那么前端展示时就会出现渲染出错图：解决方案：1.在img图片标签中绑定onerror事件<div class="img-div" v-loading="partImageInfoState" element-loading-text="数据加载中...">
<img v-if="currentImagePart.imgUrl" :src="'/static/images/parts/'+currentImagePart.im- 阅读剩余部分 -
报错代码：VM3950:37 TypeError: _self.$scopedSlots.default is not a function原因：使用v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现数据冲突导致table渲染出错解决方法：需要给同一个vue页面中的table节点加上个key值就完美解决;
vue el-date-picker ie10赋值不生效，直接赋值在IE下不合法，要使用this.$set()方法来解决<el-date-picker placeholder="选择日期" v-model="form.expireTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%;" size="small" ></el-date-picker>- 阅读剩余部分 -
方法一：在router/indexs.js文件下配置路由import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',// 使用 HTML5 的 History 路由模式，通过‘/’设置路径
routes: [
{
path: '/',
name: 'index',
component: (resolve) => require(['@/page/i- 阅读剩余部分 -
原文：5 Vuex Plugins For Your Next VueJS Project 作者：Anthony Gore使用 Vuex 来管理 Vue 的状态，有很多好的理由。其中之一就是，通过 Vuex 插件可以非常容易的扩展一些很酷的功能。Vuex 社区中的开发人员已经创建了大量的免费插件供你使用，有许多你能想象的功能，还有一些你可能没有想到的功能。在本文中，将向你展示5个特性，你可以通过 Vuex 插件轻松地添加到下一个项目中。状态持久化同步标签页、窗口语言本地化管理多个加载状态缓存操作状态持久化vuex-persistedstate 使用浏览器的本地存储（ loc- 阅读剩余部分 -
Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：安装：npm install --save vuex-persist
or
yarn add vuex-persist
引入：import VuexPersistence f- 阅读剩余部分 -
代码：<el-select placeholder="选择套餐" size='small' value-key="id" v-model="form.chooseMeal" @change="selectedMeal" clearable style="width: 100%">
<el-option v-for="item in packageList" :key="item.id" :label=&q- 阅读剩余部分 -
今天用elementui写了一个el-dialog组件里面包着一个el-transfer穿梭框组件，代码<!--推荐服务-->
<el-dialog title="提示" :visible.sync="dialogVisible" width="704px" :before-close="handleClose">
<el-transfer ref="recommendation" v-model="addI- 阅读剩余部分 -
好久不写文章了，做个element-ui的总结，会持续更新element-ui的table列超出部分省略加悬浮提示<el-table-column :show-overflow-tooltip="true">
</el-table-column>
表单取消重置this.$refs.companyInfoForm.resetFields()
input绑定回车事件*一般监听在输入的input监听keyup事件，加enter修饰符。如果input是组件，加上.native修饰符。举个栗子非组件<input :placeholde- 阅读剩余部分 -
1、全局变量专用模块就是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。全局变量专用模块 Global.vue<script>
const QueryApplyInfo = {};
const AreaInfoList = {};
const OrderDictList = {};
const decodeOrderDict = {}
const ProfessionInfoList = {};
const decodeProfessionInfo = {};
export default- 阅读剩余部分 -
组件核心代码代码，命名liang.js/*
* @Liang liweiliang QQ:406320591(406320591@QQ.com).
* @date 2018-08-08,
* @version 1.0.0
* @liweiliang Inc. All Rights Reserved
*/
let Liang = {};
Liang.install = function(Vue,options){
Vue.prototype.$Validate = (_this) => {
var _Vaild = _this.- 阅读剩余部分 -
使用vue单页开发项目时遇到一个很恶心的问题：在列表页点击一条数据进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。首先在App.vue页面上有下面一段代码，我们都知道这是页面渲染的地方<router-view></router-view>
把这段代码改成如下：<keep-alive>
<router-view v-if="$route.meta.keepAlive- 阅读剩余部分 -
下载安装插件依赖npm install vue-wechat-title --save
在main.js中引入插件import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
在路由文件 index.js中给每个路由添加titleroutes: [{
path: '/',
name: 'index',
component: index,
meta:{
title:'首页' // 标题设置在这里
}
},{
path:'/deta- 阅读剩余部分 -
第一步 node环境安装1.1 如果本机没有安装node运行环境，请下载node 安装包进行安装1.2 如果本机已经安装node的运行换，请更新至最新的node 版本下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/第二步 node环境检测为了快乐的使用命令行，我们推荐使用 gitbas1.1 下载git 并安装下载地址 https://git-for-windows.github.io/安装成功后 右键菜单我们可以看到 Gti Bash Here 。说明我们已经安装成功git1.2 检测node 是否安装成功右键空白，选择 G- 阅读剩余部分 -
- « 前一页
- 1
- 2