1. Multi-environment development

There is a variable NODE_ENV, which is managed in config/index.js.

2. Rem adaptation scheme

Our design drafts are all px values, so if we need to use REM units in the project, we need to borrow a tool kit to convert them:

Here we will use postCSS-PxtoREM and lib-flexible to set rem.

The first is the PostCSS configuration:

Module. exports = {plugins:{// autoprefixer: {// browsers: ['Android >= 4.0', 'iOS >= 8'] //}, 'postCSS-pxtorem ': {// rootValue: 37.5, // Vant official root font size is 37.5 rootValue({file}) {return file.indexof (' Vant ')! = = 1? 37.5:75}, propList: ['*'], selectorBlackList: ['.norem'] // norem- class, norem conversion}},}Copy the code

3. Less global style

All global styles for vue H5 template projects are set uniformly in @src/ Assets/CSS

However, VantUI was introduced into our project template, and something needed to be restyled.

First, you don’t want to add scoped to a page, but you want to override the vant style for that page. You can add a class style to the page’s parent container, for example:

.xx {
    .van-button {}
}
Copy the code

Second, the parent component changes the child component style depth selector

If the child uses scoped and you want to change the style of the child in the parent, go to >>>

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

Third, global variables

The vue.config.js configuration uses the css.loaderOptions option to inject the mixin variables of less into the global, without manual import, thus passing shared global variables to all less styles:

4. VantUI components are loaded on demand

Implement the Vant import on demand component using babel-plugin-import, which is a Babel plug-in that automatically converts import writing to import on demand during compilation.

1. Install the plug-in

npm i babel-plugin-import -D
Copy the code

2. Set it in babel.config.js

However, there is one problem: the plugins still need to be imported when the page is used, so we can manage the components in SRC /plugins/ ant.

5. Vuex state management

The first is the directory structure for state management

Imported in the entry file main.js

Then there is the use of individual pages

<script> import { mapGetters } from 'vuex' export default { computed: { ... mapGetters(['userName']) }, methods: { doDispatch() { this.$store.dispatch ('setUserName', '111') } } } </script>Copy the code

6, Vue – the router

We use the routing hash mode

Hash mode: This is the default mode in development. It always has hash signs in urls. It has excellent browser support and is compatible with older versions of Internet Explorer.

Here is the principle of front-end routing:

Window can listen for hash changes using the onHashChange event. This means that when the hash value in the URL changes, it can also listen for the change without making an HTTP request and load the front-end code block as needed. The hash mode is standard for today’s single-page applications. So the power of front-end routing is that routing does not need to be done by the server, the front-end can do it.

In this project template, we configure router/index.js as follows:

7. Axios interface encapsulation and unified interface management

Encapsulate AXIos in utils/request.js so developers can make changes based on the background interface.

In service. The interceptors. Request. Use can be set in the request header, such as setting the Token

Config. hideloading is set in the interface parameters in the API folder

Service. The interceptors. Response. Use can return data processing, the interface in 401 delete local information, for example, log back in.

Manage interfaces in a unified manner

Unify the management interface in the SRC/API folder

It is divided into URL (interface address, baseApi of config will be concatenated when requesting), method(request method), and data(request parameter qs.stringify(params) is serialized operation on data).

8. Configure the alias

Configure the alias alias in vue.config.js to omit the alias alias based on.. /.. / To find the documents.

9. Configure proxy across domains

If cross-domain Settings are required in the project, annotate the vue.config.js proxy and configure the parameters accordingly.

10. Configure packaging analysis

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { chainWebpack: Plugin ('webpack-report'). Use (BundleAnalyzerPlugin, [{analyzerMode: 'static' } ]) } } }Copy the code

To see how the package performs, run NPM run build

11. Ali Cloud construction configuration file

FROM project Ali cloud address RUN NPM install [email protected] -gadd. / project name WORKDIR/project name RUN NPM install# Upload OSS build RUN HOST= project Ali cloud address / \PUBLIC_PATH=" XXX /" \XXX_ENVIRONMENT=ontest/online \ NPM run build# Run ACCESSKEY_ID= XXX \ACCESSKEY_SECRET= XXX \PUBLIC_PATH=" XXX "\ NPM run Custom Node MiddlewareCopy the code

12. Summarize some optimizations

Remove console.log from the official environment

npm i -D babel-plugin-transform-remove-console
Copy the code

Configure in babel.config.js

// get VUE_APP_ENV non-node_env, Console const IS_PROD = ['production', 'prod']. Includes (process.env.vue_app_env) const plugins = [[' import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant']] // Remove console.log if (IS_PROD) {plugins.push('transform-remove-console')} module.exports = {presets: exports: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]], plugins }Copy the code

Eslint+Pettier unified development specification

Install the plugin esLint prettier vetur,.vue files formatted using vetur, use prettier

Prettierrc: PetTier rule in the.prettierrc file for each project