vue-cli4 vant rem 移動端框架方案

更新

升級vue-cli4

新增Eslint+Pettier

新增vant 元件全域性按需引入

描述

基於vue-cli4.0+webpack 4+vant ui + sass+ rem適配方案+axios封裝，構建手機端模板腳手架

幫你做好的配置有

多環境開發

之前寫過一個多環境的方案，是基於vue-cli2.0的vue多環境配置方案-傳送門
最近新的專案採用了vuecli4.0開始了一番折騰

在src的檔案裡新建config 根據不同的環境去引用不同的配置檔案，不同的是在根目錄下有三個設定環境變數的檔案

這裡要注意的是，要以VUE_APP_字首設定，才可以在vue中引用

這裡有個問題，既然這裡有了根據不同環境設定變數的檔案，為什麼還要去config下新建三個對應的檔案呢？

修改起來方便，引入的時候方便不需要重啟專案

rem適配方案

還是那句話，用vw還是用rem，這是個問題？

選用rem的原因是因為[vant]直接推薦了這個適配方案，直接上手

vant按需引入

使用了  vantUI的按需引入 但是每個頁面引入很麻煩，所以新建vant.js檔案統一管理，需要哪個引入哪個，這樣就可以在頁面直接使用了，方便~

main.js

// 全域性引入按需引入UI庫 vantimport '@/plugins/vant'複製程式碼

Axios封裝

request.js 封裝axios 統一處理請求

api檔案下統一管理介面，前面說了config管理不同的環境請求地址

頁面就可以通過promise的方式呼叫了

生產環境使用CDN，優化首屏速度

可以使用cdn提高速度，這裡要在vue.config.js需要配置externals,修改public 下的index.html

vue.config.js

'use strict'const path = require('path')const defaultSettings = require('./src/config/index.js')function resolve(dir) {  return path.join(__dirname, dir)}const name = defaultSettings.title || 'vue mobile template' // page titleconst port = 9018 // dev portconst externals = {  vue: 'Vue',  'vue-router': 'VueRouter',  vuex: 'Vuex',  vant: 'vant',  axios: 'axios'}// cdnconst cdn = {  // 開發環境  dev: {    css: [],    js: []  },  // 生產環境  build: {    css: ['https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css'],    js: [      'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js',      'https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js',      'https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js',      'https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js',      'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js',      'https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js'    ]  }}module.exports = {  publicPath: './', // router hash 模式使用  // publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/', //router history模式使用 需要區分生產環境和開發環境，不然build會報錯 outputDir: 'dist',  assetsDir: 'static',  lintOnSave: process.env.NODE_ENV === 'development',  productionSourceMap: false,  devServer: {    port: port,    open: false,    overlay: {      warnings: false,      errors: true    }  },  configureWebpack: config => {    // 為生產環境修改配置...    if (process.env.NODE_ENV === 'production') {      // externals裡的模組不打包      Object.assign(config, {        name: name,        externals: externals      })    }    // 為開發環境修改配置...    // if (process.env.NODE_ENV === 'development') {    // }  },  chainWebpack(config) {    config.plugins.delete('preload') // TODO: need test    config.plugins.delete('prefetch') // TODO: need test    // alias    config.resolve.alias      .set('@', resolve('src'))      .set('assets', resolve('src/assets'))      .set('api', resolve('src/api'))      .set('views', resolve('src/views'))      .set('components', resolve('src/components'))    /**     * 新增CDN引數到htmlWebpackPlugin配置中， 詳見public/index.html 修改     */    config.plugin('html').tap(args => {      if (process.env.NODE_ENV === 'production') {        args[0].cdn = cdn.build      }      if (process.env.NODE_ENV === 'development') {        args[0].cdn = cdn.dev      }      return args    })    // set preserveWhitespace    config.module      .rule('vue')      .use('vue-loader')      .loader('vue-loader')      .tap(options => {        options.compilerOptions.preserveWhitespace = true        return options      })      .end()    config      // https://webpack.js.org/configuration/devtool/#development      .when(process.env.NODE_ENV === 'development', config => config.devtool('cheap-source-map'))    config.when(process.env.NODE_ENV !== 'development', config => {      config        .plugin('ScriptExtHtmlWebpackPlugin')        .after('html')        .use('script-ext-html-webpack-plugin', [          {            // `runtime` must same as runtimeChunk name. default is `runtime`            inline: /runtime\..*\.js$/          }        ])        .end()      config.optimization.splitChunks({        chunks: 'all',        cacheGroups: {          commons: {            name: 'chunk-commons',            test: resolve('src/components'), // can customize your rules            minChunks: 3, //  minimum common number            priority: 5,            reuseExistingChunk: true          },          libs: {            name: 'chunk-libs',            chunks: 'initial', // only package third parties that are initially dependent            test: /[\\/]node_modules[\\/]/,            priority: 10          }        }      })      config.optimization.runtimeChunk('single')    })  }}
複製程式碼

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
      <% } %>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- 使用CDN加速的JS檔案，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
    <!-- built files will be auto injected -->
  </body>
</html>
ji複製程式碼

babel相容IE

 安裝 @babel/polyfill

npm install -D @babel/polyfill

main.js引入

//  IE 相容import '@babel/polyfill'複製程式碼

babel.config.js 新增 useBuiltIns: 'entry'

module.exports = {  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],  plugins: [    [      'import',      {        libraryName: 'vant',        libraryDirectory: 'es',        style: true      },      'vant'    ]  ]}

複製程式碼

總結

今天是2020年2月15日。到此，已經是第二次大的更新了，專案中遇到的很多問題也在一一解決，後續把微信分享和授權加入進去。加油

專案github地址

關於我

獲取更多技術相關文章，關注公眾號”前端女塾“。

回覆加群，即可加入”前端仙女群“

您可以掃描新增下方的微信並備註 Sol 加交流群，給我提意見，交流學習。

如果對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～

轉載請聯絡作者！