一、Cordova创建应用

cordova create oneApp

Vue-cli是官方推荐的快速构建单页应用的脚手架。官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack、npm、nodejs等等,很容易成就从入门到放弃的思想。这篇文章本身就是按照官方的文档中的构建流程来的(官方构建建议)。一下是构建过程。

Cordova创建应用出错

Cordova安装时不能使用cnpm
应该使用npm,cnpm虽然快但是后期出的错绝对比这省下来的时间多得多。

正确安装方法

npm install -g cordova

或

npm install -g cordova --registry=https://registry.npm.taobao.org

npm install -g cordova 报错ENOENT: no such file or directory

原因是之前下载安装失败时,生成了node_modul文件夹,全部删除重新下载安装就ok啦

一、 安装 node.js

二、vue创建应用

1、创建一个基于webpack模板的新项目(在上面Cordova项目目录里创建)

$ vue init webpack oneApp(名字可以和上面工程一样)

$ cd oneApp

$ npm install

$ npm run dev

创建完成之后的项目目录

银河国际平台官方网站 1

2、修改Vue项目config/index.js文件

'use strict'
module.exports = {
  build: {
    index: path.resolve(__dirname, '../../www/index.html'),
    assetsRoot: path.resolve(__dirname, '../../www'),
    assetsPublicPath: '',
 }
}

银河国际平台官方网站,首先需要安装node环境,可以直接到中文官网下载安装包。

三、打包编译

1、对Vue工程进行build,编译之后打包生成的代码自动跑到主目录下的WWW文件下
cd 到Vue的MyApp目录下,执行npm run
build

2、对cordova进行各种平台进行编译
cd到 主目录下,执行 cordova build
iOS、cordova build Android等。

ps:自己原来是使用Cordova+Ionic,刚刚开始用Cordova+vue,所以走了很多坑。如果有什么问题欢迎在下面评论。

安装完成后,可以命令行工具中输入node -v和npm
-v,如果能显示出版本号,就说明安装成功。

银河国际平台官方网站 2

二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

因为各种不可描述的原因,使用npm安装会很慢,而且很容易出错,所以推荐使用cnpm来安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功后,使用 cnpm 安装 vue-cli 和 webpack。

cnpm install -g vue-cli

安装完成后,可以使用vue -V 查看是否安装成功。

银河国际平台官方网站 3

三、生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-demo

其中 webpack 是模板名称,Vue-demo
是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹。

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli
创建的一个基于 webpack 的 vue.js 项目

然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

然后启动项目

npm run dev

四、打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后,可以输入npm run build 来进行打包工作

npm run build

打包完成后,会生成 dist
文件夹,如果已经修改了文件路径,可以直接打开本地文件查看

项目上线时,只需要将 dist 文件夹放到服务器就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • node
    vue项目开发之前后端分离实战记录
  • Vue2.0如何发布项目实战
  • 详解vue项目构建与实战
  • vue项目实战总结篇