Vue项目笔记(持续更新)

2019-08-15 18:42:41 浏览数 (1)

一、命名方式（目录、组件）

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

二、父组件与子组件：

1、 父组件引用子组件：

代码语言：javascript复制
//父组件
<script>
import TitleBar from './Common/TitleBar'
export default {
  name: 'WapCalc',
  components: {
    TitleBar: TitleBar
  }
}
</script>

2、父组件向子组件传值

父组件关键点：

代码语言：javascript复制
1、:xxx="xxx"
2、data(){
    return{
        xxx: 'xxx'
    }
  }
代码语言：javascript复制
//父组件
<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>

子组件关键点：

代码语言：javascript复制
1、props: ['xxx']
2、{{xxx}}
代码语言：javascript复制
//子组件
<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用来触发一个事件。

代码语言：javascript复制
/*新建一个Vue实例作为中央事件总嫌*/
import Vue from 'vue';
let VueEvent = new Vue()
export default VueEvent

在触发的组件中引入

代码语言：javascript复制
import VueEvent from '../../assets/js/VueEvent.js'
VueEvent.$emit('事件名', data)

在接收的组件中引入

代码语言：javascript复制
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 文件，输入:

代码语言：javascript复制
module.exports = {
    plugins: [
        require('autoprefixer')({
            browserslist: [
                ">0.01%"
            ]
        })
    ]
}

五、vue-cli配置雪碧图

npm i --save webpack-spritesmith

代码语言：javascript复制
//添加配置
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、根据某个条件加载样式

代码语言：javascript复制
:class="{'样式名': 条件}"

2、三元表达式

代码语言：javascript复制
:class="[条件?'条件为真时的class':'条件为假时的class']"

3、三元表达结合数组

代码语言：javascript复制
:class="[[条件?'条件为真时的class':'条件为假时的class'],{'样式名': 条件},'样式名'...]"

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

为什么用：多行截断

代码语言：javascript复制
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 解决：

代码语言：javascript复制
/*! autoprefixer: off */
-webkit-box-orient: vertical;
 /* autoprefixer: on */

十、Vue使用axios

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

代码语言：javascript复制
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中未定义的问题 解决：

代码语言：javascript复制
import Promise from 'promise-polyfill'
if (!window.Promise) {
  window.Promise = Promise
}

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

在/config/index.js里设置

代码语言：javascript复制
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区别

npm webpack 打包 css sass

0 人点赞