2019-04-12 10:20:00 dikong9237 阅读数 2
  • VUE构建工具

    随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员过渡到vue 2.0上,后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。

    12783 人正在学习 去看看 姜威

使用cordova+vue打包webapp,可以快速给网页套上一个android和ios壳子,完成一个app的开发。

1. 环境准备。

(1)node.js

(2)java环境,jdk安装和环境变量配置。
 本次安装版本:jdk1.8.0_201
(3)android SDK
  下载地址:http://tools.android-studio.org/index.php/

步骤:

  1.将文件解压到 D:\Android\Android-SDK;

  2.添加系统环境变量。ANDROID_HOME:D:\Android\Android-SDK,path增加%ANDROID_HOME%\tools\bin  和  %ANDROID_HOME%\tools。

  3.dos进入D:\Android\Android-SDK目录,安装android api 版本。

  sdkmanager "platform-tools" "platforms;android-28"
sdkmanager "build-tools;28.0.0"
(4)安装gradle
 下载地址: http://services.gradle.org/distributions/


步骤:
  1.将文件解压到D:\Gradle\gradle-5.3.1;
  2.添加环境变量 GRADLE_HOME:D:\Gradle\gradle-5.3.1,path增加 D:\Gradle\gradle-5.3.1\bin。
  3.到站点任意目录运行 gradle -v,检查gradle是否安装成功。
(5)安装cordova。
运行命令:npm install -g cordova,通过输入cordova -v查看版本号,检验是否安装成功.

2.打包。
(1)创建cordova项目.
  1.dos进入对应目录,如(D:\Cordova),运行cordova create cordova-test,注意路径中不能有中文字符。
  运行生成目录:
  
  2.添加平台,按需安装。
  cordova platform add android --save    安卓平台
   cordova platform add ios --save    ios平台
  
  cordova platform add browser --save 浏览器
  3. 运行命令。
  cordova build android(ios) 生成打包文件,文件路径:platforms → android → app → build → outputs → apk → debug
  cordova run android(
browser, ios) 调试运行
(2)配置vue项目。
  1.复制vue项目文件到
D:\Cordova下。
  2.修改vue配置文件。
   first: 文件路径 config\index.js  
    

   修改build 下配置。
  
     
index: path.resolve(__dirname, '../../cordova-test/www/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../../cordova-test/www'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',
View Code

 

    second: 修改build/utils.js.

 if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        //新增
        publicPath: '../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
View Code

  3.打包。

  1. 打包vue。到D:\Cordova\vueProject,运行 npm run build,文件会出现在cordova项目的www文件夹下。

  2.生成apk文件。到D:\Cordova\cordova-test,运行 cordova build android。

  4.完成。

  在app上安装apk文件。



 

 



 
 

  
 

 

 

 

 
 

 

转载于:https://www.cnblogs.com/heshuaiblog/p/10694386.html

2018-06-20 10:26:42 brake_lzk 阅读数 3398
  • VUE构建工具

    随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员过渡到vue 2.0上,后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。

    12783 人正在学习 去看看 姜威

项目启动

npm install

npm start

Npm run build//打包

将打包好的dist文件放到hbuilder中转换成app

文件位置:My文件夹中的changePhoto.vue

 

// 利用html5+api 调用摄像头和相册 图片展示

<template>

<div class="mui-content">

<button @click="galleryImg">从相册选取</button>

<button @click="captureImage">拍照</button>

<div class="imgBox">

<img :src="imgSrc">

</div>

</div>

</template>

 

<script>

export default{

data(){

return{

imgSrc:''//展示的图片路径

}

},

methods:{

// 从相册中选取图片

galleryImg(){

let This=this

console.log("从相册中选择图片:");

plus.gallery.pick( function(path){//从相册中选择图片

This.imgSrc=path

     alert(path);

}, function ( e ) {//取消选择图片

     console.log( "取消选择图片" );

}, {filter:"image"} );

},

// 拍照

captureImage(){

let This=this

var cmr = plus.camera.getCamera();//获取摄像头管理对象

     var res = cmr.supportedImageResolutions[0];//字符串数组,摄像头支持的拍照分辨率

     var fmt = cmr.supportedImageFormats[0];//字符串数组,摄像头支持的拍照文件格式

     console.log("拍照分辨率: "+res+", 拍照文件格式: "+fmt);

     cmr.captureImage( function( path ){//进行拍照操作

// 通过URL参数获取目录对象或文件对象

plus.io.resolveLocalFileSystemURL(path, function(entry) {

var tmpPath= entry.toLocalURL();//获取目录路径转换为本地路径URL地址

This.imgSrc=tmpPath

alert( "拍摄成功: " + tmpPath)

})

         },

         function( error ) {//捕获图像失败回调

             alert( "捕获图像失败: " + error.message );

         },

         {resolution:res,format:fmt}

     );

}

}

}

</script>

 

<style scoped>

.imgBox{

width: 450px;

height:400px;

}

.imgBox img{

width: 100%;

height: 100%;

}

</style>

 

 


2018-06-07 16:40:27 qq_31883963 阅读数 772
  • VUE构建工具

    随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员过渡到vue 2.0上,后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。

    12783 人正在学习 去看看 姜威

    在vue通过手脚架创建的项目打包后,里面用到的ElementUI图标和iView图标都显示成了一个×的样式,这个明显影响了美观。

    本人的项目通过修改webpack.base.conf.js文件配置,解决了


文件下面的10000改成80000。


2018-06-13 14:48:18 brake_lzk 阅读数 11897
  • VUE构建工具

    随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员过渡到vue 2.0上,后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。

    12783 人正在学习 去看看 姜威

项目启动

npm install

npm start

npm run build//打包

将打包好的dist文件放到hbuilder中转换成app


 

<template>
<div>
  <topbar title="扫码">
    <router-link to="/home" slot="left" @click.native='cancelScan' class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></router-link>
  </topbar>
<div class="mui-content">
<div class="scan">
<div id="bcid">
<div class="content"></div>
<p class="tip">...载入中...</p>
</div>
<footer>
<button @click="startScan" v-show="isShow">点击扫描</button>
<button @click="cancelScan">取消</button>
</footer>
</div>
</div>
</div>
</template>

<script type='text/ecmascript-6'>

let scan = null;
//点手机虚拟返回键
document.addEventListener("plusready", function() {
// 注册返回按键事件
plus.key.addEventListener('backbutton', function() {
// 事件处理
scan.close();//关闭条码识别控件
window.history.back();
}, false);
});
  export default{
data(){
return{
codeUrl: '',
isShow:true
}
},
components:{
topbar
},
mounted () {
this.startScan()//进入页面就调取扫一扫
},
created(){
this.startRecognize();
this.startScan();
},
methods: {
//创建扫描控件
startRecognize() {
let that = this;
if (!window.plus) return;
that.isShow=false;
// 创建条码扫描识别控件
scan = new plus.barcode.Barcode('bcid');
// 条码识别成功
scan.onmarked = onmarked;
function onmarked(type, result, file) {
switch (type) {
case plus.barcode.QR:
type = 'QR';
break;
case plus.barcode.EAN13:
type = 'EAN13';
break;
case plus.barcode.EAN8:
type = 'EAN8';
break;
default:
type = '其它' + type;
break;
}
result = result.replace(/\n/g, '');
that.codeUrl = result;//扫描后返回值
alert(result);
scan.cancel();//关闭扫描
scan.close();//关闭条码识别控件
if(that.codeUrl){
that.isShow=true
}
}
},
//开始扫描
startScan() {
if (!window.plus) return;
this.startRecognize()//创建控件
scan.start();
},

cancelScan(){
this.isShow=true;
scan.cancel();//关闭扫描
scan.close();//关闭条码识别控件
}
}
  };
</script>
<style scoped>
.mui-content{
padding: 44px 0 60px 0;/*px*/
box-sizing: border-box;
margin-top: 60px;/*px*/
}
.scan {
height: 100%;
}
.scan #bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 50px;/*px*/
bottom:3rem;
text-align: center;
color: #fff;
background: #ccc;
}
.scan footer {
position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 1rem;
width: 100%;
height: 1rem;
/*line-height: 2rem;*/
z-index: 2;
display: flex;
justify-content: center;
}
.scan footer button{
width: 45%;
font-size: 30px;/*px*/
}
.clickBtn,.cancelBtn{
margin-top:20px;/*px*/
width: 150px;/*px*/
height: 60px;/*px*/
text-align: center;;
}
.cancelBtn{
margin-left: 20px;/*px*/
}
</style>


2018-09-07 15:48:24 weixin_33816611 阅读数 72
  • VUE构建工具

    随着vue2.0的发布,本课程以 vue1.0 和 webpack 为基础,主要讲解项目的构建的,涉及到的vue-router和vuex,课程中带领帮助学员过渡到vue 2.0上,后一个商业实战源码的案例分析。课程紧凑,严密,风趣幽默。

    12783 人正在学习 去看看 姜威

一、vue源码的设置
1)src中关于router的配置 model:'history' 要去掉,即地址栏中保留“#”。
2)config的index关于build的配置 assetsPublicPath:'./' 注意要加点。
如果上面两项没设置对,那么,打包出来的webapp是空白的,呵呵。

二、Hbuilder打包安卓的过程
1)打开目录,选择vue里面npm run build生成的dist目录。
2)右击该目录,"转换成移动APP",目录树中的图标从 W 变成 A。
3)目录树中出现 manifest.json ,双击,配置(如基本信息、图标配置、启动图片等等),保存。
4)“发行”--“云打包-打原生安装包”,提交打包任务(为了用户体验,去掉广告。选安卓证书)。
5)把产生的apk 文件分发。
在目录树中选中index.html,然后 “运行”--“浏览器运行” 即可,这样可以在chrome中去调试代码。

如果是纯粹的移动端web,没有涉及到设备,打包一个安卓基本上就结束了。

转载于:https://blog.51cto.com/44855/2171678

没有更多推荐了,返回首页