摘要：
以下记录了使用vue-cli3构建应用程序项目的步骤。1、 初始化配置，运行并启动app1，安装nodeJS、git并配置环境。VueCLI3.x需要Node.js8.9或更高版本。
以下记录vue-cli 3构建app项目的步骤。
一、初始化配置，并运行启动app
1、安装nodeJS,git ,配置环境，Vue CLI 3.x 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
2、安装vue-cli ,命令：npm install -g @vue/cli
3、创建项目：vue create mapp-demo
推荐vue ui 使用图形化界面创建和管理项目
4、选择安装插件和依赖，一般babel,eslint,css预处理器，fastclick ，选择vant作为前端组件库
注意：哪些是运行依赖，哪些是开发依赖
如下图：
5、运行项目： 任务 -> serve -> 运行、启动app
6、
（1）可安装vue devtools调试工具。
（2）vue-cli 3.x 构建的项目文件目录说明
二、移动端初始化设置
（1）禁止移动端通过手指放大缩小页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
页面位置： public/index.html
（2）css reset
参考 https://meyerweb.com/eric/tools/css/reset/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
页面位置：新建文件放在 src/assets/reset.css
（3）解决部分手机屏幕1像素带来的页面样式兼容性问题
@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
position: relative;
}
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,
.border-bottomleft::after {
content: "