Vuex-CRUD 项目教程

1. 项目的目录结构及介绍

Vuex-CRUD 项目的目录结构如下：

vuex-crud/
├── examples/
├── src/
├── test/
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── esdoc.json
├── package.json
└── yarn.lock

目录介绍

• examples/: 包含项目的示例代码。
• src/: 包含项目的主要源代码。
• test/: 包含项目的测试代码。
• .babelrc: Babel 配置文件，用于转换 JavaScript 代码。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置。
• .travis.yml: Travis CI 配置文件，用于持续集成。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• esdoc.json: ESDoc 配置文件，用于生成文档。
• package.json: 项目依赖和脚本配置文件。
• yarn.lock: Yarn 锁定文件，用于确保依赖版本一致。

2. 项目的启动文件介绍

项目的启动文件位于 src/ 目录下，主要文件包括：

• index.js: 项目的入口文件，负责初始化和导出 Vuex-CRUD 模块。

启动文件介绍

• index.js:

  import Vuex from 'vuex';
  import createCrudModule from './crud';
  
  export default function createStore(client) {
    return new Vuex.Store({
      modules: {
        articles: createCrudModule({
          resource: 'articles',
          client,
        }),
      },
    });
  }
  

  该文件导出一个函数 createStore，用于创建 Vuex 存储实例，并包含一个 articles 模块，该模块使用 createCrudModule 函数创建。

3. 项目的配置文件介绍

项目的配置文件主要包括：

• .babelrc:

  {
    "presets": ["@babel/preset-env"]
  }
  

  该文件配置 Babel 预设，用于转换最新的 JavaScript 语法。

• .eslintrc.js:

  module.exports = {
    "extends": "eslint:recommended",
    "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
    },
    "env": {
      "browser": true,
      "node": true
    }
  };
  

  该文件配置 ESLint，继承推荐的规则集，并设置解析选项和环境。

• package.json:

  {
    "name": "vuex-crud",
    "version": "1.0.0",
    "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
      "watch": "npm run development -- --watch",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=webpack.config.js"
    },
    "dependencies": {
      "vue": "^2.6.10",
      "vuex": "^3.1.1"
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-env": "^1.7.0",
      "cross-env": "^5.2.0",
      "eslint": "^5.16.0",
      "webpack": "^4.30.0",
      "webpack-cli