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

步骤如下

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

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

需要注意

/App.vue 公共css

<style>
.el-loading-mask {
  /* background-color: rgba(255, 255, 255, 0.3) !important; */
}

#app {
  width: 100%;
  margin: 0 auto;
  min-width: 1300px;
  background: #fff;

  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 14px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* AntD 字体家族：https://ant.design/docs/spec/font-cn#%E5%AD%97%E4%BD%93%E5%AE%B6%E6%97%8F */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
</style>

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

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

}

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

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

修改 /router/index.js 404页面和测试页面和首页
新增网络请求文件 /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

页面loading效果 /public/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> -->
    <title></title>
    <style>
        html,
        body,
        #app {
            /* height: 100%; */
            margin: 0px;
            padding: 0px;
        }

        #loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999999;
            background: #0d0d1bcf;
        }

        #loader {
            display: block;
            position: relative;
            left: 50%;
            top: 50%;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 1 */
            border-top-color: #FFF;
            -webkit-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 2s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 2s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
            z-index: 1001;
        }

        #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 2 */
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 3s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 3s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            /* COLOR 3 */
            -moz-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            -webkit-animation: spin 1.5s linear infinite;
            /* Chrome, Opera 15+, Safari 5+ */
            animation: spin 1.5s linear infinite;
            /* Chrome, Firefox 16+, IE 10+, Opera */
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);
                /* IE 9 */
                transform: rotate(0deg);
                /* Firefox 16+, IE 10+, Opera */
            }

            100% {
                -webkit-transform: rotate(360deg);
                /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);
                /* IE 9 */
                transform: rotate(360deg);
                /* Firefox 16+, IE 10+, Opera */
            }
        }

        /* JavaScript Turned Off */

        #loader-wrapper .load_title {
            font-family: 'Open Sans';
            color: #FFF;
            font-size: 19px;
            width: 100%;
            text-align: center;
            z-index: 9999999999999;
            opacity: 1;
            line-height: 30px;

            position: absolute;
            bottom: 0;
        }

        #loader-wrapper .load_title span {
            font-weight: normal;
            font-style: italic;
            font-size: 13px;
            color: #FFF;
            opacity: 0.5;
        }
    </style>

</head>

<body>
    <div id="app">
        <div id="loader-wrapper">
            <div id="loader"></div>
            <div class="load_title">
                正在加载,请耐心等待...
                <br>
                <span>v1.3</span>
            </div>
        </div>
    </div>
</body>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 227,837评论 6赞 531
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 98,196评论 3赞 414
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 175,688评论 0赞 373
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 62,654评论 1赞 309
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 71,456评论 6赞 406
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 54,955评论 1赞 321
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 43,044评论 3赞 440
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 42,195评论 0赞 287
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 48,725评论 1赞 333
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 40,608评论 3赞 354
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 42,802评论 1赞 369
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 38,318评论 5赞 358
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 44,048评论 3赞 347
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 34,422评论 0赞 26
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 35,673评论 1赞 281
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 51,424评论 3赞 390
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 47,762评论 2赞 372

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

步骤如下

需要注意

推荐阅读更多精彩内容