import时,文件引入的路径描述不统一,所以保留一种引入风格即可解决. 第一种,我选择统一用第一种 import GoTop from '@/components/layout/goTop' 第二种 import GoTop from './goTop' 参考文档:https://blog.csdn.net/tionsu/article/details/78591962…

执行npm run dev后出现了警告提示: warning in ./src/components/Public/yearSelectCell.vue There are multiple modules with names that only differ in casing. //有多个模块同名仅大小写不同 This can lead to unexpected behavior when compiling on a filesystem with other case-semanti…

在写vue项目的时候 当我使用 : import dataSource from '../overseaProduct/house/dataSource'; 引入dataSource文件的时候:控制台报如下警告: client?e46d:147 ./src/views/overseaProduct/house/dataSource.js There are multiple modules with names that only differ in casing. This can lead…

今天在开发一个新项目时,当安装完依赖包启动项目后报了一个这个错 There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equal casing. Compare these module identifiers 谷歌翻译一下: 有…

今天写项目时,遇到报错信息如下: 经过多次排除及参考网上文章,最后找到问题所在 排查原因:1 .在引用组件时,路径大小写不对也会造成此报错,看例子:错误写法: 正确写法: 2.在组件使用vuex时,引用vuex大小写错误 错误写法: 正确写法: 其实在做项目时,多注意下细节就可以避免这种错误,今天因为这个小错误查问题查了很久,最后才找出问题所在,做个笔记记录下.…

今天早上遇到一个Angular的编译的时候的错误 具体信息: There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 自己查了一下翻译意思是说"有多个模块使用同一个名字...." 试着用关键字找一下解决方案才发现原来这个错误的提…

There are multiple modules with names that only differ in casing.有多个模块同名仅大小写不同This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.这可能导致在一些文件系统中产生不是预期的行为Use equal casing. 使用唯一的写法 猜测是因为你的文件名和引用不一致,举个例,文件名是App.js…

client?4c0e:153 ./src/components/Paginate.vue There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. Use equal casing. Compare these module ident…

记录个自己遇到的问题: 上星期项目刚拉取下来的时候运行没有任何警告,晚上回去vscode提示更新新的东西,当时没管就立即更新了,第二天重启项目直接一大堆警告冒了出来: There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equa…

There are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic. 有多个模块的名称只有大小写不同. 这可能导致在使用其他case语义的文件系统上编译时出现意外行为. 原因:import时,文件引入的路径描述不统一,所以保留一种引入风格即可解决. a…

多个文件名大小写不同,是因为运行代码是大写E,用vscode运行的是小写e,解决方案:手动npm run dev #There are multiple modules with names that only differ in casing. warning @vue-style-loader/lib/listToStyles.js There are multiple modules with names that only differ in casing. This can lead…

一 .vue安装的坑 报错时的常见问题 1.cnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 –save(关于项目的,比如main.js,表现为npm run dev 成功之后控制台报错)比如escape-string-regexp.strip-ansi.has-ansi.is-finite.emojis-list/2. 2.报如下错,表示端口错误,关掉相关页面,重新启动!!! 3.启动项目的时候会出出现加…

注意:此文是默认你已经具备scoped和css modules的相关基础知识,所以不做用法上的讲解. 在vue中,我们有两种方式可以定义css作用域,一种是scoped,另一种就是css modules. 这两种方式都能形成css作用域,从而避免样式相互覆盖的问题,而这两种方式又有什么区别呢?下面就来比较一下. 1. 编译后的产物不同 scoped <style lang="stylus" scoped> .black { height 100px width: 100px…

当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'stati…

最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队).cube-ui(滴滴). 想做一个移动端微信公众号使用的界面,于是选择用mintUI. mintUI官网:http://mint-ui.github.io/docs/#/en2/quickstart 1.项目中引入mint-ui 1.下载以及配置 (1)下载: E:\HBuilderSpace\…

当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'stati…

scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成…

1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'px'}" ref="refName"> <ul> <li>编辑部门</li> <li @click="append()">添加子部门</li> </ul> </div>…

Vue风格指南中介绍了单文件组件中的Style是必须要有作用域的,否则组件之间可能相互影响,造成难以调试. 在Vue Loader Scope CSS和Vue Loader CSS Modules两节中介绍了Vue实现CSS模块化的两种方式. 下面对scoped和CSS Modules两种方式分别进行介绍,然而这两种方式均非最佳实践. 一.scoped 使用scoped会为组件中HTML树的每个元素都添加data-xxxx属性,其中xxxx是哈希值.转换之后的CSS变成 mySelector[d…

1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个文件夹store,包含index.js就是store.js ,然后再创建文件夹modules文件夹,此文件夹中放的就是模块, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) import menu from './modules…

vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this.value;会导致循环调用set方法,所以要借助中间对象的形式把值赋给中间对象,获取obj.name的时候我们获取中间对象的最新值即可 let obj = {name:'zhufeng',age:9};//数据 let temp = {name:"lily"};//借助中间对象 let…

当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'stati…

懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. (2)异步加载的三种表示方法: 1. resolve => require([URL], resolve),支持性好 2. () => system.import(URL) , webpack2官网上已经声明将逐渐废除,不推荐使用 3. () => import(URL), webpack2官网推荐使用,属于es7范畴,需要配合babel的syntax-dynamic-import插件使用. (3)vue中懒加载…

现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了<el-upload>这样的组件,同事也暴露了很多的属性和方法供我们使用. 但是很多人却碰到了这样的问题:项目需求是批量上传,但是为什么自己上传的时候,也成功了,但是却是一张一张上传的,这种上传方式有时候并不违背我们的需求,但有时又不是我们需要的.那么,怎么解决批量上传并携带参数呢,我这里写了一个…

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间是父子关系: B与C之间是兄弟关系:A与D.A与E之间是隔代关系: D与E是堂兄关系(非直系亲属) 针对以上关系我们归类为:…

最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件夹中加入如下几个文件 首先看一下Tinymce/dynamicLoadScript.js的内容: let callbacks = [] function loadedTinymce() { // to fixed https://github.com/PanJiaChen/vue-element-a…

文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="resetAdd"> 附件名称:<el-input v-model=&…

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的组件间通信方式,希望可以帮助小伙伴们更好理解组件间的通信. 一.props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信. 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件…

在vue中使用天气插件 插件网址:  中国天气 选择自己需要的插件.生成代码复制即可 在 vue 中的使用: template 中 <div id="weather-v2-plugin-simple"></div> mounted 中 window.WIDGET = {CONFIG:{"modules":"20","background":5,"tmpColor":"fff…

Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可. 父组件代码: <template> <div id="container"> <input type="text" v-model="text" @change="dataChange&q…