以下记录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）禁止移动端通过手指放大缩小页面

  页面位置： public/index.html  

（2）css reset

参考 https://meyerweb.com/eric/tools/css/reset/

页面位置：新建文件放在  src/assets/reset.css

（3）解决部分手机屏幕1像素带来的页面样式兼容性问题

页面位置：新建文件放在  src/assets/border1px.css

（4）为避免浏览器兼容问题引起的点击问题（部分浏览器对点击事件有300毫秒的延迟响应机制）

解决办法：

1）先安装依赖 Fastclick （界面操作方式->搜索依赖Fastclick并安装  ； 或者 命令方式安装  ）

注意：是Fastclick运行依赖

2）页面位置：src/main.js文件中，加入以下代码

（5）vant相关引入

1）自动按需引入组件 （或者界面搜索依赖 babel-plugin-import并安装）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    [‘import‘, {
      libraryName: ‘vant‘,
      libraryDirectory: ‘es‘,
      style: true
    }, ‘vant‘]
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from ‘vant‘;

2）iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

页面位置：public/index.html

3）rem适配  （注意：如果只是用px，不需配置此步骤）

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

然后，需要进行PostCSS配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改

module.exports = {
  plugins: {
    ‘autoprefixer‘: {
      browsers: [‘Android >= 4.0‘, ‘iOS >= 7‘]
    },
    ‘postcss-pxtorem‘: {
      rootValue: 37.5,
      propList: [‘*‘]
    }
  }
}

注意：在配置 postcss-loader 时，应避免 ignore node_modules 目录，这会导致 Vant 的样式无法被编译

4）同一台机器运行多个vue项目，修改vue.config.js中端口号的设置

module.exports = {

......其他设置项
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: ‘0.0.0.0‘,
port: 3000, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
}
};

============写在最后====================================================================================================

【注意事项】

在界面模式下安装依赖的时候，要选择运行依赖还是开发依赖。

问题：原先vant和fastclick都是运行依赖安装好了，后来安装babel-plugin-import需选择开发依赖，但是会改变了vant和fastclick为开发依赖。后来卸载重装了好几次，，觉得界面选择的时候，存在bug吧。

如果还是界面模式下，建议先安装好开发依赖babel-plugin-import，然后选择运行依赖切换按钮下的vant和fastclick，点击安装前也再点击 运行依赖的切换按钮，以保证安装的是运行依赖。

vue-构建app项目