u010565037的博客

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。那么，我们一起来看看vue项目怎么使用它吧。（如果你对vuex有一定了解，不是刚接触的小白，请忽略第一步，直接查看第二步）一、适合初学者使用，保存数据以及获取数据1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，

有时候在页面里做了某些操作以后，需要页面刷新一下来重新获取数据。试了几种方法，以下总结：1、this.$router.go(0)这种方法页面会一瞬间的白屏，体验不是很好，虽然只是一行代码的事2、location.reload()这种也是一样，画面一闪，效果总不是很好3、跳转空白页再跳回原页面在需要页面刷新的地方写上：this.$router.push('/emptyPage')，跳转到一个空白页。在emptyPage.vue里beforeRouteEnter钩子里控制页面跳转，从而达到刷新的效.

Ant Design Pro Vue使用心得目录结构├── public│ └── logo.png # LOGO| └── index.html # Vue 入口模板├── src│ ├── api # Api ajax 等│ ├── assets # 本地静态资源│ ├── config # 项目基础配置，包含路由，全局设置.

51CTO技术家园-2020全新elementUI项目实战教程 vue整合Echarts后台权限视频教程https://home.51cto.com/index/?reback=https%3A%2F%2Fedu.51cto.com%2Fcenter%2Fuser%2Findex%2Flogin-success%3Fsign%3D30c4CAMEAlUGBQIEAlVcC1UOUQRRDgBSAVBcAwFZQENDQwgXHFFWEBgAA1dGX0paW1saAVdWQlFLHlteQENHUhxF

项目启动时抛出了标识符无法识别的错误错误原因ES6 新增了不少标识符，但浏览器大多无法直接识别，需要借助babel对 ES6 代码进行转义 项目启动时抛出如下错误，表示...运算符没能被识别，该运算符属于 ES6 的解构运算符 出现该问题的原因基本上可以定位是项目没有配置babel 即时package.json文件中已经引入babel，但仍然需要在项目根目录创建一个.balbelrc文件进行配置 解决方式在项目根目录创建.babelrc文件即可实现对ba...

实现类似的如图功能：代码如下：<template> <div id="app"> <div v-for="(list, index) in lists" :key="index"> <ul> <li> <span>名字</span> <input type="text" v-model="list.name" style="wid

1.拉取Chrome vue插件github地址：https://github.com/vuejs/vue-devtools/tree/master注意：一定是拉取master分支的代码2.进入代码目录，执行npm install，完成后再执行npm run build（一定要执行这一步，否则加载扩展程序时会报错）3.找到manifest.json文件（shells->chrome->manifest.json）,做如下更改：将"persistent": false 改为"per

1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。import Vue from 'vue'import App from './App' // 引入App这个组件import router from './router' /* 引入路由配置 */import axios from 'axios'import '../static/css/global.css' /*引入公共样式*/2、在index.html中引入<!DOCTY...

相关配置在安装完相关依赖后，需要在vue.config.js中进行相关配置，重点配置路径。 路径后面的;是必须的module.exports = { css: { loaderOptions: { sass: { prependData: `@import "./src/assets/styles/base";`, }, }, },}在需要使用全局样式的...

安装npm install ant-design-vue --save然后在main.js里面引入import ant from 'ant-design-vue'import 'ant-design-vue/dist/antd.less'Vue.use(ant)如下所示到此你就可以使用它的组件了。【注意：如果你不需要自定义主题颜色，把import的less文件改为css文件】配置一下自定义主题在项目根目录建立vue.config.js 文件，这里你可以修改主题...

集成Element-uielement-ui国内官网地址：https://element.eleme.cn/#/zh-CN我们集成Element-ui只需要通过以下命令即可：npm install element-ui --save如下图所示则表示将element-ui成功加入了项目中：vue集成element-ui需要注意的是安装好后项目中还是无法直接使用的，因为这样安装后还需要引入elmenet-ui的组件和样式，引入方式是在项目的main.js文件中加入以下的引用代码即可

问题：vue项目完成打包上线的时候遇到静态资源找不到的问题，网上很多解决办法都是基于vue-cli 2.x 来解决的，但从vue-cli 3.0以后，便舍弃了配置文件夹（便没有了config这个文件夹），所有配置文件都写在了一个文件vue.config.js中 ，并且需要自己手动创建，创建位置：与src同级。解决方法：1.vue-cli 2.x版本在config文件夹下的index.js中修改 assetsPublicPath: './'2.vue-cli...

父组件传递数据时，子组件用props接受 父组件里面有事件 可以改变 自身data里面的数据，然后通过props传递从而改变子组件的显示数据。 但同时 子组件里面也可能有事件可以更新props传递过来的数据，不需要通过子组件的this.$emit(‘自定义事件名称’) 自定义事件来让父组件绑定@ 事件 从而改变 父组件里面的data数据。这样会比较麻烦，因为这样的话 子组件派发的事件，要让父组件执行， .sync 修饰符就解决了 ，父组件不需要定义事件就能实现类似于 v-modle 这样的效果， 子组件

事情是发生在最近使用vue项目的时候使用sass作为css辅助开始的，因为之前使用习惯stylus都是一帆风顺的，而在这次项目里我在main.js 上引入全局sass文件突然报了一下错误，如下：vue引入全局sass引发的报错血案vue项目引入全局sass的两种方式：针对自己搭建vue+webpack+sass的项目这里有个重要的注意事项要讲：看网上很多讲解“vue 引入全局sass”的文章，许多文章都存在着误导，现在我先将一下网上存在误导的大致流程以及我的解决方案。相信使用vu.

① 使用vue-cli模板创建新项目：vue init webpack myvue② 安装sass 依赖包 ，在cmd界面输入：npm install sass-loader --save-devnpm install node-sass --sava-dev③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置{test: /\.scss$/,loaders: ['style', 'css', 'sass']}④ 使用scss时..

npm install vue-cli -gvue init webpack myProject1. npm install vue-cli -g2. 全局安装 vue-cli3. myProject 是你项目的名称1. Project name项目名称2. Project description项目描述3. Author作者4...

解决方法：cnpm install

解决方案2:你看下main.js中引入的顺序，是否和下面一样： import 'element-ui/lib/theme-chalk/index.css' import App from './App.vue' 如果相反，那么element-ui的样式会覆盖自定义的样式。

这里通过return的方式来返回一个空对象，这是因为如果直接用default:{}的话，其他组件复用时都会是这个对象的引用，其他组件如果修改这个数据的话，也会改变影响这个组件，所以要通过函数返回这个对象（js对象引用，深拷贝）import echarts from "echarts";export default { props:{ chartData:{ type:Object, default(){ .

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength举个例子:var vm = new Vue({ data: { items: ['a', 'b', 'c'] }})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应

:class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{open:appitem.open==true}]":class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]":class="{shortcutMen...

vue 报错：Module build failed: Error: Cannot find module ‘node-sass’解决方法：最后输入cnpm install node-sass --savenpm run dev终于能跑起来了！！！

//车辆添加按钮 handleAddCar(){ console.log(this.infoForm.carList); if(this.infoForm.carList.length>1){ Toast.success({ message:"最多添加两辆车辆信息" ,duration: 1000}); return;...

vue-router ≥3.0版本回调形式以及改成promise api的形式了，返回的是一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现如图所示的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）方案一：安装vue-router3.0以下版本：先卸载3.0以上版本然后再安装旧版本 npm install @vue-router2.8.0 -...

安装node-sass时出现一下错误：gypERR!configure errorgypERR!stackError: EACCES: permission denied, mkdir '/Users/zhang/Documents/data_insight_yinzhou/data_insight_yinzhou/node_modules/node-sass/build'...

content组件代码：<template> <div> <input ref='test' id="test"> <button @click='diyfun'>Click</button> </div></template><script>import {...

记录vue前端运行报错的一次记录 因为当前项目在换个电脑后重新安装环境，碰到的前端莫名其妙的问题，webstorm运行npm install命令就报错，使用删除缓存和物理删除node_modules,然后重新install还是报错。 后来找到一个解决办法，删除项目的package-lock.json,完美解决。...

windows系统 Git Bash Use arrow keys无法选择win7上的git bash有时候会这样，用cmd.exe就可以了或者使用数字代替windows 中的使用上下键不生效的情况下，可以用数字代替进行选择你这里可以输入数字 2 ，然后回车，表示你要选择第 2 个。...

前言Vue是一个很好用的前端，但是在浏览器上面不能直接打断点调试程序。下面介绍通过安装调试插件对程序进行调试按F12之后，出现一个Vue选项，效果如下：安装过程step1 下载插件并解压链接：点我进入提取码：2tcjstep2进入到Chrome扩展程序页面点击开发者模式chrome://extensions/step3点击加载已解压的扩展程序...

在一个Vue的项目中，反复的新建.vue文件是一个必不可少的工序。本着科技让人偷懒的原则，我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板。整个过程是轻松加愉快的，只需几步即可。具体步骤如下使用Ctrl + Shift + P召唤出控制台，然后输入snippets(跟着自动提示走就行了）并选择。 接下来输入vue并选择，VSCode会自动生成一个vue...

1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件：<template> <div class="train-city"> ...