Vue项目小知识

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
    }
}

暂时写到这里~之后想到再更新