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