如何构建一个大型Vue应用程序？( 二 )

vue init webpack dingCheng_web2
cd dingCheng_web2
npm install
npm install vue-router --save
npm install vuex --save
npm i element-ui -save
npm install axios -save
npm install sass-loader node-sass --save-dev /cnpm install sass-loader node-sass --save-dev
npm install less less-loader --save-dev
npm run dev
npm run build
npm -save -save-dev 命令区别
vue-cli目录解析：

文章插图
build 文件夹：用于存放 webpack 相关配置和脚本。
config 文件夹：主要存放配置文件。用于区分开发环境、线上环境的不同。
dist 文件夹：默认 npm run build 命令打包生成的静态资源文件。用于生产部署。
node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
src: 存放项目源码及需要引用的资源文件。
src下assets：存放项目中需要用到的资源文件。css、js、images等。
src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
src下router：vue-router vue路由的配置文件。
src下api：自己配置的vue请求后台接口方法。
src下page：存在vue页面组件的文件夹。
src下utils：存放vue开发过程中一些公共的.js方法。
src下vuex：存放 vuex 为vue专门开发的状态管理器。
src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。
src下main.js：vue-cli工程的入口文件。
index.html：设置项目的一些meta头信息和提供<div id=\"app\"></div>用于挂载 vue 节点。
package.json：用于 node_modules资源部和启动、打包项目的 npm 命令管理。
推荐开发工具

文章插图
其他观点：
MVVM使Vue在中小型Web应用程序中具有天然优势。但随着Vue的日益普及。Vue在大型项目中的使用略显尴尬。
显然。在高复杂性项目中。类型检查已成为必需的特性。而TypeScript中的Vue2类型检查支持不够好。重要的是缺乏Vuex状态逻辑的模块化设计。
以下是以下提出的解决方案：
商业逻辑的模块化 -? usm-vuex将解决模块化的重要问题
TypeScript - vue-cli3
TSX - 更好的模板类型检查
依赖注入 - 最佳DI库：inversify
Subpackage - 使用lerna构建Monorepo
在lerna初始化之后。执行域驱动设计。并获得domain-driven 。如有必要。可以在启用动态导入延迟加载或诸如RequireJS之类的模块加载器的情况下进行子打包。以提高运行时性能和构建性能。
在使用Vue-cli3结构初始化核心应用程序子包时。选择TypeScript作为主要语言。它将自动引入Webpack ts-loder 。
结合TSX的视图组件模块。整体设计并基于此架构。使用TypeScript检查类型会更容易。
Vue架构的核心设计部分应该是usm-vuex 。它使Vuex的业务模块化变得简单明了。它可以使当前的架构设计具有高内聚力和与视图层的ViewModule的低耦合。
它大大提高了体系结构中的可重用性和可维护性。并且通过依赖注入使模块之间的依赖关系变得清晰易懂。当然。对于大型应用程序还有许多其他细节需要完善。本文未对此进行介绍。