构建项目//pc端、移动端H5

最新推荐文章于 2024-05-15 17:05:01 发布

爱吃松果的美美

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量501

点赞数

分类专栏：项目相关

本文链接：https://blog.csdn.net/weixin_37877794/article/details/119188240

版权

文章目录

vue-cli
安装 ui 库（eg：pc端用element ui、移动端用 vuex）

我的步骤

由于本机已有 nodejs、npm、vue-cli等，所以直接创建项目即可

示例一：vue init webpack 文件名

vue init webpack 文件名
在这里插入图片描述

示例二：vue create 文件名

参考：超级详细的Vue-cli3使用教程

vue create 文件名

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                              //  代码编译
 ( ) TypeScript                         //  ts
 ( ) Progressive Web App (PWA) Support  //  支持渐进式网页应用程序
 ( ) Router                             //  vue路由
 ( ) Vuex                               //  状态管理模式
 ( ) CSS Pre-processors                 //  css预处理
 ( ) Linter / Formatter                 //  代码风格、格式校验
 ( ) Unit Testing                       //  单元测试
 ( ) E2E Testing                        //  端对端测试

一般项目开发只需要选择Babel、Router、Vuex就足够了。

vue.config.js 配置

module.exports = {
   
  devServer: {
   
    // 端口号
    port: 8080,
    // 配置不同的后台API地址
    proxy: {
   
      '/api': {
   
        target: 'http://www.dzm.com',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
   
          '^/api': ''
        }
      }
    }
  }
}

ui框架包

element-ui官网:http://element-cn.eleme.io/#/zh-CN/component/installation

npm 安装

npm i element-ui -S

完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
   
  el: '#app',
  render: h => h(App)
});

安装异步编程框架axios

axios中文文档|axios中文网：http://www.axios-js.com/zh-cn/docs/
vue项目中axios拦截器的使用和配置

安装_使用 npm:

npm install axios

src/utils/request.js 中引入 axios

import axios from 'axios'

创建 axios 实例

const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

配置请求拦截器
service.interceptors.request.use({})

// request interceptor
service.interceptors.request.use(
  config => {
   
    // do something before request is sent

    if (store.getters.token) {
   
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
   
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

配置响应拦截器
service.interceptors.response.use({})

// response interceptor
service.interceptors.response.use(
  response => {
   
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
   
      Message({
   
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
   
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
   
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
   
          store.dispatch('user/resetToken').then(() => {
   
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
   
      return res
    }
  },
  error => {
   
    console.log('err' + error) // for debug
    Message({
   
      message: error.message,
      type: 'error',
      duration