基于vuecli3构建一个快速开发h5 APP的模板

基于vuecli3构建的一个快速开发h5 APP的模板，集成了高德地图、mint-ui，以及antv-f2可视化框架

vue-cli3安装

1. 查看vue cli版本 vue --version

2. 要求nodejs版本8.9以上

3. 如安装了旧版，使用npm uninstall vue-cli -g卸载旧版本

4. 安装vue-cli3.0
   npm install -g @vue/cli

创建项目

1. vue create hello-world

2. 选择安装配置选项

◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing


 ? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files

配置选项说明
css预编译使用Sass/SCSS
代码检查使用 Standard 保存时检查 Lint on save
单元测试工具 Jest
Babel, PostCSS, ESLint配置文件单独保存到配置文件中

3. 项目运行及打包

npm run serve

npm run build

添加插件

在项目中添加插件使用vue add，如:vue add axios

vue.config.js配置文件

https://cli.vuejs.org/zh/config/#全局-cli-配置

3.0和2.0不同的是，webpack相关的配置文件都被隐藏了，如果需要配置，则通过vue.config.js来配置

根目录下新建vue.config.js文件，进行相关配置

module.exports={
  
}

使用vw方案手机屏幕适配

1. 安装相关依赖

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url --S

2. 在postcss.config.js文件中添加如下配置

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // (Number) The width of the viewport.
      viewportHeight: 1334, // (Number) The height of the viewport.
      unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
      viewportUnit: 'vw', // (String) Expected units.
      selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
      minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
      mediaQuery: false // (Boolean) Allow px to be converted in media queries.
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    },
  }
}

vue-router

1. 查询url参数

    this.wxcode = this.$route.query.code;

2. 路由跳转

    this.$router.push({
              path: '/home'
          })

3. 路由传参数 path方式

this.$router.push({path: `/track/${this.curChildId}`})

路由设置

{
      path:'/track/:cid',
      name: 'track',
      meta: {
        title: '历史轨迹'
      },
      component: () => import('@/pages/entry/track.vue')
  }

获取参数

  let cid = this.$route.params.cid;

vue定义过滤器的两种方式

1、在组件选项中定义本地的过滤器

filters: {
    acceptFormat: function (value) {
      if(value==0){
        return '待授权'
      }else if(value==1){
        return '已授权'
      }
      return ''
    }
  }

使用

  <div>{{acceptStatus | acceptFormat}}</div>

2、全局定义过滤器

新建filters.js文件，添加filter过滤器

/**
 * 授权状态
 * @param {*} value 
 */
export function acceptFormat(value) {
  if (value == 0) {
    return '待授权'
  } else if (value == 1) {
    return '已授权'
  }
  return ''
}

在main,js文件中全局注册定义的过滤器

// register filters
Object.keys(filters).forEach(k => {
  console.log('k', k, filters[k])
  Vue.filter(k, filters[k])
})

这样我们就可以在所有组件中使用了，不用单独在每个组件中重复定义

<div>{{acceptStatus | acceptFormat}}</div>

配置路由按需加载

const EntryIndex = () => import('@/pages/entry/Index.vue')
const StatisticsIndex = () => import('@/pages/statistics/Index.vue')
const MineIndex = () => import('@/pages/mine/Index.vue')
const router = new Router({
mode: 'history',
  base: process.env.BASE_URL,
  routes:[
      {
        name: 'home',
        path: 'home',
        component: EntryIndex
      }, {
        name: 'statistics',
        path: 'statistics',
        component: StatisticsIndex
      }, {
        name: 'mine',
        path: 'mine',
        component: MineIndex
      }
    ]
})

vuecli3.x配置环境变量

在cli2.x中会有build和config两个文件夹 ，其中config下面就是用来配置不同环境下的环境变量，例如开发、测试、生产环境等

但在cli3.x中发现没有这两个文件夹，那该如何配置环境变量 ？

查看cli3.0文档 https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

在项目根目录下新建以下文件

.env
.env.local  // .local 在所有的环境中被载入，但会被 git 忽略
.env.development
.env.production

然后在文件中设置 ”键=值“ 的形式

例如 VUE_APP_SECRET=secret

如果我们在应用中使用环境变量 ，那么在.env中必须设置以VUE_APP_开头的健=值，否则无法访问到，而在webpack中可以正常使用
process.env.VUE_APP_SECRET

vue cli一般会有三个模式
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit

集成mint-ui移动端ui框架

饿了么出品 http://mint-ui.github.io/docs/#/zh-cn2/quickstart

npm i mint-ui -S

1、全部引入

然后在main.js中引入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

2、按需引入

按需引入需要借助 babel-plugin-component插件，这样可以只引入需要的组件，以达到减小项目体积的目的

npm install babel-plugin-component -D

axios基本用法

1、axios get请求

Vue.axios.get('/api/get', {
          params: {
            name: '',
            age: 45
          }
        }).then((response) => {
        }).catch((error) => {
        });

2、axios post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、合并请求,同时执行多个请求

axios.all([

    axios.get('https://api.github.com/xxx/1'),

    axios.get('https://api.github.com/xxx/2')

  ])

  .then(axios.spread(function (userResp, reposResp) {

    // 上面两个请求都完成后，才执行这个回调方法

    console.log('User', userResp.data);

    console.log('Repositories', reposResp.data);

  }));

axios接口请求封装

1. src下创建api文件夹并新建index.js

// api接口
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
/* eslint-disable */

let api = {
  // 删除孩子信息
  delChild(params) {
    let postData = Qs.stringify(params)
    return Vue.axios.post('/api/v1/children_delete', postData)
  },

  // 获取孩子详情
  childDetail(params) {
    return Vue.axios.get('/api/v1/children_detail', params)
  },
  
}

export default function (Vue) {
  Vue.prototype.$api = api
  Vue.prototype.$fetch = axios
}

2. main.js中引入该文件

import Api from './api'
Vue.use(Api)

3. 通过this.$api方式在vue中使用

this.$api.sendVerifyCode({
        mobile:this.phone
      }).then((res)=>{
      })

问题总结

1. 当vue router使用history模式，url带参数时页面刷新报错

Uncaught SyntaxError: Unexpected token <

解决：
打开vue.config文件，配置publicPath为‘/’而不是'./'

module.exports = {
  // 基本路径
  publicPath: '/',
}

2. vue-cli3出现Invalid Host header的解决方案

nginx配置了代理后出现 Invalid Host header

新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问
解决：禁用主机检查，在根目录下创建文件vue.config.js，然后填入如下内容

module.exports = {
    devServer: {
        disableHostCheck: true,
    }
}

3. vue移动端图片不显示问题解决

如果要对图片的样式进行设置可以指定class，但是宽高必须为100%
如果想指定图片的宽高只能用内联样式

4. history模式部署问题 报404错误

服务器配置，当匹配不到路由时，跳转到index首页

tomcat配置方式
https://blog.csdn.net/elisunli/article/details/79823245

apache、nginx配置方式
https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子

nodejs egg服务端路由配置

router.get('*', controller.home.index);

5. 使用Axios传参时 ，java后台接收不到值，后发现是Axios的传参请求是Payload方式

Form Data和Request Payload

解决：转换成Form Data的方式

import Qs from 'qs'
let postData = Qs.stringify(params)

或者

let formData = new FormData()
      formData.append('score', score)
      formData.append('costtime', 0)
      

6. vue-router使用beforeEach钩子获取vuex里的state值，初始页面报错

解决router.app.$store.state.user_info.userinfo

let userinfo = router.app.$store.state.user_info.userinfo
    if (userinfo.token) {
      next()
    } else {
      // 跳转到登录页
      next({ name: 'login' })
    }

相关链接

• 高德地图
  amap高德地图vue组件
  高德原生

• mint-ui框架
  mint-ui

• vue-cli3.x文档
  vue-cli3.x

• antv-f2移动端可视化ui框架
  antv-f2

最后

代码我已经放到github上面了，欢迎大家star或者fork
github地址

参考阅读

https://www.jianshu.com/p/f8430536059a
https://cli.vuejs.org/zh/guide/installation.html