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
- through
npm run dev
Start the local PC and rundevelopment
- through
npm run qa
Package the tests and execute themstaging
- through
npm run prd
Package 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 a
postcss
Plug-in for converting units torem
- lib-flexibleUsed to set the
rem
At 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