h5项目主流基础架构

创建项目结构与基本插件配置

1.创建项目时选择预装插件：

eslint,vue-router,vuex,babel,less

2.整理项目文件删除无用组件样式等

删除后保证项目正常运行，添加相关所需文件夹，梳理项目结构。

3.安装vant-ui

安装命令：cnpm i vant -S

按需引入：
main.js中引入：import './utils/vant.js'
vant.js文件（引入组件）：

import Vue from 'vue'
import {
  NoticeBar ,
  Button,
}from 'vant'

Vue.use(NoticeBar);
Vue.use(Button);

--安装插件 cnpm i babel-plugin-import -D
--在babel.config.js文件中添加如下配置（引入样式）：

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4.rem移动端适配

安装插件：
cnpm i amfe-flexible -S
cnpm i postcss -S
cnpm i postcss-pxtorem -S
cnpm i postcss-loader -S
cnpm i postcss-plugin-px2rem -S

main.js导入：import 'amfe-flexible'

项目根目录新建.postcssrc.js文件配置postcss

// postcss.config.js 
module.exports = {
    plugins: {
      // postcss-pxtorem 插件的版本需要 >= 5.0.0
      'postcss-pxtorem': {
        rootValue({ file }) {
          return file.indexOf('vant') !== -1 ? 37.5 : 75;
        },
        propList: ['*'],
      },
    },
  };

格式化代码配置

根目录新建.prettierrc.json文件

{
   "semi" : false,  结尾分号
   "singleQuote":true  单引号
}

配置路由

const lazyImport = (page, file) => () => import(`../view/${page}/${file}.vue`)
Vue.use(VueRouter)

const routes = [
    {
        path: '/my/evaluate',
        name: 'myEvaluate',
        component: lazyImport('my', 'evaluate'),
        meta: {
                title: '我的评价*'
        }
    }
]

封装http请求

安装axios命令:cnpm i axios -S

新建request.js文件封装ajax请求:

import axios from 'axios'

const request = axios.ceerate({
    baseURL:''
})

export default request

新建文件api/user.js封装请求方法:

import request from "@/utils/request";

export const login = data => {
    return request({
        method:'post',
        url:'',
        data
    })
}

模板地址

(h5-frame-template: h5项目模板，vant，rem适配。 (gitee.com))