開箱即用 vue-cli4 uniapp Webpack4 移動端框架方案

描述

基于 vue-cli4.0 + Webpack 4 + thorui-uni + less + 請求 封裝，構建手機端模板腳手架

專案地址：github

Node 版本要求

本示例 Node.js 14.17.5

編輯器

建議使用vscode 配合 HBuilder

啟動專案

git clone https://github.com/wz930206/uniapp-ma-template.git

cd uniapp-ma-template

npm install

npm run serve

目錄

• √ Vue-cli4
• √配置多環境變數
• √ thorui 組件按需加載
• √ Less 全域樣式
• √ Vuex 狀態管理
• √ Webpack 4 vue.config.js 基礎配置
• √ 配置 alias 別名
• √ 配置 proxy 跨域
• √ 去掉 console.log
• √ Eslint+Stylelint+Pettier 統一開發規范

配置多環境變數

在專案根目錄中新建 .env.*

- .env.development 本地開發環境配置

NODE_ENV='development'
# must start with VUE_APP_ 
VUE_APP_ENV = 'development'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

# Base api
VUE_APP_BASE_API = '/dev-api'

- .env.staging 測驗環境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

# Base api
VUE_APP_BASE_API = '/stage-api'

- .env.production 正式環境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

# Base api
VUE_APP_BASE_API = '/prod-api'

這里我們并沒有定義很多變數，只定義了基礎的 VUE_APP_ENV development、staging、production，變數我們統一在 src/config/env.*.js 里進行管理，

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

修改起來方便，不需 要重啟專案，符合開發習慣，

src/config/index.js

// 根據環境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

配置對應環境的變數，拿本地環境檔案 env.development.js 舉例，用戶可以根據需求修改

// 本地環境配置
module.exports = {
  title: 'uni-app-template',
  baseApi: 'https://test.xxx.com/rest', // 本地api請求地址,注意：如果你使用了代理，請設定成'/'
  APPID: 'xxx',
}

根據環境不同，變數就會不同了

// 根據環境不同引入不同baseApi地址
import {baseApi} from '@/config'
console.log(baseApi)

thorui 組件按需加載

專案在 `src/components/thorui` 下統一管理thorui組件 ，已全域注冊，thorui檔案

Less 全域樣式

每個頁面自己對應的樣式都寫在自己的 .vue 檔案之中 `scoped` 它顧名思義給 css 加了一個域的概念，

<style lang="less">

  /* global styles */

</style>

<style lang="less" scoped>

  /* local styles */

</style>

目錄結構

uniapp-ma-template 所有全域樣式都在 `@/src/styles` 目錄下設定

├── styles
│   ├── index.scss               # 全域通用樣式
│   ├── _mixin.scss              # 全域mixin
│   └── _variables.scss          # 全域變數

全域變數

vue.config.js 配置使用 style-resources-loader 選項,注入 less 的 _variables、_mixins、_class_template 到全域，不需要手動引入 ,這樣就把所有 Less 樣式傳入共享的全域變數：

pluginOptions: {
	'style-resources-loader': {
		preProcessor: 'less',
		patterns: [
		    path.resolve(__dirname, 'src/styles/_variables.less'),
			path.resolve(__dirname, 'src/styles/_mixins.less'),
			path.resolve(__dirname, 'src/styles/_class_template.less'),
		]
	}
},

Vuex 狀態管理

目錄結構

├── store
│   ├── modules
│   │   └── user.js
│   ├── index.js
│   ├── getters.js

`main.js` 引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

配置 alias 別名

const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加別名
    config.resolve.alias
      .set('@', resolve('src'))
  }
}

配置 proxy 跨域

如果你的專案需要跨域設定，你需要打來 `vue.config.js` `proxy` 注釋 并且配置相應引數

module.exports = {
  devServer: {
    // ....
    proxy: {
      '/rest': {
        target: proxyTarget,       //后端介面測驗環境地址  配nginx 時使用
        changeOrigin: true,//是否允許跨越
        pathRewrite: {
          '^/rest': '/rest',      //重寫 不配nginx 時使用
        }
      }
    }
  }
}

去掉 console.log

保留了測驗環境和本地環境的 `console.log`，在 vue.config.js 中配置

// 獲取 VUE_APP_ENV 非 NODE_ENV，測驗環境依然 console
const IS_PROD = ['production'].includes(process.env.VUE_APP_ENV)

module.exports = {
  configureWebpack: config => {
  	config.optimization.minimizer[0].options.terserOptions.compress.drop_console = IS_PROD,
  }
}

Eslint + Stylelint + Pettier 統一開發規范

VScode （版本 1.47.3）安裝 `eslint` `prettier` `vetur` 插件 `.vue` 檔案使用 vetur 進行格式化，其他使用`prettier`,后面會

專門寫個如何使用配合使用這三個玩意，詳細配置步驟可查看此博客 csdn

總結

專案github地址

關于我

同名服務號、小程式 ur home，

技術訂閱號 ur home D