1.解决 vue 的缩进问题 配置 eslint , 只要要eslint 对应的值为 0,则 eslint 将不会对其进行检测 (.eslintrc.js  --  rules ) A. 不检测 缩进  -->   'indent': 0 B. 不检测 函数的 space --> 'space-before-function-paren': 0 2. vue 的 sass 调用 mixin 函数 需要添加 @mixin .…

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

1.创建一个基于 webpack 模板的新项目 $ vue init webpack myvue 1 2.在当前目录下,安装依赖 $ cd myvue $ npm install 1 2 3.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 1 2 3 4.在build文件夹下的webpack.base.conf.js的rules里面添加…

sass可以提高我们的开发效率,怎么在vue的项目中使用sass并且可以设置一些公共的文件呢? 使用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里面添加配置 module: { rules: [ //...默认及其他 { test: /\.s…

先npm两个插件 npm install sass-loader --save-dev npm install node-sass --save-dev 然后在webpack当中配置 { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { 'scss': 'style-loader!css-loader!sass-loader' } } } 最后在vue页面. <style lang="scss" type=&q…

一.安装sass依赖包 $ npm install sass-loader --save-dev //sass-loader依赖于node-sass $ npm install node-sass --save-dev 二.修改 style标签添加lang属性 <style lang="scss" type="text/css"> //你的sass语言 $primary-color: #333; h1 { color: $primary-color; /…

1.安装node-sass,因为scss是基于此库的 cnpm install --save-dev node-sass 2.安装sass-loader cnpm install --save-dev sass-loader 全部安装完成之后,到webpack.base.conf.js的编译规则里添加scss { test: /\.sass$\, loaders: ['style','css','sass'] } 3.使用声名 <style scoped lang="scss"&…

1. 添加less.sass处理 1.1如果是sass,首先在当前目录安装处理插件(sass): npm i -D node-sass sass-loader 1.2如果是less,首先在当前目录安装处理插件(less) npm i -D node-less less-loader 2.其次打开webpack.base.conf.js { test:/\.scss$/, loaders:['style','css','sass'] }, 3.在所需要sass或less处理的文件填写对应的css处…

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

项目使用 vue-cli 3 在项目中使用 sass npm install sass-loader --save -D cnpm install sass-loader --save -D       (cnpm 更加好安装) 使用 sass ,需要安装其依赖的模块 node-sass , npm install node-sass --save -D cnpm install node-sass --save -D      (cnpm 更加好安装) 在项目中使用 less npm inst…

推荐:https://www.cnblogs.com/Mr--Li/p/7921150.html…

npm i sass-loader --save -dev(-D)…

ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ChromeDriver  被墙了 方法一: npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 方法二: cnpm install chromedriver 方法三:…

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de…

一,  vue.js 2.0 1, cnpm install vue-cli -g 全局安装 2, 运行vue查看安装是否成功(创建vue-cli目录: vue init webpack demo) 3, npm init -y 用来初始化生成一个新的 package.json 文件,它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了. 如果使用了 -f(代表force).-y(代表yes),则跳过提问阶段,直接生成一个新的 package.json 文件 4, 运行项目执行…

如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经不再维护,以及 --fix 之后 .vue 文件只剩下 <style> 部分等.我在踩完坑跑通出满意的效果后,维护一份新的指引,以备后续项目使用,顺便分享一下. 为什么选择用 stylelint ? 这个问题有两层含义,一是为什么要使用这个样式代码风格检查工具,二是与其他工具相比,为什么选择 st…

 一.IDE开发工具 常用的开发工具有webstorm和sublime. 我个人喜好用Atom+插件的形式 打开Atom,在file --> settings --> packages中收入vue开发相关的插件 beautify:代码格式 atom-html-preview:html代码提示 language-vue.language-vue-component:vue语言 lint-sass-vue:vue的sass语言 vue-autocomplete:vue语法提示 文件结构如下: 二.…

;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]');//这样的…

其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和生成环境,开发环境提供本地服务器,有热模块替换,能使用 sass.es6等开发项目. 实际工作中我们可能会使用声明式框架 vue 或 react 来开发项目,而它们都提供了相应的脚手架.在学习 vue-cli(vue官方的脚手架)之前,我们先来玩一下 vue loader. Tip:本篇也可以称之为"…

启用压缩,让页面加载更快 在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对代码进行混淆压缩,只为了让js,css文件变得更小,加载更快.但只是这样做是不够的,我们还可以做得更极致. gzip是Web世界中使用的最为广泛的文件压缩算法,当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法,所以如果我们在打包Vue项目的时候,可以直接将所有的静态资源压缩为gzi…

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,你懂的,嘿嘿嘿. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会FQ,赶紧转行... 效果…

原文收录在 GitHub博客 ( https://github.com/jawil/blog ) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴. 由于github的issues没有TOC菜单栏导航,所以这里方便大家查看,先安利一款Chrome浏览器的插件,感谢github用户@BBcaptain 推荐.点击我呀,进入商店,自备梯子,如果不会翻墙,赶紧转行... 效果预览,是不是很方便,图片较多,建议等待一会或者多刷新几下: Echo.js – 简单易用的…

1  选择题 1.1   默认情况下,使用P标记会形成什么效果() A.在文字P所在位置中加入8个空格 B.P后面的文字会变成粗体 C.开始新的一行 D.P后面的文字会变成斜体 答案: C 1.2   META元素的作用是什么() A.META元素用于表达HTML文档的格式 B.META元素用于指定相关HTML文档的信息 C.META元素用于实现本页的自动刷新 D.以上都不对 答案:B 1.3   我们在HTML页面中制作了一个图像,想要在鼠标指向这个图像时浮出一条信息,应该使用哪个参数做()…

1)使用rem进行等比缩放 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 比如根元素(html)设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px: 如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小,一般是12px: 原理分析:rem屏幕适配就是一种等比缩放效果 一般来说设计稿是基于p6(750),或者是p5(640)的尺寸,以p6为例子: 设置:<meta n…

需求: 设计三套主题色+部分图标更换: 实现方式汇总: 1.传统做法,生成多套css主题包,切换link引入路径切换href实现,参考网站:http://jui.org/: <link id="skincolor" href="skin-default.css" rel="stylesheet" type="text/css"> document.getElementById('#skincolor').href…

对于 现在的 vue . react .webpack 来说也许有点旧了,有时候,越简单的技术越可靠,备份一下 module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), compass: { development: { options: { generatedImagesDir:'public/src/slic…

十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助webpack将符合条件的源文件转换为对应的目标格式文件.比如index.scss转换成index.css 安装成功后,package.json文件变化如下: 接着,安装extract-text-webpack-plugin,让webpack可以输出css格式的文件 npm install --save-…

六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.exports = { // 配置入口 entry: { }, // 编译后的文件路径 output: { path: '', // 文件路径 filename: '' // 文件名称 }, module: { // 编译规则 loaders: [] }, // 辅助的插件 plugins:[] }…

一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install -g webpack 如果公司网络是设置代理的,要设置下代理地址 npm config set proxy http://***/ 三.建立项目文件夹 我在本机的E盘上,建了一个名称为demo的文件夹 四.初始化package.json 1.cmd控制台进入E盘下的demo文件夹 2.输入 npm…

好久没写博文了,今天抽空写一写,最近在用vue.js build 项目,今早想使用sass来编译css,可是安装好依赖包之后仍然显示一下错误: ERROR in ENOENT: no such file or directory, scandir '/Users/baidu/Documents/mydata/hfutoj/node_modules/.npminstall/node-sass/3.8.0/node-sass/vendor' @ ./~/vue-style-loader!./~/cs…