一、新建vue项目
1.打开cmd命令,输入:npm i -g npm
这个命令类似用npm自身来install自己,即升级npm
2.再输入:npm install -g vue-cli
这个命令是用npm全局安装vue-cli。
vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。
当然首先你的安装vue,webpack,node等一些必要的环境。
3.再输入:vue init webpack vue-app
初始化新建项目,这里vue-app是项目名,按照它的提示,一步步输入项目相关信息。
项目初始化完成后
按照它的提示
首先:cd vue-app (进入项目文件夹)
然后:npm run dev(运行项目)
运行结束:
此时打开浏览器,输入:localhost:8080 ,看到下面界面则成功启动
此时要想结束运行,在命令行中按ctrl+c ,再输入Y确认,即可关闭。
4.打包项目
输入:npm run build
也可以使用:npm run build --report
后者会提示一个网址
打开这个网址:
5.打包之后
打包之后的文件会放在项目根路径下得到dist里面
二.新建cordova项目
打包好的vue H5项目需要使用cordova来打包成Android项目,支持跨域。
1.新建cordova项目
先:npm install -g cordova
全局安装cordova
再:cordova create cordova-app com.ysh mapp
创建一个cordova项目,名称是mapp,包名是com.ysh,项目名是cordova-app
2.复制和替换
将上面的vue项目中的dist目录下的文件全部拷贝到cordova项目得到www目录下
3.进入cordova项目
输入:cd cordova-app
4.打包android
输入:cordova platforms add android --save
这一步完成后,在项目platforms文件夹下会发现多了Android文件夹
三、打包apk
1.打开webstorm,选择打开,找到cordova项目的路径,选择打开
2.点击webstorm下的Terminal,输入:cordova build android --release
打包完成后会提示apk的输出目录:
找到此目录:
这是在调试环境下的apk,如果是正式环境,还得需要生成签名、添加签名等。