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

1、通过 vue ui 命令打开可视化面板，创建新项目：vuex-demo

2、安装 vuex 依赖包 

npm install vuex axios ant-design-vue -S

当然也可以使用可视化面板的依赖安装。

ant-design-vue 是UI组件库。

3、实现 Todos 基本布局（基于已有样式模板）

main.js 文件：

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)

new Vue({
  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>

在项目根目录新建 .prettierrc 文件：

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

semi ：表示结尾的分号省略

singleQuote：表示使用单引号

printWidth：表示每行代码长度