Vue – cli4 more pages

multipage

Making address github.com/qinouz/mult… Build multi-page template scaffolding based on VUE-CLI4.0!

Start the project


git clone https://github.com/qinouz/multipage.git

cd multipage

npm install

npm run dev
Copy the code

directory

  • Tick the Vue – cli4
  • √ Generate multiple page configurations based on the directory structure
  • √ Configure multiple environment variables
  • √ REM adaptation
  • √ Vuex status management
  • Tick the Vue – the router
  • √ Configure the alias
  • √ Configure proxy across domains
  • √ Configure package analysis

✅ Generate multi-page configuration

The getEntry method in build/ newutils.js generates the page path and corresponding HTML objects from all the HTML files in the directory. var pages = utils.getEntry([‘./src/module/**/*.html’]);

The return result is:

{ 'aa/as/dd/fd/ddd': './src/module/aa/as/dd/fd/ddd/ddd.html'.'aa/ddd': './src/module/aa/ddd/ddd.html'.'ss': './src/module/ss/ss.html' 
 }
Copy the code

GetEntryPages var mpages = utils.getentrypages (pages); To generate the final multi-page configuration, the directory structure needs to follow certain rules. The folder name must be consistent with the main file name and template HTML file name, and the hierarchical structure is not limited.

├ ─ ─ the module │ └ ─ ─ ss | | └ ─ ─ ss. The HTML | | └ ─ ─ ss. JsCopy the code

The return result is:

{ 'aa/as/dd/fd/ddd': {entry: './src/module/aa/as/dd/fd/ddd/ddd.js'.template: './src/module/aa/as/dd/fd/ddd/ddd.html' },
  'aa/ddd': {entry: './src/module/aa/ddd/ddd.js'.template: './src/module/aa/ddd/ddd.html' },
  ss: {entry: './src/module/ss/ss.js'.template: './src/module/ss/ss.html'}}Copy the code

✅ Configure multiple environment variables

The scripts in package.json configure dev QA PRD with –mode XXX to execute the different environments

  • throughnpm run devStart the local PC and rundevelopment
  • throughnpm run qaPackage the tests and execute themstaging
  • throughnpm run prdPackage formally, executeproduction
"scripts": {
  "dev": "vue-cli-service serve --open"."stage": "vue-cli-service build --mode staging"."build": "vue-cli-service build",}Copy the code
Configuration is introduced

Variables that begin with VUE_APP_ are accessible in code through process.env.vue_app_. For example,VUE_APP_ENV = ‘development’ is accessed through process.env.vue_app_env. In addition to the VUE_APP_* variable, two special variables NODE_ENV and BASE_URL are always available in your application code

Create.env.* in the project root directory

  • Env Local development environment configuration
NODE_ENV = development
VUE_APP_SERVICE_URL =
BASE_URL = ./

Copy the code
  • Env. qa Test environment configuration
NODE_ENV = production
VUE_APP_SERVICE_URL = http://www.baidu.com
BASE_URL = /shopsystem/static/weixin/dist/
Copy the code
  • .env. PRD Formal environment configuration
 NODE_ENV = production
 VUE_APP_SERVICE_URL = http://www.baidu.com
 BASE_URL = /shopsystem/static/weixin/dist/
Copy the code

Configure environment variables. The local environment file. Env is used as an example

NODE_ENV = development VUE_APP_SERVICE_URL = VUE_APP_TEST=test
BASE_URL = ./

Copy the code

Depending on the environment, the variables will be different

// Import different baseApi addresses according to the environment
const instance = axios.create();
var path = process.env.VUE_APP_SERVICE_URL;
instance.defaults.baseURL = path;
Copy the code

Bring back to the top

✅ REM adaptation scheme

Don’t worry, rem adaptation has been configured for the project. Here’s a brief introduction:

By default, styles in Vant use px units. If you want to use REM units, the following two tools are recommended:

  • postcss-pxtoremIs apostcssPlug-in for converting units torem
  • lib-flexibleUsed to set theremAt baseline
PostCSS configuration

The following provides a basic PostCSS configuration that can be modified based on project requirements

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    postcss: {
      plugins: [
        require('postcss-pxtorem') ({rootValue: 37.5.// The base of conversion
          selectorBlackList: [], // Ignore the transformation re match
          propList: [The '*'],}),]}}}Copy the code

Bring back to the top

The parent component changes the child component style depth selector

When you want to modify the style of the child component when the child component is scoped, go to >>> :

<style scoped>
.a >>> .b { /* ... */ }
.a {
    /deep/ .b {
        ...
    }
}
</style>
Copy the code

Bring back to the top

✅ Vuex status management

The directory structure

├ ─ ─ store │ ├ ─ ─ modules │ │ └ ─ ─ app. Js │ ├ ─ ─ index. The js │ ├ ─ ─ getters. JsCopy the code

Introduced the 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)
})
Copy the code

use

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userName'])},methods: {
      // Action is triggered by the store.dispatch method
      doDispatch() {
        this.$store.dispatch('setUserName'.'Really good, hurry to pay attention to the public account, the organization is waiting for you ~')}}}</script>
Copy the code

Bring back to the top

✅ Vue – the router

This case uses the hash mode, and the developer modifies the mode base as required

Note: If you use history mode, the publicPath in vue.config.js needs to be modified accordingly

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export const router = [
  {
    path: '/'.name: 'index'.component: (a)= > import('@/views/home/index'), // Route lazy loading
    meta: {
      title: 'home'.// Page title
      keepAlive: false / / keep - the alive logo}}]const createRouter = (a)= >
  new Router({
    // mode: 'history', // If you are in history mode you need to configure vue.config.js publicPath
    // base: '/app/',
    scrollBehavior: (a)= > ({y: 0}),
    routes: router
  })

export default createRouter()
Copy the code

More: Vue Router

Bring back to the top

✅ Configure the alias

const path = require('path')
const resolve = dir= > path.join(__dirname, dir)
const IS_PROD = ['production'.'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config= > {
    // Add an alias
    config.resolve.alias
      .set(The '@', resolve('src'))
      .set('assets', resolve('src/assets'))}}Copy the code

Bring back to the top

✅ Configure proxy across domains

If your project requires cross-domain Settings, you need to annotate the vue.config.js proxy and configure the parameters accordingly

module.exports = {
  devServer: {
    / /...
    proxy: {
      // Configure cross-domain
      '/api': {
        target: 'https://test.xxx.com'.// Interface domain name
        // ws: true, // Whether webSockets are enabled
        changOrigin: true.// Enable the proxy to create a virtual server locally
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}
Copy the code

Bring back to the top

✅ Configure package analysis

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config= > {
    // Package analysis
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'}}}Copy the code