vue初学脚手架项目碎片学习整理（有图解析）

1效果图：

vue-cli脚手架新建一个count.vue

<template>
    <div>
        <button @click="increment">+</button>
        <button v-on:click="decrement">-</button>
        <p><span>{{num}}</span></p>
    </div>
</template>
<script>
export default {
    props:["num"],//从helloworld组件里面传一个初始值10。父组件到子组件
    data(){
        return{
            num:0
        }  
    },
    methods:{
        increment(){
            this.num++
        },
        decrement(){
            this.num--
        }
    }
}
</script>

helloworld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    
    <!-- <Count num="10" ></Count> -->
    <Count  v-bind:num="num"></Count>
    <p>parent：{{num}}</p>
  </div>
</template>

<script>
import Count from './Count.vue'
export default {
  name: "HelloWorld",
  data() {
    return {
      num:10,
      msg: "Welcome to Your Vue.js App"
    };
  },
  components:{Count}
};
</script>

2 从父组件传一个值给子组件绑定

此时

点加减parent不会变化

3 怎么改变10 。。。。。这个有点小问题

子组件往父组件传用emit触发
父子组件都加减了

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- <Count num="10" ></Count> -->
    <Count  v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Count>
    <p>parent：{{num}}</p>
  </div>
</template>

<script>
import Count from './shop/Count.vue'
export default {
  name: "HuaXia",
  data() {
    return {
      num:10,
      msg: "Welcome to Your Vue.js App"
    };
  },
  methods:{
        increment(){
            this.num++
        },
        decrement(){
            this.num--
        }
    },
  components:{Count}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

4 在app.vue里面添加一个小组件


5 在这里发现需要导入mui文件
但是放在assets里面还是static里面？

看我自己的尝试
https://blog.csdn.net/fengtingYan/article/details/87540679
好吧昨天还说好的，今天又有问题了

6 导入swiper
参考https://github.com/surmon-china/vue-awesome-swiper

npm install swiper 

https://blog.csdn.net/i_coffer/article/details/81330919

所以我决定换一个框架，不用mui了

优秀的UI框架合集
https://www.cnblogs.com/dupd/p/7735450.html

与师傅商量了一下 ，最后决定用cube-ui

了解一下 https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

vue init webpack 与vue create 项目区别

vue create my-project

生成的项目并没有webpack相关的文件
也就是说没有集成webpack

解决办法是先：

   npm install -g @vue/cli-init

然后：

vue init webpack my-project

这样生成的vue-cli项目就有webpack配置文件了

使用Flexible实现手淘H5页面的终端适配
https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
https://www.jb51.net/article/131534.htm