步驟如下
"vue create '項目名'" 創(chuàng)建項目 （需要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 聲明打包相關(guān)配置
module.exports = {
publicPath: "./", // 可以設(shè)置成相對路徑理逊，這樣所有的資源都會被鏈接為相對路徑悦荒，打出來的包可以被部署在任意路徑
outputDir: "./dist", //打包時生成的生產(chǎn)環(huán)境構(gòu)建文件的目錄
assetsDir: './static123456', // 放置生成的靜態(tài)資源 (js告希、css忿檩、img卷拘、fonts) 的 (相對于 outputDir 的) 目錄
}
修改 /router/index.js 404頁面 和 測試頁面 和 首頁
新增網(wǎng)絡(luò)請求文件 /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('響應(yīng):'+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>
