vue-cli构建项目

切图仔

发布于 2022-09-08 15:54:28

3500

发布于 2022-09-08 15:54:28

1.下载

 npm i vue-cli -g

2.创建一个webpack项目

vue inti webpack pro

3.安装模块

cnpm i

4.关闭eslint config/index.js

useEslint:flase

目录 src/assets src/static 这两个目录都是存放静态文件，唯一的区别是accets里面的文件会被打包 static里面的文件不会被打包，文件名称也不会变，如rotbots.txt文件

5.main.js全局设置，引入一些全局模块等

案例实现数据删除功能 Table.vue

<template>
   <table class='table'>
      <thead>
        <tr>
          <th v-for="field in fields">{{field.text}}</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
          <tr v-for="data in datas">
            <td>{{data.id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.age}}</td>
            <td @click='fn_del(data.id)'>删除</td>
          </tr>
      </tbody>
    </table>
</template>

<script>
export default {
    name:'Table',
    props:['fields','datas','parent'],
    data(){
       return{}
    },
    methods:{
      fn_del(id){
        this.parent.del(id)
      }
    }
}
</script>

Index.vue

<template>
  <div class="hello">
    <Table :fields="fields" :datas="datas" :parent="this"></Table>
  </div>
</template>
<script>
import Table from '@/components/common/Table';
export default {
  name: 'Index',
  components:{Table},
  data () {
    return {
      fields:[
        {name:'id',text:'id'},
        {name:'name',text:'姓名'},
        {name:'age',text:'年龄'}
      ],
      datas:[
        {id:1,name:'a',age:18},
        {id:2,name:'b',age:25},
        {id:3,name:'c',age:33}
      ]
    }
  
  },
  methods:{
    del(id){
      this.datas = this.datas.filter(data=>data.id!=id)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

由于我们不能直接操作props的数据，我们将删除数据交给父组件，所以父组件将this暴露给子组件，供子组件调用，这样做有点麻烦，我们可以通过vuex来处理组件间的通信，全局统一

见本博客，组件通信

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-07-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

c++