Vue-cli 4.0 project construction

1. Build the project normally first: 2. X template was selected

2. Add vue.config.js (base version)

const path = require('path') // const fs = require('fs') function resolve(dir) { return path.join(__dirname, Dir)} module.exports = {publicPath: '. ', // public, basic path outputDir: process.env.node_env === "development"? 'devdist' : 'dist', // Output file directory, different environment different package name assetsDir: './', // resource path chainWebpack: Config => {// path alias config.resolve.alias.set ('@', resolve(' SRC ')).set('@images', resolve(' SRC /assets/images'))} DevServer: {port: 8080, host: "localhost", // 0.0.0.0 open: true, // Configure automatic startup browser overlay: {warnings: true, errors: True}, / / configure proxy, the proxy: {"/devProxy ": {target: 'http://192.168.122.100:20105/dms/', changeOrigin: true},},}}Copy the code

3. About the use of less, and the use of less global variables

Note: There are many ways to implement it, such as sas-resource-loader, style-resources-loader, vie-cli-plugin-style-resources-loader, etc. Here we choose the simplest way, that is, without using any other plug-ins. CSS preprocessors less and LessLoader were added when the initial project was built

Module. exports added to vue.config.js:

css: { loaderOptions: { less: { javascriptEnabled: true, globalVars: { hack: `true; @import '~@/styles/variable.less'; '},}}},Copy the code

This hack:true; After that, import the less file that needs global declaration

4. Webpack – theme – color – replacer for skin

Webpack-theme-color-replacer is a webpack plugin that has little to do with vue. Its core logic is to replace the color path and other content through JS, and the traditional replacement CSS class is not the same; The simple usage is as follows:

Module. exports added to vue.config.js:

Plugin ('webpack-theme-color-replacer').use(ThemeColorReplacer).tap(options => {options[0] = {options[0] = { MatchColors: ['#406767', '#3a6a6b', '#232323'], 'css/theme-colors-[contenthash:8].css', //optional. output css file name, suport [contenthash] and [hash]. injectCss: false, // optional. Inject css text into js file, no need to download `theme-colors-xxx.css` any more. isJsUgly: process.env.NODE_ENV! =='development', } return options })Copy the code

Provides component change skin function: by the client. The changer, changeColor (options, Promise.) then (() = > {}) to implement, the following to provide examples of mixins

// It can be used to replace colors, paths, etc. Import client from 'webpack-theme-color-replacer/client' export default {data() {return {import client from 'webpack-theme-color-replacer/client' export default {data() {return { exampleOptions: { newColors: ['#04cf04', '#04cf04', '#1d1d1d'] } } }, methods: { _switchColor(options) { client.changer.changeColor(options, Promise).then(() => {this.$message. success(' change color successfully ') localstorage.setitem ('nowSkin', json.stringify (options))})}}, created() { let skin = localStorage.getItem('nowSkin') ? JSON.parse(localStorage.getItem('nowSkin')) : {}; if(! this.$commonjs.objectEmpty(skin)){ this.nowSkin = skin } client.changer.changeColor(this.nowSkin).then(() => {}) } }Copy the code