子非鱼博客

1.创建vue项目

# npm 6.x
npm init vite@latest vite-vue3 --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest vite-vue3 -- --template vue 

2.进入项目目录，安装各种模块

# 安装路由
npm install vue-router

# 安装网络请求模块
npm install axios

# 安装状态管理模块
npm install vuex@next 或 npm install pinia 

3.编写配置文件

配置@符号表示src目录，以及代理等：

// 修改vite.config.js文件
import { resolve } from 'path'

const pathResolve = dir => {
  return resolve(__dirname, ".", dir)
}

const alias = {
  '@': pathResolve("src")
}

export default defineConfig({
  resolve: {alias},
  server: {
    port: 3001,
    host: '0.0.0.0',
    open: false,
    proxy: {
      '/settlement/': 'http://192.168.13.224:51000/'
    },
  },
  plugins: [vue()]
})

配置路由文件：

　1) 在src目录下创建router/index.js 点击查看参考代码

// router/index.js文件
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      redirect: '/h5',
    },
    {
      path: '/h5',
      component: () => import('@/layout/h5.vue'),
      redirect: '/h5/subApplication',
      children: [
        {
          path: 'makeCollections',
          component: () => import('@/views/makeCollections.vue'),
          meta: {title: '收款信息'}
        },
      ]
    },
    {
      path: '/agreement',
      component: () => import('@/views/agreement.vue'),
      meta: {title: '用户协议'}
    },
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { left: 0, top: 0 }
    }
  }
})

router.beforeEach((to, from, next) => {
  if(to.meta && to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

router.afterEach((to, from) => {
})
export default router

　2) 在main.js中添加如下代码

import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

配置网络请求文件：在src目录下创建utils/request.js 点击查看参考代码

// utils/request.js文件
import axios from 'axios'
const baseURL = import.meta.env.VITE_BASE_URL
import store from './store'

const service = axios.create({
  baseURL,
  timeout: 50000
})

// 请求前的统一处理
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = 'Bearer ' + store.getters.token
  }
  return config;
}, error => {
  return Promise.reject(error)
})

service.interceptors.response.use(response => {
  const res = response.data
  if (response.config.url.includes('returnAll')) {
    return Promise.resolve(res);
  } else if (res.result && res.result.success) {
    return Promise.resolve(res.data);
  }

  alert(res.result ? res.result.message : '' )
  return Promise.reject(null)
}, error => {
  return Promise.reject(error);
})

export default service

// 在组件中直接引入请求文件即可使用
import request from '@/utils/request'

request.post(...).then(res => {}) 

配置vuex全局变量：

　1) 在src目录下创建utils/store.js 点击查看参考代码

// utils/store.js文件
import Vuex from 'vuex'

const store = new Vuex.Store({
  state:{
    // 登录用户信息
    userInfo: {},
    token: ''
  },
  mutations: {
    // 登录用户信息
    setUserInfo (state, obj) {
      state.userInfo = obj
    },
    // 设置token
    setToken (state, val) {
      state.token = val
    }
  },
  actions: {
    logout ({ commit, state }) {
      return new Promise((resolve, reject) => {
        try {
          commit('setToken', '')
          resolve()
        } catch(e) {
          reject()
        }
      })
    }
  },
  getters: {
    userInfo: state => state.userInfo,
    token: state => state.token,
  }
})

export default store

　2) 在main.js中添加如下代码

import store from '@/utils/store'

const app = createApp(App)
app.use(store)
app.mount('#app')

　3) 使用

import { useStore } from 'vuex'

const store = useStore()
const token = computed(() => store.state.token)
store.commit('setUserInfo', {id:1})

创建公用方法文件：

　1) 在src目录下创建utils/utils.js 点击查看参考代码

// utils/utils.js文件

// 获取网址参数值
function getUrlParam(name) {
  let reg = new RegExp("(?|&)" + name + "=([^&]*)(&|$)")
  let r = (window.location.search || window.location.hash).match(reg)
  if (r != null) return r[2]
  return null
}

// 时间字符串格式修改(eg:format="yyyy-MM-dd hh:mm:ss")
function dateFormat(date, format) {
  if (!date) {
    return ''
  } else if (typeof date === 'string') {
    date = new Date(date.replace(/-/g,'/'))
  } else if (typeof date === 'number') {
    date = new Date(date)
  }

  let o = {
    "M+" : date.getMonth() + 1, // month
    "d+" : date.getDate(), // day
    "h+" : date.getHours(), // hour
    "m+" : date.getMinutes(), // minute
    "s+" : date.getSeconds(), // second
    "q+" : Math.floor((date.getMonth() + 3) / 3), // quarter
    "S" : date.getMilliseconds()  // millisecond
  }

  if (/(y+)/.test(format)) {  
    format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));  
  }

  for (let k in o) {  
    if (new RegExp("(" + k + ")").test(format)) {  
      format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));  
    }
  }
  return format;
}
export default { getUrlParam, dateFormat }

　2) 使用import { dateFormat } from '@/utils/utils'