Vue项目笔记(持续更新)

一、命名方式(目录、组件)

组件的文件夹与文件名都使用PascalBase命名

二、父组件与子组件:

1、 父组件引用子组件:

//父组件
<script>
import TitleBar from './Common/TitleBar'
export default {
  name: 'WapCalc',
  components: {
    TitleBar: TitleBar
  }
}
</script>

2、父组件向子组件传值

父组件关键点:

1、:xxx="xxx"
2、data(){
    return{
        xxx: 'xxx'
    }
  }
//父组件
<template>
  <div class="WapCalc">
    <TitleBar :title="title"></TitleBar>
  </div>
</template>

<script>
import TitleBar from './Common/TitleBar'
export default {
  name: 'WapCalc',
  data () {
    return {
      title: '房贷计算器'
    }
  },
  components: {
    TitleBar: TitleBar
  }
}
</script>
<style scoped>
</style>

子组件关键点:

1、props: ['xxx']
2、{{xxx}}
//子组件
<template>
  <div class="title-bar">
    <span class="back" style="display: none;"></span>
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'TitleBar',
  data () {
    return {
    }
  },
  props: ['title']
}
</script>
<style scoped>
</style>

3、 兄弟组件间传值

使用一个Vue实例作为中央事件总线。 Vue内部有一个事件机制,可以参考源码。 $on方法用来监听一个事件 $emit用来触发一个事件。

/*新建一个Vue实例作为中央事件总嫌*/
import Vue from 'vue';
let VueEvent = new Vue()
export default VueEvent

在触发的组件中引入

import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$emit('事件名', data)

在接收的组件中引入

import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$on('事件名', (data) => {...})

三、vue-cli支持scss

vue-cli中已经内置配置好了sass 以及lass的配置。 如果需要的话直接下载两个模块就可以了 webpack它会根据 lang 属性自动用适当的加载器去处理。 npm install node-sass --save-dev npm install sass-loader --save-dev

四、vue-cli配置autoprefixer

npm install postcss-loader autoprefixer --save-dev 新建一个 postcss.config.js 文件,输入:

module.exports = {
    plugins: [
        require('autoprefixer')({
            browserslist: [
                ">0.01%"
            ]
        })
    ]
}

五、vue-cli配置雪碧图

npm i --save webpack-spritesmith

//添加配置
const SpritesmithPlugin = require('webpack-spritesmith');
......
    plugins: [
      new SpritesmithPlugin({
        //目标小图标
        src: {
          cwd: path.resolve(__dirname, `./src/${PAGE}/assets/sprite`),
          glob: '*.png'
        },
        // 输出雪碧图文件及样式文件
        target: {
          image: path.resolve(__dirname, `./src/${PAGE}/assets/images/sprite.png`),
          css: path.resolve(__dirname, `./src/${PAGE}/assets/css/sprite.scss`)
        },
        apiOptions: {
          cssImageRef: '../../assets/images/sprite.png'
        },
        // 雪碧图中每个图片带有一定间距
        spritesmithOptions: {
          algorithm: 'top-down',
          padding: 4
        }
      }),
      TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin(),
    ]
......

六、vue生命周期

vue生命周期

七、v-for既可以遍历数组也可以遍历对象

遍历对象: v-for="(value, proper) in obj" value是属性值,proper是属性索引

八、class动态绑定方式

1、根据某个条件加载样式

:class="{'样式名': 条件}"

2、三元表达式

:class="[条件?'条件为真时的class':'条件为假时的class']"

3、三元表达结合数组

:class="[[条件?'条件为真时的class':'条件为假时的class'],{'样式名': 条件},'样式名'...]"

九、webkit-box-orient: vertical打包线上不显示

为什么用:多行截断

overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*文本溢出时显示省略标记*/
display:-webkit-box;/*设置弹性盒模型*/
-webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/
 -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/

原因: optimize-css-assets-webpack-plugin 这个插件的问题,在webpack打包的时候,过滤了部分css 解决:

/*! autoprefixer: off */
-webkit-box-orient: vertical;
 /* autoprefixer: on */

十、Vue使用axios

axios是一个基于 promise 的 HTTP 库 使用:npm install axios 自己封装一个方法使用:

import axios from 'axios'
async getApi(url) {
  try {
    let res = await axios.get(url)
    res = res.data
    return new Promise((resolve) => {
      if (res.code === 0) {
        resolve(res)
      } else {
        resolve(res)
      }
    })
  } catch (err) {
    console.log(err)
  }
},

=》IE兼容性问题

报错:promise 在ie中未定义的问题 解决:

import Promise from 'promise-polyfill'
if (!window.Promise) {
  window.Promise = Promise
}

十一、dev开发阶段解决跨域问题

在/config/index.js里设置

proxyTable: {
      '/api': {
        target: 'http://10.129.232.183:8364', /*后端提供服务的前缀地址*/
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
}

十二、package.json中dependencies与devDependencies区别

dependencies

生产环境依赖,会被打包 装包姿势:npm install xxx –save

devDependencies

开发环境依赖,不会被打包 装包姿势:npm install xxx –save-dev

区别: 在开发阶段,dependencies与devDependencies没什么大的区别,都需要被下载,因为我们开发时要用到开发环境

但当我们把打包好的项目交给运维部署时,他使用npm install命令去安装,只会把dependencies的包下载下来,而不会去下载devDependencies里面的包

十三、package.json中dependencies与devDependencies区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券