超轻易利用vue-cli webpack脚手架来塑造vue项目

作者:分分快三计划

图片 1

三、创建cordova项目

使用如下命令行创建项目:
cordova create hello com.example.helloworld HelloWorld
cordova目录结构:

图片 2

cordova目录结构

后续的操作需要在项目根目录下进行,所以首选使用命令行进入到根目录。

使用如下命令添加平台并保存配置:
cordova platform add ios --save
cordova platform add android --save
成功后,platforms文件夹中会生成对应平台的工程文件:

图片 3

文件

使用如下命令进行打包:
cordova build android
这一步,有的朋友可能会出现命令无法识别,请检查自己的ANDROID_HOME环境变量是否配置,比如我的配置为:
F:adt-bundle-windows-x86_64-20130917sdk
系统变量Path也需要加上这一句:
%ANDROID_HOME%platform-tools

打包的时候很可能会卡住,原因是cordova自己去下载gradle,我们可以到..platformsandroidcordovalibbuilders文件下找到GradleBuilder.js文件将

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'http\://services.gradle.org/distributions/gradle-2.13-all.zip';

改为:

var distributionUrl = process.env['CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL'] || 'file:///C:/Users/User/Desktop/gradle-2.13-all.zip';//自己的gradle路径

这是第一篇文章的作者提出的,真是机智!
当然,这里也可以使用直接配置环境变量:
GRADLE_HOME=E:xxxxxxgradle-2.2.1//自己的gradle路径
修改后再次打包,即可生成apk。

4.4 运行项目

进入project文件夹,shift 右键,选择菜单:在此处打开命令窗口,输入命令:

C:Usersg580>project>npm run dev

执行完成:

图片 4

image.png

打开浏览器,输入地址:http://localhost:8080,先不要猴急关闭命令工具哟,因为在本地运行,关了就运行不了了。

图片 5

image.png

如果没有出现 上图的话,可能你的8080端口被占用了,可以在config/index.js中将dev中的port改为其他值。

到此,用脚手架构建vue项目结束。
学习vue.js建议还是先学习和了解一下html、css、js这些相关知识,等掌握和了解了,再来深入学习js会更好。

图片 6

一、安装node.js

直接去官网下载安装就好,注意安装时要选上npm。在cmd中输入npm -version,如果出现了版本号,那么就表明安装成功了:

图片 7

npm版本号

4.3 安装项目依赖

进入project文件夹,shift 右键,选择菜单:在此处打开命令窗口,即可打开cmd命令工具。或者直接使用命令 cd 进入project文件夹。输入命令:

C:Usersg580>project>npm install

将你需要识别的身份证图片放到根目录中,如图

写本文时距离我配置环境也过去不少时间,可能忽略了一些细节,欢迎指教和探讨,也再次感谢两篇文章的作者!

环境搭建

说一下构建vue项目的几个步骤,跟着这几个步骤搭建一下环境,构建出一个可以运行起来的vue程序,基本上就入门第一步了:

安装node.js
安装webpack
安装vue-cli脚手架构建工具
项目构建

稍等个几秒钟,在命令行中就会返回身份证图片中的各项参数。

由于接手了一个项目,里面用到了cordova,于是乎,就去研究了一下cordova。这篇博客,原创的内容不是太多,更多的是记录,因为我在配置过程中参考了以下两篇文章,图片资源也引用了不少。以下操作是基于windows。
cordova入门教程
Android培训实战教程之使用Cordova框架开发Android Hybrid App

对于前端,之前我几乎没什么兴趣,一个是不喜欢js代码风格,一个是css样式调试到吐。但是只写后台,不会点前端,也很苦逼。于是不得不挑选一款前端框架学学,又想做到前后端分离,综合之下,选了vue.

在js中加入如下代码:

二、安装cordova

在cmd中输入如下命令:
npm install -g cordova
然而,由于国内网络的原因,很难等到我们想要的结果,此时,可以切换到淘宝的npm,输入如下命令:
npm config set registry https://registry.npm.taobao.org
再输入:npm info underscore ,如果上一步无误,那么应有如下信息:

图片 8

npm 信息

重新输入第一步的安装命令进行安装。成功之后,可以使用如下命令查看cordova版本号:
cordova -v
在这一步,可能出现无法识别此命令的情况,此时,请检查node.js,npm的环境变量是否配置好了。

一、安装node.js

从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win r,然后输入cmd),输入 node -v,如下,如果出现相应的版本号,则说明安装成功。

C:Usersg580>node -v
v9.8.0

安装node.js后,就已经自带npm(包管理工具)了,查看npm版本号使用命令 npm -v,如下:

  C:Usersg580>npm -v
  v5.6.0

  百度ai 的功能很强大,基本涵盖了现在市面上所有需求的技术,身份证识别甚至文字识别只是其中一丢丢的小部分,识别功能的原理都是相同的,在熟悉node的前提下,多看看api sdk文档,都能写出来。

四、vue-cli构建项目

通过以上三步,初始的环境基本上已经搭建好了,下面就可以构建和初始化vue项目了。

var image = fs.readFileSync("./png1.png").toString("base64");
二、安装webpack

之前npm(包管理工具)已经安装成功了,后续的操作都使用npm命名来操作。
打开命令行工具输入:npm install webpack -g,-g表示全局安装,安装完成之后输入 webpack -v,如下,出现相应的版本号,则说明安装成功。

  C:Usersg580>webpack -v
  v4.1.1

同样在命令行中输入 npm -v,可以查看cmd版本,现在node集成cmd,如果照着教程来安装,node成功npm应该是成功的。

4.1 新建一个工作用于目录(我的是workplace,你随意)或者选择一个已存在的目录 用于存放项目

  对于前端初学者来说,如果要实现这种功能靠页面,js是实现不了的,可以确定地说就是让后台配合实现。实现过程是上传一张图片给后台,后台使用java,php等服务端语言来调取百度ai的sdk,获取到的参数再返回到前台页面来展示。这个接口的调用必须是服务端的,前端如果想实现,只能通过node.js来实现。

三、安装vue-cli脚手架构建工具

打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V(注意是大写的“V”),如下,出现相应的版本号,则说明安装成功。

  C:Usersg580>vue -V
  v2.9.3

 

4..2 打开命令工具,进入这个工作目录,输入命令行vue init webpack 项目名:
  C:Usersg580>workplace>vue init webpack project(项目名)

注:项目名不能大写,不能使用中文,使用上述命令初始化一个vue项目,其中webpack是构建工具,project是整个项目文件夹的名称,这个文件夹会自动生成在你的工作目录中。下面是构建过程:

$ vue init webpack project--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了project这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (project)---------------------项目的名称(默认是文件夹的名称)
? Project name project
? Project description (A Vue.js project)---------------------项目描述,可以不写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),回车默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma   Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma   Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd project)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)

构建完成,即可看见项目了,结构如下,也就是project文件下的文件:

图片 9

image.png

  以上纯属个人见解与经验,不喜勿喷,谢谢!

对于前端小白,真是不明白webpack、node.js、npm、脚手架这些玩意,用程序员的话就是前端开发环境搭建。文章以window系统做演示,linux、Mac系统基本上大同小异,好了,进入主题了。

这里的APP ID / Api Key / Secret Key  需要在百度云管理中心去申请

说实话,看官方文档,让小白引入<script src="

可以打开node_modules文件夹中,确认是否有baidu-aip-sdk文件夹

之后在这个js中继续添加功能代码,我们现在在做的是身份证识别,那么就去将身份证识别的相关代码拷入js中。

输入 npm install baidu-aip-sdk

图片 10

 

var AipOcrClient = require("baidu-aip-sdk").ocr;

// 设置APPID/AK/SK
var APP_ID = "你的 App ID";
var API_KEY = "你的 Api Key";
var SECRET_KEY = "你的 Secret Key";

// 新建一个对象,建议只保存一个对象调用服务接口
var client = new AipOcrClient(APP_ID, API_KEY, SECRET_KEY);

这样的话,功能就算是搭建好了。

  身份证识别是文字识别的一种,类似的功能有很多比如驾驶证识别等等,原理都是相同的。

这个js就是图像识别的node客户端,用来提供一系列交互方法的地方。

图片 11

  图片 12

  

  那么下面就具体说明一下整个流程:

 

图片 13


在根目录打开命令行,输入 node start.js

安装之后,在cmd命令行中输入 node -v,如果返回版本号,证明安装成功。

  

  先找到项目根目录或者新建一个文件夹作为根目录

  首先需要对node进行下载安装,node的安装教程在官网或者菜鸟教程中有明确的实例。

var fs = require('fs');

var image = fs.readFileSync("你的身份证路径").toString("base64");
var idCardSide = "front";

// 调用身份证识别
client.idcard(image, idCardSide).then(function(result) {
    console.log(JSON.stringify(result));
}).catch(function(err) {
    // 如果发生网络错误
    console.log(err);
});

 

将js中的身份证路径改成图片路径 ,例如

 

 

  好啦,这里只是提供了node调用百度ai,身份证识别的一种思路,在项目实现过程中,如果整个项目并没有使用到node,就交给后端人员实现这个功能,就算用了node,推荐也让后台人员实现...毕竟前端大佬们的时间可是很宝贵的。

  在该目录下运行cmd命令行,如果对命令行操作不是太好的童鞋,可以在当前文件夹 Shift 右键 右键菜单中就会增加在此处打开命令窗口的选项

图片 14


图片 15

图片 16

 

等候安装完成之后目录中会新增这样的一个文件夹和一个.json格式文件

  最近项目中客户需要实现身份证识别功能,合理计划了之后决定使用百度ai的身份证识别。

 

 

1.node

4.调用

图片 17

2.项目搭建

新建一个js文件在根目录下,如图

安装百度的组件有两种方式,一种是通过去百度ai下载baidu-aip-SDK,另一种是通过命令行直接安装baidu-aip-SDK的包,这里一切从简,通过命令行安装:

3.功能代码

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 vue.js2.0 Android之路