1. 安装以下依赖 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 2. 修改weback.base.conf.js module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', option…

vue安装node-sass编译报错 在搭建vue脚手架 或者是在vue项目中,想使用sass的功能,需先安装如下 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-loader 当然上面三步也可以合并为: npm install vue-style-loade…

首先安装node-sass和sass-loader cnpm install node-sass && sass-loader --save 在webpack.config.js 的modules中添加配置: { test: /\.scss$/, exclude: /node_modules/, loaders: ["style", "css", "sass"] }, { test: /\.js$/, loader: 'babel…

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

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

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

使用 Less 下载依赖:npm install less less-loader 在mian.js 中添加: import less from "less"; Vue.use(less); 使用: <style lang="less"></style> 使用 Less 时运行报错 this.getOptions is not a function 原因:less-loader安装的的版本过高 解决:重新安装较低版本 npm uninstal…

使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 修改style标签 打开目录中的xxx.vue文件.然后修改 style标签如下 <style lang="sass"> 如果出现错误提示:无效的css.因为sass语法不使用大括号和分号.如果你喜欢使用不带大括号的语法,只要去掉css代码的大括…

目录 vue vue cli 3 老版本的脚手架搭建的项目 版本 安装 不用修改任何配置 vue文件中使用 vue 更新时间: 2018-09-21 vue cli 3 选择 Manually select feature 选中 CSS Pre-processors 选择 scss/sass 其它选项按项目需要配置 引用方式与老版本脚手架搭建的项目一致,如下 老版本的脚手架搭建的项目 版本 webpack 3.6.0 vue 2.5.2 sass-loader 6.0.6 node-sass 4…

有如下代码要实现换肤功能 <template> <div class="app-root" :class="themeClass"> <div class="app-container"> <p>{{ msg }}</p> <select v-model="theme"> <option value="red">Red<…

首先确认已安装sass依赖, yarn指令:yarn add sass-loader, style中写法如下: 注意calc(100% - 200px); 之间有两个空格的,…

1.npm安装 npm install sass-loader --save-dev npm install node-sass --save-dev //--save写入到package.json里面 -dev指只安装在开发阶段 简化写法 npm i sass-loader -D npm i node-sass -D 合并 npm i sass-loader node-sass -D 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /…

vue中使用less 安装less依赖,npm install less less-loader --save vue中使用sass npm install --save-dev sass-loader   //sass-loader依赖于node-sass npm install --save-dev node-sass vue中使用stylus npm install stylus stylus-loader --save-dev…

在vue中安装sass先检查系统中有没有安装sass,在命令行中输入 sass -v 表示sass在电脑中已有,否者可以参考我这篇博客安装Sass遇到的坑 一.先安装sass cmd打开命令行,到项目的位置 npm install node-sass --save-dev //安装node-sass npm install sass-loader --save-dev //安装sass-loader npm install style-loader --save-dev //安装style-lo…

Vue 中提示警告 TypeError: handlers[i].call is not a function at callHook (vue.esm.js?a026:2921) at Object.insert (vue.esm.js?a026:4158) at invokeInsertHook (vue.esm.js?a026:5960) at Vue.patch [as __patch__] (vue.esm.js?a026:6179) at Vue._update (vue.esm.j…

1.安装scss: npm install node-sass sass-loader vue-style-loader --save-dev //安装node-sass sass-loader vue-style-loader 2.使用scss: <style lang="scss" scoped> </style> 3.如果报错了,显示为 this.getResolve is not a function,是因为 sass-loader 现在安装的是8.0.…

项目中使用sass报错,之前一直使用同样的安装方式 cnpm install sass-loader node-sass -D,正常使用没问题,没想到这次同样的方式却报错了,网上查的原因是sass-loader版本太高了,修改一下版本号再重新下载一次就行了 参考地址如下:解决npm安装node-sass太慢及编译错误问题…

前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的.…

一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue1</title> <script type="text/javascript" src="../vue.js"></script> </…

Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 1.在vue中$option.data中定义的数据是都是响应式的,在初始化生命周期的时候就已经实现了数据双向绑定,通常在view中只是用一个表达式语句,当绑定时的逻辑比较复杂是可以通过计算属性的方式实现.但是在computed中定义的属性只具有get方法,…

最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端 第一步:安装依赖 np…

基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3C标准. CORS跨域的特点:它需要服务器的‘配合’.就是说,它的实现是:浏览器(所有浏览器和IE10+)+服务器. 一般情况下,我们可以在请求头信息中加入Origin,来告知服务器自己来自哪个源:协议 + 域名 + 端口.如果Origin域名在指定许可范围内,则服务器的响应头会多出三个信息: Access-…

watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watch:{ 'currentCity':{ handler:function (val,oldval) { this.ctFontSize = val.length > 3 ? true: false; } } }, 当currentCity的值发生变化时就会运行上面的代码…

前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向绑定的的用法, 于是决定写一篇文章, 再次总结下“Vue中的父子组件通信”. 前面提示:本文文字略少,代码略多 父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据2. 子组件向父组件中传递数据 一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 主要谈谈2中情景的实现,…

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行 定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =…

Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2. 为什么要使用nextTick? <!DOCTYPE html> <html> <head> <title>演示Vue</title> <script src="https://tugenhua0707.github.io/vue/…

一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/axios%E5%9C%A8vue%E4%B8%AD%E7%9A%84%E7%AE%80%E5%8D%95%E9%85%8D%E7%BD%AE%E4%B8%8E%E4%BD%BF%E7%94%A8/ 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Pro…

理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE…

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri…

你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/1518539601 如果你了解前端,肯定对AJAX不陌生,那么通过AJAX技术能够达到更新网页部分内容来达到加载其他信息的效果.通过AJAX我们可以来对文章进行优化,如果我们的博客在首页载入时就加载全部的文章,势必会影响加载速度,所以我们要来异步加载文章的内容,通过分页或者向下加载的方式来加载更多的文…