为什么80%的码农都做不了架构师?>>>
首先开发环境需要node.js支持。到官网下载安装即可。
接着直接开始搭建项目。
1、使用npm安装cordova。
npm i -g corvate
2、安装vue-cli,vue创建项目脚手架
npm i -g vue-cli
3、使用Cordova创建一个cordova项目
cordova create 目录名称 com.xxx 项目名
使用create命令创建
生成目录结构如下:
hooks
platforms #平台目录;放android、ios等项目
plugins #插件目录
res #资源文件
www #web文件目录
.gitignore
.npmignore
config.xml #配置文件
package.json
4、下载项目依赖;下载的依赖会放在根目录下node_modules文件夹下
npm install
5、在cordova根目录下使用vue-cli创建一个vue项目。
vue init webpack vue
这里我创建了一个目录叫vue的vue项目;
目录结构如下:
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── index.html // 项目入口文件
├── package.json // 项目配置文件
├── src // 生产目录
│ ├── assets // 图片资源
│ ├── common // 公共的css js 资源
│ ├── components // 各种组件
│ ├── views // 各种视图
│ ├── App.vue // 主页面
│ ├── vuex // vuex状态管理器
│ ├── router.js // 路由配置器
│ └── main.js // Webpack 预编译入口
6、进入vue目录中下载依赖
cd vue
npm install
7、修改vue项目打包输出目录。需要把结果输出到cordova根目录下www文件夹下。
修改vue根目录下config/index.js文件;index、assetsRoot、assetsPublicPath修改如下。
module.exports = {
build: {
env: require('./prod.env'),
// index: path.resolve(__dirname, '../dist/index.html'),
// assetsRoot: path.resolve(__dirname, '../dist'),
// assetsPublicPath: '/',
index: path.resolve(__dirname, '../../www/index.html'),
assetsRoot: path.resolve(__dirname, '../../www'),
assetsPublicPath: '',
assetsSubDirectory: 'static',
productionSourceMap: true,
8、使用vue-cordova插件完成vue项目与cordova整合。
# 下载vue-cordova
npm i vue-cordova
9、在src/main.js中引入vue-cordova。
import VueCordova from 'vue-cordova';
Vue.use(VueCordova, {
optionTestKey: 'optionTestValue'
});
10、打包vue项目
npm run build
11、回到cordova根目录,之前还没创建android项目相关;创建android平台代码;
cd ../
cordova platform add android
12、打包cordova项目;打完包会在 platforms\android\build\outputs\apk目录下生成包
cordova build android
# cordova还可以直接调试;
cordova run android
现在就可以使用手机安装app,看看效果了。