vue族谱架构_关于Vue整体架构分析

Vue架构主要构件包括以下几个部分：

Vue.js + Webpack + Cordova

Vue 有一个官方整合Webpack包vue-cli，具体见官网。

npm install --global vue-cli

随后可以根据vue在指定目录创建项目

vue init webpack 项目名

若没有在Cordova集成的情况下，大部分我们都是根据vue-cli创建好的项目进行编码，那么当我们需要集成Cordova的时候，每次都需要进行如下编译:

//首先我们必须将vue-cli打包

npm install build

//随后将创建好的文件移动到Cordova生成的平台之下，执行以下命令

cordova build ios/android

当项目中有需要和原生系统交互的时候，每次这样做，让操作变得繁多而且开发变得极其缓慢，那么， webpack的重要性就在此体现出来了：

我们找到文件config/index.js，随后我们会发现项目创建的时候，vue已经帮我们创建好了整个架构。我们在build指令里面修改文件路径即可指定打包的路径。

更改vue改打包方式如下图所示

image.png

更改vue的package文件进行自定义指令

"ios": "npm run build && cordova run ios"

这样，我们只需要在终端输入npm run ios 即可完成打包并且运行在手机端中。

如果有经验的开发者，会提前在Cordova 里面创建vue-cli，然后直接需改路径整合整个项目。

当整个项目创建好之后，我们则会用到以下技术来搭建整个项目：

vue + webpack + vuex + vue-router + sass + ES6/7 + [axios](https://github.com/mzabriskie/axios) + cordova