当前位置:首页 > vue技术文章 > 在Vue中使用Compass的方法

Vue中使用Compass的方法小结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:171

这篇文章主要知识点是关于Vue、Compass、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF作者:王松
立即下载

在Vue中使用Compass的方法

写作动机

拖了蛮久的,总算下定决心要给自己写一个个人网站,不仅要看起来狂拽酷炫,技术也要OK,所以趁此机会也将自己不熟悉的技术拿来锻炼一下。网站打算用Vue来作为前端框架,Css用Sass来写。但是尚未正式开始就突然想到,既然Sass有Compass这么有力的工具不用岂不是步子迈小了,然而找了一轮发现都是说怎样在Vue项目中使用Sass而没有Compass的解决方案。但是这么放弃一个强大的工具练习不了又不甘心,于是各种继续搜索和尝试后总算是成功在项目中用上了Compass,然后屁颠的就来分享了,如果能帮到有这个需求猿,那也是极好的了。闲话不多说,开始撸代码,最后我会将这个Demo放到GitHub( ̄▽ ̄)~*

用vue-cli建个项目

vue init webpack compass-demo //撸个烧烤架
npm install normalize.css axios vuex --save//撒上一些调味料
npm install node-sass sass-loader mockjs --save-dev//刷上一些酱汁
npm install compass-mixins --save-dev//把佐料在烧烤架上准备好后放上嫩肉

修改配置

修改build/util.js

...
exports.cssLoaders = function (options) {
 ...
 return {
  ...
  // 将sass和scss修改为如下
  sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
  ...
 }
}
...

就这么简单

*.sass文件中

在Vue中使用Compass的方法

*.vue文件中

在Vue中使用Compass的方法

愉快的撸吧~

附上Demo GitHub的地址vue-compass

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

详细介绍jquery使用slideDown实现模块缓慢拉出效果的方法技巧

mysql遇到load data导入文件数据出现1290错误如何解决

Java 信息摘要加密MD2、MD4、MD5实例实现方法

vue的keep-alive实例用法

JS中批量给元素绑定事件过程中的相关问题使用闭包解决详解

展开 +

收起 -

vue 相关电子书
学习笔记
网友NO.824358

vue短信验证性能优化如何写入localstorage中

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法,所以我这里就写个vue的方法出来吧 组件里面的html代码: div class="mtui-cell__ft" @click="getCode" button class="mtui-vcode-btn mtui-text-center" v-if="flag"获取短信/button button class="mtui-vcode-btn mtui-text-center" v-if="!fla……

网友NO.179218

vue中for循环更改数据的实例代码(数据变化但页面数据未变)

废话不多说了,直接给大家贴代码了,具体代码如下所示: let that = this;for(let i = 0;ithat.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zzzk) this.tableData[i].zhje = this.tableData[i].zzzk * this.tableData[i].dj * this.tableData[i].sl * this.tableData[i].hzk //更新tableData中的数据 Vue.set(this.tableData,i,this.tableData[i])} vue监听不到通过索引改变的数据。所以要加这个: //更新tableData中的数据Vue.set(this.tableData,i,this.tableData[i]) vue找不到就创建一个实例 import Vue from "vue" 总结 以上所述是小编给大家介绍的vue中for循环更改数据的实例代码(数据变化但页面数据未变),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持! ……

网友NO.508126

详解vuex 渐进式教程实例代码

vuex 渐进式教程,从入门级带你慢慢深入使用vuex。 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应 的规则保证状态以一种可预测的方式发生变化。 vuex官网: vuex.vuejs.org/zh/guide/ 安装 安装vue-cli: cnpm install -g vue-cli vue init webpack vuex 安装vuex cnpm i vuex --save 1.初级使用方法 // main.jsimport Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex' // 引入vuexVue.config.productionTip = falseVue.use(Vuex);let store = new Vuex.Store({ // store 对象 state:{ count:0 }})/* eslint-disable no-new */new Vue({ el: '#app', router, store, //使用store,这可以把 store 的实例注入所有的子组件 components: { App }, template: 'App/'}) 此时可以在组件中使用 this.$store.state.count 获取store中state的值。如: // 在组件的computed中使用 computed:{ count(){ re……

网友NO.895473

使用Vue.js创建一个时间跟踪的单页应用

Vue.js很简单。正因为如此简单,人们常常认为其适合于小项目。虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序)。 SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应。还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的。 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应用程序。通常,我们需要处理路由,数据获取和持久性,查看渲染和必要的构建设置,以便于模块化代码库。 对于基于Vue.js的SPA,下面工具将帮助你: 1.视图层:Vue.js 2.路由:vue-router,Vue的官方路由器 3.状态管理:vuex,受Flux/Redux启发的状……

网友NO.682788

Vuejs第十篇之vuejs父子组件通信

本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读。 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件、父组件、根组件; this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: div id="app" 父组件: input v-model="val"br/ 子组件: test :test="val"/test /div script var vm = new Vue({ el: '#app', data: { val: 1 }, components: { test: { props: ['test'], template: "input @keyup='findParent' v-model='test'/", methods: { findParent: function () { console.log(this.$parent); //访问根组件 console.log(this.$parent.val); //访问根组件的val属性 console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引 console.log(this.$parent === this.$root); /……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757