项目搭建完善

使用脚手架创建项目

1. vue create xxx创建
   
   等待创建完毕

环境变量搭配

创建文件

分别写入

几个变量名NODE_ENV VUE_APP_XXX BASE_URL
获取是用process.env.VUE_APP_XXX来获取

vant-ui 按需引入

官方文档
选择安装

# Vue 2 项目，安装 Vant 2：
npm i vant -S             -S == --save 安装到生产环境
# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件
npm i babel-plugin-import -D     -D == 安装到开发环境

在 babel.config.js 中配置

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

项目在 src/plugins/vant.js下统一管理组件，用哪个引入哪个，无需在页面里重复引用

在main.js中引入

import './plugins/vant'

配置路由

• 观察页面级别
• 路由嵌套规则
• 路由按需引入
• 页面命名规范

axios 封装, api, 的统一管理

安装

// 使用 npm 加载
npm install axios

// 使用 bower 加载
bower install axios

// 使用 yarn 加载
yarn add axios

//用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

utils/request.js 封装 axios ,开发者需要根据后台接口做修改

import axios from 'axios'
import { config } from 'vue/types/umd'
import Router from 'vue-router'

let servic = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  withCredentials: true,
  timeout: 5000
})

// request 拦截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不传递默认开启loading动画
    // if (!config.hideloading) {
    //   // loading
    //   Toast.loading({
    //     forbidClick: true
    //   })
    // }
    // token
    // if (store.getters.token) {
    //   config.headers['X-Token'] = ''
    // }
    return config
  },
  error => {
    // console.log(error)
    return Promise.reject(error)
  }
)

// respone拦截器
service.interceptors.response.use(
  response => {
    // 关闭loading动画
    // Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        Router.push('/home')//跳转到登录页面
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default service

utils/api.js 内

import qs from 'qs'
// axios
import service from './http'
//user api

// 用户信息
export function getUserInfo (params) {
  return service({
    url: '/smsCode ',
    method: 'post',
    data: qs.stringify(params),
    hideloading: true // 隐藏 loading 组件
  })
}

调用

// 请求接口
import { getUserInfo } from '@/api/user.js'

const params = { user: 'sunnie' }
getUserInfo(params)
  .then(() => {})
  .catch(() => {})

rem适配懒得写跳转看

proxy跨域懒得写跳转看