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

试试语音读文章

热门回答：

vue-cli 3.0环境开发。在安装vue之前我们需要安装node环境。这个我们只要在node官方下载node绿色免安装版。然后再配置下环境变量即可使用node和npm了。

将node所在目录配置到电脑的环境变量中就可以使用了。这里我的目录是D:\Program Files\node-v10.8.0-win-x86。这里我们只要打开电脑-属性-系统设定-进阶-环境变量中奖该路径添加到path中即可。 快捷键“win+r ”打开运行框。输入cmd在弹出的窗口中输入node -v 检查node.js是否安装成功。

这里我们配置淘宝的镜像源。这里设置永久的输入命令：npm config set registry https://registry.npm.taobao.org/

// 临时 npm --registry https://registry.npm.taobao.org install express // 永久 npm config set registry https://registry.npm.taobao.org // 验证是否成功 npm config get registry

现在我们可以开始来搭建vue-cli 3.0环境了。输入命令：npm install -g @vue/cli 安装vue3.0（-g： 指全局安装）,快捷键“win+r ”打开运行框。输入cmd在弹出的窗口中输入vue -V（大写的V哦）来 检查vue是否安装成功。

npm install -g @vue/cli

接下来我们继续创建vue项目 。vue3.0和2.0有点区别。不用在装webpack了。直接使用命令：vue create project创建项目（project为项目名）。进入项目配置。这里选择Manually select features（翻译：手动选择功能）。

进入下一个安装配置选择。这里根据项目情况自行选择配置。按上下键切换目标选项。按空格键勾选和取消。按a全选。按i反选。选好后回车确定（以下是几个选项的相关意义）。图中是我的选择。

Babel：指转译成浏览器可识别的语言。可以让你的项目支持更新的语法。如es6\es7等 TypeScript：新增的选项卡 Progressive Web App (PWA) Support：指模拟原生app Router：路由管理 Vuex：vuex管理模式 CSS Pre-processors：css预处理语言 Linter / Formatter：代码规范 Unit Testing：组件单元测试 E2E Testing：端对端测试。模拟用户真实场景

接下来提示我们选择是否使用历史路由：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,我们输入Y同意即可。然后就是选择CSS预处理器语言。在弹出的选项中我选择LESS

选择ESLint的代码规范。此处使用 Standard代码规范。这里我选择了ESLint + Standard config（正常模式）

ESLint with error prevention only: 只进行报错提醒； ESLint + Airbnb conf: 不严谨模式； ESLint + Standard config: 正常模式； ESLint + Prettier: 严格模式；

接着选择代码检查方式。这里提示我们何时对进行代码检测。我选择在保存时进行检测。Lint and fix on commit（requires Git）【翻译：整理并固定提交时（需要git）】

接着选择单元测试解决方案。这里选择 我Jest

接着选择 Babel、PostCSS、ESLint等配置文件存放位置。第一个保存配置文件中。第二个放package.json里。这里我选择单独保存在各自的配置文件中。

接着提示是否在以后的项目中使用以上配置。这里我们选择no。下次自行配置。你也可以选择yes。

完成以上信息配置之后开始创建项目并开始下载依赖。我们只要耐心等待进度条完成。这样我们就把Vue项目创建好并完成了初始化。

其他观点：

npm install vue / cnpm install vue

npm install --global vue-cli / cnpm install --global vue-cli

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的低耦合。

它大大提高了体系结构中的可重用性和可维护性。并且通过依赖注入使模块之间的依赖关系变得清晰易懂。当然。对于大型应用程序还有许多其他细节需要完善。本文未对此进行介绍。

• 想开个店,开什么好呢？资金不多,刚刚创业。谢谢？
• 有什么行业适用于初创业？
• 刚入社会的人想开店,最好开一家什么店？
• 我是一个创业小白,想要开一家店铺,大家有什么好的推荐吗？
• 初次创业,有什么好的建议,请高人指点下？

以上就是由互联网推广工程师 网创网 整理编辑的，如果觉得有帮助欢迎收藏转发~