[IMWeb训练营作业]vuejs仿写朋友圈

介绍

vuejs仿写朋友圈。

• 将HTML中按逻辑切割成vue组件
• 每个vue组件单独建立一个.vue文件
• 实现父->子通信。如：将data通过props传到子组件，并按照存储逻辑分层渲染。
• 实现子->父通信。如：子组件点赞后emit在父组件中显示点赞的效果。

Demo

点此查看demo

点此进入项目Github查看完整代码

一些笔记

vue-cli搭建环境

# 最新稳定版
$ npm install vue
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

.vue中组件的格式

<template></template> //HTML
<script></script>
<style scoped></style> //CSS:scoped会生成时间戳避免组件间样式命名重复

.vue中输出组件

export default{}

.vue中引入组件

import 组件名 from './xxx.vue'
export default{
    components:{
        组件新名字:组件名
    }
}

组件内定义data内的对象注意用闭包

data: function(){return {key:value};}

访问图片404出错解决方法

• 图片存储在assets中时写alias解决

resolve: { 
alias: { 
'assets': path.resolve(__dirname, '../src/assets'), 
} 
}

• 图片改为存储在static文件夹内（我的解决方法），但是要注意引用时不能直接写”/xxx”，要写“./xxx”，不然在build时路径会错误。

将vue内变量传入css的方法

<div :style="{backgroundImage:'url+('+data.imgUrl+')'}">

webpack打包命令

npm run build 

webpack打包出空白网页

修改build目录下的webpack.base.conf.js有publicPath如下：

publicPath:'./'

git命令默认屏蔽dist文件夹怎么破？

在根目录.gitignore文件中去掉dist

将dist作为gh-pages分支git push到github的方法

git subtree push --prefix=dist origin gh-pages

核心代码

数据结构：

var data = {
            id: 1917831232,
            name: '武松',
            imgUrl: './static/wusong.png',
            bg:'./static/tiger.jpg',
            brief: '愿得一人心白首不分离',
            contentList: [
              {
                id: 1997234346,
                name: '李白',
                imgUrl: './static/libai.png',
                brief: '辰风破浪',
                content: {
                  text: '阁下何不乘风起，扶摇直上九万里。你咋不上天，和神舟十六号肩并肩。',
                  fullText: '全文',
                  picture: [
                    {
                      imgUrl: ''
                    }
                  ],
                  video: '',
                  link: {
                    time: '',
                    imgUrl: '',
                    text: ''
                  },
                  location: '大唐酒吧',
                  time: '刚刚',
                  source: '',
                  like: [
                    {
                      id: '',
                      userName: '杜甫'
                    },
                    {
                      id: '',
                      userName: '陶渊明'
                    },
                    {
                      id: '',
                      userName: '周杰伦'
                    },
                    {
                      id: '',
                      userName: 'JJ'
                    },
                    {
                      id: '',
                      userName: '白百合'
                    },
                    {
                      id: '',
                      userName: '陈羽凡'
                    }
                  ],
                  comment: [
                    {
                      username: '武松',
                      to: '',
                      text: '',
                      reply: '呵呵'
                    },
                    {
                      username: '项羽',
                      to: '',
                      text: '',
                      reply: '上线打王者荣耀'
                    },
                    {
                      username: '杜甫',
                      to: '',
                      text: '',
                      reply: '想你，速回'
                    },
                    {
                      username: '李白',
                      to: '杜甫',
                      text: '',
                      reply: '我也想你'
                    }
                  ]
                }
              }

 }

核心代码

HTML

<template>
  <div id="circle">
    <headersection></headersection>
    <wallpaper v-bind:data="data"></wallpaper>
    <contentsection v-bind:data="data"></contentsection>
  </div>
</template>

<template>
  <div id="content">

    <contentsection v-for="item in data.contentList" v-bind:data="item"></contentsection>

  </div>
</template>

JS

    import contentsection from './contentsection.vue'
    export default {
        props:['data'],
        components:{
            contentsection:contentsection
        }
    }

export default {
        data:function(){
            return { isShow:false, notLike:true}
        },
        props:['data'],
        methods:{
            onCommentClick:function(){
                this.isShow=(this.isShow?false:true);
                console.log(this.isShow);
            },
            like:function(){
                this.notLike=(this.notLike?false:true);
                console.log(this.notLike);
            }
        }
    }