前言 假设我们原有项目的主题色是蓝色的,这时有个需求,需要把主题色改成橙色的.一般情况下,我们可能会在main.js中引入公共样式文件,但你会发现,在组件中使用公共样式文件中定义的某个参数时,会报一个错误:"变量未定义". 那还有一种写法是,在每个组件中都引入公共样式(注:需要用到公共样式的组件),但这样写,感觉代码会很不perfect . 那有没有什么办法,只要公共样式引入一次,即可在全部组件中使用呢? 方法一:使用sass-resources-loader解决Sass全局变量问题…

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可. 全局变量模块文件: Global.vue文件: <script> const serverSr…

关键词:sass全局变量 js引用sass变量 1 如何在样式中使用 scss 的声明的全局变量 假设我们有一个全局的 scss 变量文件/styles/_vars.sass,如下: $red: red; $blue: blue; 如果想要在组件的样式中使用这些变量,我们需要引入这个文件,像这样: <style lang="scss" scoped> @import '/styles/_var.scss'; .login { background-color: $red;…

这篇随笔是为了记录vue.js引用出错的原因,看到最后原来是vue.js代码放在head中不能正常使用,要最后发现要将其放在body中才行... 原来是js代码放在head和body中的区别问题,占个坑,来埋点个人理解.   现在个人将script块分为js执行代码和js函数两大块. 例如: js执行代码在页面中可能长成这个鬼样: <script> var hello = "helloworld"; </script> 而js函数则是这副嘴脸: <scri…

vue默认采用的是原生的css,如果想要使用css预编译工具,比如sass,需要下载对应的scss的loader, 具体是 npm install --save-dev sass-loader npm install --save-dev node-sass 之后在vue脚手架的webpack.base.conf.js文件下,加入对应的代码 { test: /\.scss$/, loaders: ["style", "css", "sass"]…

Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的组件, this指向发生改变,所以通过以下办法解决. var _this = {} export default { data(){ return { msg: '11' } }, beforeCreate(){ _this = this; }, mounted(){ VueEvent.$on('t…

Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal…

1.npm install sass-resources-loader --save-dev: 2.build/utils.js中,修改 function resolveResource(name) { return path.resolve(__dirname, '../src/assets/css/' + name); } function generateSassResourceLoader() { var loaders = [ cssLoader, // 'postcss-loader…

近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案.思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程化解决方案. 多余的话不说,本人按照效果图介绍下自己的拙建,强烈希望各位给予建议和指正. 说明: 标题:一个普通的vue组件,利用requirejs加载完成. 二级菜单:测试vue-route动态注入路由的能力 业务组件:测试和模块rollup编译后vue实现的子系统的接入(按需加载). 源码:gi…

在main.js中添加一个变量到Vue.prototype Vue.prototype.$appName = 'My App' 这样 $appName 就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以 new Vue({ beforeCreate: function () { console.log(this.$appName) } }) 每个组件都是一个vue实例,Vue.prototype加一个变量,只是给每个组件加了一个属性,这个属性的值并不具有全局性,比如以下例子: main…

思路: 通过调用函数 把 组件实例this  传递 到 被应用的 js文件里 实例: 文件结构 在SendThis.vue 文件中引用 了modalConfig.js import modalConfig from './modalConfig' 我们只要在 modalConfig.js文件里定义个函数和一个变量(用来存this)即可 //用来获取 调用此 js的vue 组件 实例 (this) let vm = null; const sendThis = ( _this )=> { vm =…

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm install swiper --save-dev 在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里 Slider.vue源码: <template> <div class="swiper-container"> <div c…

官网看不懂,网上搜了下,以备不时之需 这是官网说明文档,看不懂的啊. Vux使用教程: 1,在项目里安装vux cnpm install vux --save 2,在项目里安装vux-loader(这个vux文档中没有明文跟你说要安装的啦) cnpm install vux-loader --save-dev 3,在项目里安装less-loader(这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!) npm i…

框架的热度,出现了不少基于Vue的UI组件库,这次项目用到了 iView 这个组件库.使用方法官网很详细. 官网:https://www.iviewui.com/ 这篇文章主要是记录一下npm 全局安装以及按需引用的用法. 一.全局引用 ①.先安装iview          npm install iview -save       Tips:你可能注意npm install 的时候,有时候会加--save,有时又是--save-dev,那他们该什么情况下区分使用呢.发现一篇比较不错的文章ht…

如果想开发移动端项目,那么适配的时候sass必不可缺,但是 npm  安装sass时候总是报错失败! 研究半天发现可以解决的方法,亲测有效 1.先换成淘宝镜像再安装 npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像)用淘宝镜像快!而且安装的时候减少出错! cnpm install node-sass --save-dev //安装node-sass cnpm install sass-loader --s…

不出错的情况下,正常安装: 1.安装包: npm install node-sass --save-dev npm install sass-loader --save-dev (sass-loader依赖于node-sass) 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } 3.在APP.vue中修改style标签 <style lang=&qu…

前面已使用vue-cli新建了一个vue项目,参考  使用命令行创建一个vue项目的全部命令及结果 首先看下新建项目的页面和代码,有部分修改,可忽视,如下图:     然后我们在页面添加sass的代码: 修改完保存后立即就报错了:      在使用scss之前,我们首先需要安装相关的插件: 这里参考的是:链接( vue 项目 使用sass ) $ npm install node-sass --save-dev > node-sass@4.9.0 install F:\05 poverty al…

1.用npm/cnpm/yarn安装sass的依赖包 npm install --save-dev sass-loader npm install --save-dev node-sass 或者: yarn add sass-loader node-sass 2.在build目类下找到webpack.base.conf.js文件,在module的rules中插入以下代码: module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', opt…

<div id="img"> <img src="img.png" class="img"> </div> $(".img").attr("src",require("@/img.png")); 在vue里在js中引用图片必须加一个require关键字和在图片地址前面加@符号…

问题描述:全局引用jquery打包到线上可能会不好使. 第一步: var path = require('path') var webpack = require('webpack') function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: './src/main.js', externals: { 'BMap': 'BMap', // 'BMap_Symbol_SHAP…

好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是Left组件</h1> <h2>我的count值为--{{ count }}</h2> <button @click="add">+1</button> <button @click="reset">…

好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这时就要用到"ref"了, 1.什么是ref引用, ref用来辅助开发者在不依赖与jQuery的情况下,获取DOM元素或组件的引用 每个vue中的组件实例上,都包含一个$refs对象,里面存储着对应额DOM元素或组件的引用. 默认情况下,组件的$refs指向一个空对象. 好了,现在我又要开始…

1.在mian.js里面进行Vue对象的原型连的挂载Vue.prototype.$ajax = Ajax; 2.使用Mixin: VuVue.mixin({ data(){ return { Host:window.location.href.split('/gonghui')[0] } }, methods:{ parameterDeal(_parameter){ var _sender=""; if(_parameter instanceof Object){ for(var k…

前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成react形式并不现实 不得已必须在react中使用jquery插件. 查阅了很多资料,又是修改插件又是设置全部别名. 效果都不是太好,最后无奈自己想了一种方案. 简单的令人发指,想想自己也挺蠢得的. 废话不多说,上代码. 下载依赖 npm install --save jquery 在插件中引用 jqu…

1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery') //引入jquery 3.main.js中引用jquery import $ from "jquery" 4.测试 打印成功~引用成功…

需要分别安装node-sass 和 sass-loader;可以不需要ruby; webpack当中配置 { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'style-loader!css-loader!sass-loader' } } } 使用的时候要记得在style当中加lang="scss"…

1 安装sass npm install --save-loader npm install --save-dev node-sass 2 安装依赖 cnpm install stylus-loader css-loader style-loader --save-dev…

今天做项目,用echarts展示数据 ,自己测试 先测试 了下.写的代码html: <div ref="myChart" style="height:300px;width:100%"></div> JS methods: { drawLine() { // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(this.$refs.myChart); // 绘制图表 myChart.…

"cssnano": { // preset: "advanced", autoprefixer: false, "postcss-zindex": false } 注:  sass 与 cssnano 中的  : preset: "advanced" 冲突 阿,没有去细找解决的办法,暂时注释掉了.…

<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div> </template> <script> import echarts from 'echarts' export default { name: '', data () { return { cha…