Vuex 的项目实例1 项目初始化

npm install vuex axios ant-design-vue -S

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'
//1.导入 ant-destign-vue 组件库
import Antd from 'ant-design-vue'
//2.导入组件库的样式表
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false
//3.安装组件库
Vue.use(Antd)

newVue({
  router,
  store,
  render: h =>h(App)
}).$mount('#app')

<template>
  <div id="app">
    <a-input placeholder="请输入任务"class="my_ipt" />
    <a-button type="primary">增加事项</a-button>

    <a-list bordered :dataSource="list"class="dt_list">
      <a-list-item slot="renderItem"slot-scope="item">
        <!--复选框-->
        <a-checkbox>{{item.info}}</a-checkbox>
        <!--删除链接-->
        <a slot="actions">删除</a>
      </a-list-item>
      <!--footer 区域-->
      <div slot="footer"class="footer">
        <!--未完成的任务个数-->
        <span>0条剩余</span>
        <!--操作按钮-->
        <a-button-group>
          <a-button type="primary">全部</a-button>
          <a-button>未完成</a-button>
          <a-button>已完成</a-button>
        </a-button-group>
        <!--把已经完成的任务清空-->
        <a>清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>export default{
  data () {
    return{
      list: [
        { id: 0, info: 'Racing car sprays burnimg fuel into crowd.', dome: false},
        { id: 1, info: 'Japanese princess to wed commoner.', dome: false},
        { id: 2, info: 'Australian walks 100km after outback crash.', dome: false},
        { id: 3, info: 'Man charged over missing wedding girl.', dome: false},
        { id: 4, info: 'Los Angeles battles huge wildfires.', dome: false}
      ]
    }
  }
}
</script>

<style scoped>.my_ipt{width:500px;margin-right:10px;
}.dt_list{width:500px;margin-top:10px;
}.footer{display:flex;justify-content:space-between;align-items:center;
}
</style>

{
   "semi": false,
   "singleQuote": true,
   "printWidth": 100}