在webpack中,所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分吗,然后它根据lang属性自动判断出要使用的loaders。所以,其实只要安装处理sass/scss的loader。就能在vue中使用scss了。现在我们来安装sa ...
分类:
Web程序 时间:
2018-07-01 11:45:41
阅读次数:
162
$list-bg:red,orange,blue,skyblue; ul{ >li{ height: 30px; @each $c in $list-bg{ $i:index($list-bg,$c); &:nth-child(#{$i+1}){//+1是除了第一个以外的li b... ...
分类:
编程语言 时间:
2018-06-28 14:06:49
阅读次数:
371
匹配符 *、**、!、{} 文件操作 del (替代gulp-clean) gulp-rename 描述:重命名文件 gulp-concat 描述:合并文件。 gulp-filter 描述:在虚拟文件流中过滤文件。 压缩 gulp-uglify 描述:压缩js文件大小。 gulp-csso 描述:压 ...
分类:
其他好文 时间:
2018-06-28 10:16:26
阅读次数:
175
1、通过命令新建一个vue项目 2、由于我用的是sass样式,所以安装sass依赖 3、配置雪碧图功能 4、使用方法如下(直接使用 sprite.scss 中的 @mixin方法): 效果如下 ...
分类:
其他好文 时间:
2018-06-26 15:02:12
阅读次数:
910
1.打开sublime,安装包 Sass, Sass Build, SublimeOnSaveBuild 2.若未安装sass,打开iterm,gem(ruby工具)安装sass 3.配置编译目录 打开sublime tools -> Build System -> New Build System ...
分类:
Web程序 时间:
2018-06-23 19:01:51
阅读次数:
214
恢复内容开始 Webpack与Gulp、Grunt其实没有什么可比性,它可以看作模块打包机,通过分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。Gulp/Grunt是一种能够优化前 ...
分类:
Web程序 时间:
2018-06-22 13:16:28
阅读次数:
164
1.安装node-sass,因为scss是基于此库的 cnpm install --save-dev node-sass 2.安装sass-loader cnpm install --save-dev sass-loader 全部安装完成之后,到webpack.base.conf.js的编译规则里添 ...
分类:
其他好文 时间:
2018-06-16 16:13:33
阅读次数:
146
Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vuex中用于存储数据 var state = { count:1 } 4.mutations里放的是方 ...
分类:
其他好文 时间:
2018-06-16 15:39:36
阅读次数:
149
为了统一团队的代码规范,除了一纸规范说明之外,还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则,但至少能够在一定程度上缓解代码不统一的局面。 相对于后端,前端代码规范的质量检查涉及到HTML, CSS,Javascript ,如今还涉及到SCSS,ES5,JSX, React,Vue,An ...
分类:
其他好文 时间:
2018-06-16 01:03:44
阅读次数:
323
less、sass、stylus 它们是三种类似的样式动态语言,属于css预处理语言,它们有类似css的语法,为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么做是为了css的编写和维护。 它们使用的文件分别是:.less、.scss、*.styl,这些文件是不能再网页上直接使用的,最终 ...
分类:
其他好文 时间:
2018-06-13 01:00:27
阅读次数:
216