stylus(css预处理器)
vue项目中使用stylus前必须先安装stylus和stylus-loader(前提必须安装node.js)
npm install stylus --save
npm install stylus-loader --save
使用stylus
一、在<style>标签上添加属性lang=“stylus”
<style lang="stylus"></style>
二、外部引入.styl文件
@import '~assets/styles/varibles.styl'
踩坑
创建了一个vue项目,也安装了stylus和stylus-loader,结果一运行就出错,后来发现只要降低stylus-loader的版本就可以了,降低版本为 :"stylus-loader": "^3.0.2"
Vue中style的scoped属性
scoped属性实现样式私有化,不对全局造成污染。style标签上添加scoped属性以表示样式的只属于当下的模块,局部有效
Vue项目中关闭eslint
要是在创建项目的时候,Use ESlint to lint your code选择了Y,那就是一大堆烦死人的eslint校验
只要修改build.js --> webpack.base.conf.js文件,重启npm run dev就搞定了
Vue中data引入图片路径的方法
一开始在data中依旧还是用HTML中的方法去引用路径,结果发现图片并不显示
data(){
return {
imgUrl:'@/assets/images/img1.png'
}
}
解决方法
一、使用require内部引入
data() {
return {
imgUrl:require('@/assets/images/swiperImg1.png')
}
}
二、使用import外部引入
import imgUrl from '@/assets/images/swiperImg1.png'
data() {
return {
imgUrl:imgUrl
}
}
暂时写到这里~之后想到再更新