Vue build mobile terminal h5 project steps

Vue build mobile terminal h5 project steps

Introduction

Recently, other front-end partners in the team need to build their own mobile h5 projects, and there is no overall idea, so I wrote this step.

preparation stage

1. Determine the project uiframework

   Vue better stage moving end frame:ui , , , , , and the like.vantvuxcube-uiMint-UIMuse UINutUI

2. Select csspreprocessing style language, ( vue-cliselect in)

   less, sass, stylusCan, vue-cli 3after corresponding versions webpackof loaderall configured, simply download the corresponding package just fine. Usage suggestion: Generally, it is better to choose the same csspreprocessing language as the preprocessing language of the ui framework. If the class is vantused less, it will be used first in the project less.

3. The need for integration eslint, , stylelint, prettier, git hooks, lint-stagedgeneral recommendations eslintare necessary, others not mandatory, these are behind you can add your own hand.

4. Using the Vue-cligenerated project, integration vuex, vue-router, css预处理语言, eslintand so on.

   Project directory

   ├── babel.config.js
   ├── package.json
   ├── public
   │   ├── favicon.ico
   │   └── index.html
   └── src
       ├── App.vue
       ├── assets
       ├── components
       ├── main.js
       ├── router
       ├── store
       └── views
   

Style and adaptation

1. Reset style

   Generally, reset.css or normalize.css needs to be loaded to reset and protect the styles of major browsers. Generally recommended normalize.css.

2. Install and import the ui framework selected in the preparation phase

3. Choose a mobile adaptation plan

   Now the mainstream adaptation scheme remand vwthe old project with remmore, over time, vwthe adaptation scheme will prevail. It is generally recommended that new projects be directly vwadapted to the plan.

   Adaptation scheme link:

   rem implements mobile terminal adaptation

   vw implements mobile terminal adaptation

4. Global style definition. Global style variable definition: color, font size, width, etc.

Adding tool plug-ins

1. Request tool addition (set baseUrl with environment variable.env configuration, mentioned later)

   Mainstream request library:

   axios(Support React Native, Node, browser)

   fly.js(Support Node.js, WeChat applet, Weex, React Native, Quick App and browser).

   Generally, you need to encapsulate according to the project yourself. Commonly, you need to encapsulate the request interceptor and response interceptor.

2. vuexThe addition of global status involves login, global ui status management, etc.

3. VueAdding plugins, filters, mixins, hooks, etc.

4. Add vue-routerthe navigation guard for. Optional

5. fastclick Solve the mobile terminal 300 millisecond delay problem

6. vconsole Convenient for mobile debugging

7. The addition of other tools, time processing, deep copy, function throttling and anti-shake, etc.

Project eslint, stylelint, prettier configuration

1. Configuration.eslintrc.js

   Generally inherit @vue/eslint-config-standardthis plug-in, the specific rules need to be rulesdefined in the field

2. Configuration .stylelintrc, optional

   Generally inherit stylelint-config-standardthis plug-in, the specific rules need to be rulesdefined in the field

3. Configuration .prettierrc.js, optional

   General configuration

   module.exports = {
         
         
     trailingComma: 'none',
     tabWidth: 2,
     semi: false,
     singleQuote: true,
     jsxSingleQuote: true,
     bracketSpacing: true,
     arrowParens: 'avoid'
   }
   

Project command and environment variable configuration

1. Define environment variable files according to webpack mode, mode can be defined by yourself

   .env.dev  #测试环境变量文件，不打包的话不用配置
   .env.development #开发环境变量文件
   .env.production #生产环境变量文件
   

   Vue project environment variables VUE_APPstart with, except for special project variables. E.g:

   .env.developmentfile

   NODE_ENV=development
   VUE_APP_BASE_API=https://api.ex.com
   VUE_CLI_BABEL_TRANSPILE_MODULES=true
   

2. Configure the npm script according to the mode defined above

   package.json file

   "scripts": {
         
         
       "serve": "vue-cli-service serve",
       "dev": "vue-cli-service serve",
       "lint": "vue-cli-service lint",
       "build:prod": "vue-cli-service build --mode production",
       "build:dev": "vue-cli-service build --mode dev"
   }
   

3. gitHooks lint-stagedConfiguration, optional

Configuration of vue.config.js (webpack)

1. deServer Configuration,

   Common ports, proxy, whether to open the browser, etc.

2. webpack Configuration

   Generally need to configure gzipand drop_consolewait.

3. Alias ​​configuration, the project will generally be set by default, optional

   Generally need to configure @:src

4. Other common configurations, optional

   publicPath: './',
   outputDir: 'dist',
   assetsDir: 'static',
   productionSourceMap: false,
   lintOnSave: true