🛠 vantUIAssociated Settings

📣 preface

  • In the early stage of development, the wechat public account was embedded with the H5 project. At first, it was a separate webpage, and the user experience was not good. There are also some drawbacks in user login information processing. The subsequent leader proposed to use an embedded H5 (Web) terminal project to gradually replace the original H5 page, so as to enhance user experience.
  • After discussion, we finally decided to adopt VUE + vantUI for development. Corresponding configuration was carried out by referring to official documents. Because it needs to adapt to different mobile devices, it needs to combine the UI framework to carry out unified Settings, so as to facilitate the later development and maintenance. The use of vantUI can be referred to the official documentation, the following is a simple configuration for note taking and subsequent development.

🔔 Installing plug-ins

  • Amfe-flexible: Used to set REM reference value
yarn add amfe-flexible --dev
Copy the code
  • Postcss-pxtorem: Used to convert units to REM
yarn add postcss-pxtorem --dev
Copy the code

Vue – set in cli

  • The import plug-in
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
// gzip
const CompressionWebpackPlugin = require("compression-webpack-plugin");
Copy the code
  • The configuration of vue. Config. Js
module.exports = {
	css: {
		loaderOptions: {
            // Set the root font size
			postcss: {
				plugins: [autoprefixer(), pxtorem({ rootValue: 37.5.propList: ["*"]]}}),// less default style configuration
			less: {
				javascriptEnabled: true.modifyVars: {
					blue: "#4B72E5"."button-primary-background-color": "#4B72E5"."button-primary-border-color": "#4B72E5"."nav-bar-background-color": "#4B72E5"."nav-bar-icon-color": "#FAFAFA"."nav-bar-text-color": "#FAFAFA"."nav-bar-title-text-color": "#FAFAFA"."tabbar-item-active-color": "#4B72E5"}}}}};Copy the code

or

module.exports = {
	css: {
		loaderOptions: {
			// Set the root font size
			postcss: {
				plugins: [
					autoprefixer({
						overrideBrowserslist: ["Android 4.1"."iOS 7.1"."Chrome > 31"."ff > 31"."ie >= 8"]
					}),
					pxtorem({
						rootValue: 37.5.propList: ["*"]]}}),// less default style configuration
			less: {
				javascriptEnabled: true.modifyVars: {
					// vantUI related color value Settings
					blue: "#4B72E5"}}}}};Copy the code
  • Gzip code compression (requires Nginx to enable gzip compression)
module.exports = {
	publicPath: "/".devServer: {
		// Automatically open the browser
		open: true.// Server address
		proxy: "Address"
	},
	css: {},
	configureWebpack: config= > {
		// Modify the configuration for the production environment...
		if (process.env.NODE_ENV === "production") {
			config.plugins.push(
				new CompressionWebpackPlugin({
					algorithm: "gzip".// Matching the file suffix to compress
					test: /\.(js|css|svg|ttf|json|html)$/.// Larger than 10KB will compress
					threshold: 10240.minRatio: 0.8})); }},// Whether to pack the Map file
	productionSourceMap: false
};

Copy the code
  • Babel.config.js loads the configuration on demand
module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"].plugins: [["import",
            {
                libraryName: "vant".libraryDirectory: "es".// style: true
                style: name= > `${name}/style/less`
            },
            "vant"]]};Copy the code

🗑 Delete console.log information about the production environment

  • Install plug-in: babel-plugin-transform-remove-console
yarn add babel-plugin-transform-remove-console --dev
Copy the code
  • Related configuration (configured in babel.config.js)
// Import plug-ins
const plugins = ["@vue/babel-plugin-transform-vue-jsx"];
// Remove console from production environment
if (process.env.NODE_ENV === "production") {
	plugins.push("transform-remove-console");
}

module.exports = {
	plugins: plugins,
	presets: ["@vue/cli-plugin-babel/preset"]};Copy the code

🏆 summary

  • In the early stage of this project, I mainly developed independently. The reason why one item was added before the noteNone Example Delete console.log information about the production environmentLater, the project was taken over by my colleagues. I printed a lot of consoles for debugging, but I did not want to annotate them when releasing the production environment, so I found a compromise. When releasing the production environment, I removed the information related to the console through a third-party plug-in.