本文介绍如何使用 Vue CLI 命令行，结合业务逻辑和国际化功能，更好组织项目结构。

简介

vue.js 作为一款优秀框架，学习曲线很小，很容易配置，并且可以很方便从 angularJS 技术栈切换。

你可以使用 vue 组件方法，將应用拆分成很多小型组件，组件可以在整个应用中重用。

随着应用的增长，问题接踵而至，此时需要更好的结构管理应用。下面是我在编写大型 vue.js 应用时用的应用组织结构。

项目配置

开始使用 Vue.js 最好的方式的是使用Vue CLI配置项目。

安装要求: Node.js 版本大于等于 6.x，最好是 8.x 版本，npm 3+ 版本， GIT。

$ npm install -g vue-cli

或者使用yarn

$ yarn global add vue-cli

然后使用 webpack 模板初始化项目，CLI 内置其他可选模板。

$ vue init webpack large-scale-application

命令执行后会问一些问题

? Project name large-scale-application
? Project description A Vue.js project
? Author Erol 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) yarn

   vue-cli · Generated "large-scale-application".


# Installing project dependencies ...
# ========================

yarn install v1.5.1
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
Done in 43.98s.


Running eslint --fix to comply with chosen preset rules...
# ========================

yarn run v1.5.1
$ eslint --ext .js,.vue src test/unit test/e2e/specs --fix
Done in 1.13s.

# Project initialization finished!
# ========================

To get started:

  cd large-scale-application
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

命令执行结束后会自动创建项目。

初始目录

├── build
├── config
├── node_modules
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
├── static
└── test

项目结构包含组织良好的基础目录。我们会將代码放在src/components里，但后续会持续增加。

大型应用优化目录

├── build
├── config
├── node_modules
├── src
│   ├── assets
│   │   └── logo.png
│   ├── modules
│   │   └── core
│   │   │   ├── index.js
│   │   └── projects
│   │   │   ├── index.js
│   │   │   ├── router.js
│   │   │   ├── components
│   │   │   │   └── ProjectStatus.vue
│   │   │   ├── fields
│   │   │   │   └── isCompleted.js
│   │   │   └── pages
│   │   │   │   ├── Project.vue
│   │   │   │   └── Projects.vue
│   │   │   ├── translations
│   │   │   │   ├── de.js
│   │   │   │   ├── en.js
│   │   │   │   └── index.js
│   │   └── users
│   │   │   ├── index.js
│   │   │   ├── router.js
│   │   │   ├── components
│   │   │   │   └── UserName.vue
│   │   │   └── pages
│   │   │   │   ├── UserProfile.vue
│   │   │   │   └── Users.vue
│   ├── App.vue
│   ├── main.js
│   └── i18n.js
│   └── router.js
├── static
└── test

目录结构根据业务逻辑拆分如：projects、users，我喜欢遵循即插即用的原则，可以很方便添加和删除整个模块目录。

模块引用

每个模块有index.js文件，用来注册所有子逻辑，例如，基础文件包括:

import './router'
import './translations'

import './filters/isCompleted'

main.js文件中直接引入:

import Vue from "vue";
import App from "./App";
import router from "./router";

import "./modules/projects";
import "./modules/users";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: ""
});

路由配置

我们调用 vue-router 的addRoutes方法为每个模块定义特定路由。

import router from "@/router";
import Project from "./pages/Project";
import Projects from "./pages/Projects";

router.addRoutes([
  {
    path: "/projects",
    name: "projects.projects",
    component: Projects,
    props: false
  },
  {
    path: "/projects/:id",
    name: "projects.project",
    component: Project,
    props: true
  }
]);

这里將页面组件放在page目录中，让应用更加结构化。

国际化

国际化有很多库，目前我使用vue-i18n，功能令人满意。

我们创建i18.js入口文件初始化翻译功能。

import Vue from "vue";
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

export default new VueI18n({
  locale: "en",
  messages: {}
});

我们可以在每个模块的语言文件，例如 modules/projects/translations/en.js中添加翻译。

import i18n from "@/i18n";

i18n.mergeLocaleMessage("en", {
  PROJECTS: "Projects",
  PROJECT: "Project"
});

import i18n from "@/i18n";

i18n.mergeLocaleMessage("de", {
  PROJECTS: "Projekte",
  PROJECT: "Projekt"
});

我们同样创建了核心模块，用于存储全局筛选或组件代码，方便其他模块调用。

其他组合

本应用结构经过良好组织，根据不同逻辑组件约束业务代码。

如果我们需要添加额外状态管理，例如，Vuex 等，测试、资源文件或其他文件，可以遵循同样的规则。

译者注

原文链接
原文有删减，因译者水平有限，如有错误，欢迎留言指正交流

参考

http://pksunkara.com/posts/complex-vuejs-app-structure/
https://medium.com/m/global-identity?redirectUrl=https%3A%2F%2Fitnext.io%2Fhow-to-structure-a-vue-js-project-29e4ddc1aeeb
https://medium.com/3yourmind/large-scale-vuex-application-structures-651e44863e2f
https://vuejs.org/v2/style-guide/

如何组织大型 vue 应用

简介