用Cordova打包Vue项目入门教程_Cordova小白帮助

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:第一步:安装cordova,创建好cordova项目。第二

用Cordova打包Vue项目入门教程

现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app。
现在的打包Vue项目目前流行的就是使用weex和cordova。weex是阿里提供并且Vue的作者也极力推荐的,有兴趣的可以去学习使用一下。下面说说怎么使用cordova打包Vue项目:

用Cordova打包Vue项目入门教程_Cordova小白帮助

第一步:安装cordova,创建好cordova项目。

第二步:修改vue项目

首先修改vue项目的index.html,引入cordova.js。这个引入在浏览器打开会报错。要打包后运行在真机后方可看到效果

<body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>

然后修改src中的main.js为以下代码

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
document.addEventListener('deviceready', function() {
    new Vue({
        el: '#app',
        router,
        store,
        template: '<App/>',
        components: { App }
    })
    window.navigator.splashscreen.hide()
}, false);

最后修改config文件夹中的index.js文件,修改build中的

assetsSubDirectory: 'static',
assetsPublicPath: '/',

assetsSubDirectory: '',
assetsPublicPath: '',

第三步:运行

看看是否能够运行起来,如果正常说明到这里是没有问题的(注意这里运行的时候需要将document.addEventListener注释,
因为在浏览器环境下是找不到cordova.js的也就不能监听到deviceready的事件,打包在真机上才能实现监听)。

第四步:将vue打包好的文件放到cordova项目中并打包cordova run android,会生成一个可执行的apk文件,也可以直接在真机上运行。安装即可。

友情提示:

如果vue项目在运行npm run dev或者npm run build的时候遇到问题一般不是代码出错的话可以将node_modules文件夹删除使用npm install安装。
如果是因为eslint导致代码检查不通过的话,可以将Vue项目的build文件夹下的webpack.base.config文件中的rules

        {
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('src'), resolve('test')],
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        },

这段代码注释即可。

来自:https://segmentfault.com/a/1190000018087837

海计划公众号
(0)
上一篇 2020/03/31 01:59
下一篇 2020/03/31 01:59

您可能感兴趣的内容

  • Bootstrap Table含有按钮时表格不对齐基础知识教程_表格小白常识

    使用Bootstrap Table的时候,在含有按钮的情况,有时候表格的线垂直方向上不对齐解决方法:(1)调整表格的高度小些或者大些(至于为什么,并不清楚,调整高度后就对齐了)(2)加setTimeout$(‘#tableTest1’).bootstrapTable({// method: “POST”,// contentType: “applicatio

    2020/03/24
  • css中border-style 属性小白知识_属性小白入门

    border-style 属性用于设置元素所有边框的样式,或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。例子 1border-style:dotted solid double dashed;上边框是点状右边框是实线下边框是双线左边框是虚线例子 2border-style:dotted solid double;上边框是点状右边

    2020/03/24
  • JavaScript中表达式和语句的区别是什么?使用帮助_语句使用帮助

    JavaScript中表达式是由运算符构成,并运算产生结果的语法结构。语句则是由“;(分号)”分隔的句子或命令。一、表达式:表达式是由运算符构成,并运算产生结果的语法结构。一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如,作为一个函数调用的参数。以下例子就是表达式:a=35;
    b=1+a;a=function (){return 6};
    b=1+

    2020/03/22
  • clndr.js菜鸟攻略_一个jquery日历插件

    clndr.js菜鸟攻略 官方网址:http://kylestetz.github.io/CLNDR/ GitHub:https://github.com/kylestetz/CL…

    2020/03/06
  • 闭包原理及题型基础教程_闭包菜鸟教程网

    闭包原理及题型基础教程 闭包 函数被调用之后,会创建一个执行环境及作用域链.函数被执行完之后就会被释放掉.闭包函数执行之后会保留当前活动变量在内部函数作用域链中,所以内部函数可以访…

    2020/03/19
  • 女生学ui还是前端好?菜鸟攻略_学习使用指南

    UI设计和Web前端都是当今比较火爆的互联网热门岗位,市场需求量很大,薪资待遇较高,自然引来越来越多人的学习。但是学习IT培训的学员们总是很犯难,对于女生而言:到底是学UI设计好,还是Web前端好?下面我们看一看专家是怎么说的。UI设计根据这三方面来展开学习:1平面设计在达内UI设计培训第一阶段学习,主要针对零设计基础学员设置(有基础的学员可申请跳过)学习内

    2020/03/29
  • Zombie.js新手入门_node.js环境下,Web自动化测试

    Zombie.js新手入门 官方网址:http://zombie.js.org/ GitHub:https://github.com/assaf/zombie 简介描述:node….

    2020/03/06
  • relax小白基础_基于 React 和 Node.js 的下一代 CMS 系统

    relax小白基础 GitHub:https://github.com/relax/relax 简介描述:基于 React 和 Node.js 的下一代 CMS 系统 Relax是…

    2020/03/06
  • 程序员涨工资加薪技巧小白攻略IT工程师到底该如何提加薪?_IT指南教程

    作为一名IT工程师,我们工作中最关注的就是自己能力的提升,待遇的提升。你的待遇是否令自己满意,你是否提出过涨工资?如果你从来没有或很少提出过涨工资,那么不用急,因为你并不孤单。经研究表明:89%的人认为他应该加薪,而这些人中,只有54%的人提出过加薪,13% 的人宁愿重新去找工作,33%的人还在默默的付出。工资待遇影响着我们的生活质量,是我们最关心的事。那么

    2020/04/03
  • Js继承总结使用教程_继承入门百科

    原型链当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。如果让原型对象指向另一个类型的实例…..有趣的事情便发生了.即: Person.prototype = animal2鉴于上述游戏规则生效,如果试图引用Person构造的实例person1的某个属性:1).首先会在instance1

    2020/03/24
  • AngularJS-Learning基础知识教程_AngularJS的学习资源

    AngularJS-Learning基础知识教程 GitHub:https://github.com/jmcunningham/AngularJS-Learning 简介描述:An…

    2020/03/11
  • jQuery-Knob使用帮助_生成超酷的旋钮特效的jquery插件

    jQuery-Knob使用帮助 官方网址:http://anthonyterrien.com/knob/ GitHub:https://github.com/aterrien/jQ…

    2020/03/06
  • 面试官:怎么优化 SQL?入门基础知识_面试教程视频

    在面试的环节中,面试官问到:你是如何设计你的表结构的,画一下E-R图?接着又继续深挖,如果有慢查询,你是如何优化你的sql的?今天,我就来和大家讲讲要怎么回答这道问题。首先,我们要稳住不要慌,自己是自己亲手做的项目,第一个问题应该都不大,第二个问题就需要在面试之前做好充分的准备啦…在回答问题之前先要了解查询的流程:查询是由一系列的子任务组成的,包括从客户端,

    2020/03/24
  • 如何将React Native 项目运行在 Web 浏览器上面基础入门_跨平台基础知识

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。但是 React Native 的代码只兼容两个平台(iOS 和 Android),并没有兼容 Web 端访问。这里是因为 Facebook 开发人员认为 Web 端天生兼容性就巨麻烦,而

    2020/04/05
  • 使用Vuex解决Vue中的身份验证小白入门_vuex小白基础

    传统方式中,许多人使用本地存储,来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式,来管理验证tokens,从而允许我们来存储更大的用户信息。这就是Vuex的作用。 Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说,它被当做中央存储,并用规则确保状态只能以可预见的方式改变。对于经常检查本地存储来说,听起来是个更好的选择?让我们

    2020/04/03
  • ReLaXed使用指南_使用Web技术创建PDF文档

    ReLaXed使用指南 GitHub:https://github.com/RelaxedJS/ReLaXed 简介描述:使用Web技术创建PDF文档 ReLaXed使用HTML或…

    2020/03/07