基於vuecli3構建一個快速開發h5 APP的模板

時間 2020-07-16

標籤基於 vuecli3 vuecli 構建一個快速開發 h5 app 模板简体版

原文原文鏈接

基於vuecli3構建的一個快速開發h5 APP的模板，集成了高德地圖、mint-ui，以及antv-f2可視化框架javascript

vue-cli3安裝

查看vue cli版本 vue --versioncss
要求nodejs版本8.9以上html
如安裝了舊版，使用npm uninstall vue-cli -g卸載舊版本vue
安裝vue-cli3.0 npm install -g @vue/clijava

建立項目

vue create hello-worldnode
選擇安裝配置選項webpack

◉ 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配置文件單獨保存到配置文件中ios

項目運行及打包

npm run serve

npm run build

添加插件

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

vue.config.js配置文件

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AEgit

3.0和2.0不一樣的是，webpack相關的配置文件都被隱藏了，若是須要配置，則經過vue.config.js來配置

根目錄下新建vue.config.js文件，進行相關配置

module.exports={
  
}

使用vw方案手機屏幕適配

安裝相關依賴

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

在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

查詢url參數

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

路由跳轉

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

路由傳參數 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定義過濾器的兩種方式

一、在組件選項中定義本地的過濾器

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

使用

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

二、全局定義過濾器

新建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#%E6%A8%A1%E5%BC%8F

在項目根目錄下新建如下文件

.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

一、所有引入

而後在main.js中引入

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

Vue.use(MintUI)

二、按需引入

按需引入須要藉助 babel-plugin-component插件，這樣能夠只引入須要的組件，以達到減少項目體積的目的

npm install babel-plugin-component -D

axios基本用法

一、axios get請求

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

二、axios post請求

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

三、合併請求,同時執行多個請求

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接口請求封裝

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
}

main.js中引入該文件

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

經過this.$api方式在vue中使用

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

問題總結

當vue router使用history模式，url帶參數時頁面刷新報錯

Uncaught SyntaxError: Unexpected token <

解決：打開vue.config文件，配置publicPath爲‘/’而不是'./'

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

vue-cli3出現Invalid Host header的解決方案

nginx配置了代理後出現 Invalid Host header

新版的webpack-dev-server增長了安全驗證，默認檢查hostname，若是hostname不是配置內的，將中斷訪問解決：禁用主機檢查，在根目錄下建立文件vue.config.js，而後填入以下內容

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

vue移動端圖片不顯示問題解決

若是要對圖片的樣式進行設置能夠指定class，可是寬高必須爲100% 若是想指定圖片的寬高只能用內聯樣式

history模式部署問題報404錯誤

服務器配置，當匹配不到路由時，跳轉到index首頁

tomcat配置方式 http://www.javashuo.com/article/p-mptamwzo-gx.html

apache、nginx配置方式 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

nodejs egg服務端路由配置

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

使用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)

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' })
    }