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

  • Post author:
  • Post category: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



版权声明:本文为weixin_39915668原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。