基於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