vue小知识点总结

 

一：插件

1:better-scroll 插件实现左右轮播滚动

2:vue-lazyload 插件实现图片懒加载

3:实现移动端自适应:

方案一

3.1: postcss 插件引到项目里 功能：把你自己写的代码px转化为rem（对于引入的外部插件，不做单位转化)

3.2：main.js 中引入一段js代码，设置html标签中的font-size大小

window.onresize = setHtmlFontSize function setHtmlFontSize () { const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth const htmlDom = document.getElementsByTagName('html')[0] htmlDom.style.fontSize = htmlWidth / 10 + 'px' } setHtmlFontSize()

方案二：（vuecli3脚手架为例）

步骤一： 安装 lib-flexible

npm install lib-flexible --save

步骤二：  在main.js中引入lib-flexible

import 'lib-flexible/flexible.js'  (设置html标签中的font-size大小)

步骤二： 安装px2rem-loader (使用px2rem-loader自动将css中的 px 转换成 rem)

 npm install px2rem-loader --save-dev

步骤四： vue.config.js 里面添加配置

chainWebpack: config => {

config.module

.rule("css")

.oneOf("vue")

.use("px2rem-loader")

.loader("px2rem-loader")

.before("postcss-loader") // this makes it work.

.options({ remUnit: 75 })

.end();

config.module

.rule("less")

.oneOf("vue")

.use("px2rem-loader")

.loader("px2rem-loader")

.before("postcss-loader") // this makes it work.

.options({ remUnit: 75 })

.end();

}

4：vue-resource插件类似于axios插件

5:main.js中全局引入mint ui框架，页面里面随便使用该框架的组件

6:Vue页面中，代码中注释文字用 // 而不是 这种格式  模板中用 注释

7: template模板里面  v-show/v-if=’item’,js 里面 if（item）{} else{}:   item 取值null ,'',undefined,NaN, 返回为false 若返回true 表示 item 取值为：!0,   !null, !'', !undfined, !NaN, 空对象，空数组( !1  !2   !5  (等)返回 false)

8: vue-cli2:  vue init webapck 项目名称，按照这个方式创建的项目，此时 引入less，只需要 npm install less less-loader --save 即可，不需要再手动配置为webpack ,引入方式 

9：vue 项目引入juqery插件，App.vue 中使用 $ 会报错，其他vue页面中没问题   vue 项目中快捷键

10:

2:样式文件

vue页面样式文件引入方式如下:

1.1: (src一定要按照相对路径的方式引入)

1.3:引入图片的方式:

方法一：

scss / less样式文件中引入图片：

a{background-image:url('~@/assets/images/cat.png');} (@:表示src目录 ,vuecli框架自动配置的)

template 模板里面这样写：

 

 

js引入图片用 rquire(),如下:require('../../assets/images/cat.png');

解析：

 方法二:

在vue.config.js 里面 配置别名：

  chainWebpack: config => {

    // 配置别名

    config.resolve.alias

      .set("img", resolve("src/assets/images"))

}

样式文件里面这样写：

background: url('~img/dialogs/bg.png') no-repeat;

template 模板里面这样写：

js 里面这样写:

perItems: [{ src: require("img/index/pSetting/person01.png"), name: "" }]

温馨提示：参考mint ui框架的demo(mint-ui-master),可以更快上手该框架哦！

word-break : 设置自动换行的处理方法

1.4: 父组件scoped 属性添加以后， 父组件内的样式 不会 影响子组件，若在父组件样式里，想修改子组件的样式，在某个元类名 添加 /deep/ 深度作用选择器以后， 子组件里面该类名也会起作用，如：

// 父组件(header.vue)