关于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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容