vue-cli3.x 新建项目 vue create projectName

步骤如下

"vue create '项目名'" 创建项目 （需要vue-cli 3.x以上）

1. 选择第一步
   "Manually select features"
2. 选择第二步
   "Choose Vue version"
   "Babel"
   "Router"
   "Vuex"
   "CSS Pre-processorsx"
3. 选择第三步
   "2.x"
4. 选择第四步
   "n"
5. 选择第五步
   "Less"
6. 选择第六步
   "In package.json"
7. 选择第七步
   "n"

需要注意

1. /App.vue 公共css

2. 新增 /config/index.js 配置文件

export const config = {
    app_name: '小动物',
    api_host: 'https://dongwu.dev.iwto.cn',
    // api_host: 'http://localhost:9102',
    // api_host: '',// 打包用这个

}

3. 新增 /vue.config.js 声明打包相关配置

module.exports = {
    publicPath: "./",  // 可以设置成相对路径，这样所有的资源都会被链接为相对路径，打出来的包可以被部署在任意路径
    outputDir: "./dist",  //打包时生成的生产环境构建文件的目录
    assetsDir: './static123456',  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
}

4. 修改 /router/index.js 404页面 和 测试页面 和 首页

5. 新增网络请求文件 /untils/request.js 并安装 npm install axios

import axios from 'axios'



import { config as CONFIG } from '@/config/index.js'

import { Notification } from 'element-ui'

let msg = (data) => {
  Notification(data)
}

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // baseURL: 'http://127.0.0.1:9024', // url = base url + request url
  // baseURL: 'http://jianzhan.dev.xinzhidi.cn', // url = base url + request url
  baseURL:'http://yinni.dev.iwto.cn/',
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    if (!('data' in config)) {
      config.data = {}
    }

    if (localStorage.getItem('user_id')) {
      config.headers['xzd-login-user-id'] = localStorage.getItem('user_id')
    }
    if (localStorage.getItem('user_token')) {
      config.headers['xzd-login-user-token'] = localStorage.getItem('user_token')
    }

    // if (!('user_id' in config.data)) {
    //   config.data.user_id = localStorage.getItem('user_id')
    // }
    // if (!('user_token' in config.data)) {
    //   config.data.user_token = localStorage.getItem('user_token')
    // }


    config.baseURL = CONFIG.api_host;

    // console.log('请求:' + config.baseURL + config.url, config.data);
    return config
  },
  error => {
    // do something with request error
    msg({
      type: 'error',
      title: '提示',
      message: error
    })
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    // console.log('响应:'+response.config.baseURL+response.config.url, res);

    if (res.code == 200) {
      return res;
    } else if (res.code == 201) {
      msg({
        type: 'error',
        title: '提示',
        message: res.msg
      })
      return Promise.reject(res.msg)
    } else if (res.code == 202) {
      msg({
        type: 'error',
        title: '提示',
        message: res.msg
      })
      localStorage.setItem('user_id', '')
      localStorage.setItem('user_token', '')
      return Promise.reject(res.msg)
    } else {
      return Promise.reject('res.code 尚未定义错误')
    }

  },
  error => {
    msg({
      type: 'error',
      title: '提示',
      message: error
    })
    return Promise.reject(error)
  }
)

export default service

6. 页面loading效果 /public/index.html

    
    
    
    




    

        

            

            

                正在加载,请耐心等待...
                

                v1.3