Vue项目笔记(持续更新)

作者: 杨肆月 | 来源:发表于2019-05-15 18:43 被阅读15次

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

    组件的文件夹与文件名都使用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': ''
            }
          }
    }
    

    相关文章

      网友评论

        本文标题:Vue项目笔记(持续更新)

        本文链接:https://www.haomeiwen.com/subject/eoymaqtx.html