Skip to content

dev / vue-cli3-template-master

Go to a project
Toggle navigation
Toggle navigation pinning
1a792bc3 by simon
Options

版本更新

1 parent 02c91549
Inline Side-by-side
Showing 28 changed files with 567 additions and 340 deletions
NODE_ENV = 'production'
VUE_APP_TITLE = 'fev'
\ No newline at end of file
VUE_APP_TITLE = 'sandbox'
\ No newline at end of file
......
{
"name": "vue-cli3-framework",
"name": "vue-cli3-vant-framework",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"fev": "vue-cli-service build --mode fev",
"sandbox": "vue-cli-service build --mode sandbox",
"lint": "vue-cli-service lint",
"oss": "node build/oss-released.js"
},
......@@ -18,8 +18,12 @@
"co": "^4.6.0",
"core-js": "^2.6.5",
"glob": "^7.1.4",
"js-cookie": "^2.2.1",
"mockjs": "^1.0.1-beta3",
"postcss-px2rem": "^0.3.0",
"postcss-pxtorem": "^4.0.1",
"sass-resources-loader": "^2.0.3",
"vant": "^2.2.11",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
......@@ -29,6 +33,7 @@
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.12.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
......
module.exports = {
plugins: {
'autoprefixer': {
browsers: ['Android >= 4.0', 'iOS >= 7']
},
'postcss-pxtorem': {
rootValue: 75,
propList: ['*'],
selectorBlackList: []
const AutoPrefixer = require("autoprefixer");
const px2rem = require("postcss-px2rem");
module.exports = ({
file
}) => {
let remUnit;
// file.dirname是绝对地址，所以项目名，文件目录不能带 'vant'
if (file && file.dirname && file.dirname.indexOf("vant") > -1) {
remUnit = 37.5;
} else {
remUnit = 75;
}
}
}
\ No newline at end of file
return {
plugins: [px2rem({
remUnit: remUnit,
}), AutoPrefixer({
browsers: ["last 20 versions", "android >= 4.0"]
})]
};
};
......
......@@ -4,13 +4,11 @@
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>-->
<router-view/>
<router-view />
</div>
</template>
<style lang="scss">
@import './styles/support';
#app {
/* font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
......@@ -82,6 +80,4 @@ div {
.app__content {
position: relative;
}
</style>
......
import axios from 'axios';
// import {
// Toast
// } from 'vant';
function Toast(msg) {
console.log("msg:", msg);
}
import {
Toast
} from 'vant';
import router from '@/router'
import {
getToken,
setToken,
} from '@/utils/auth'
// axios的默认url
// axios.defaults.baseURL = ""
// 服务器地址
let base = "https://ow.go.qudone.com";
let base = "http://api.bh.kdao.xin";
if (location.href.indexOf("//k.wxpai.cn") > 0) {
base = "https://api.k.wxpai.cn/bizproxy"
}
......@@ -33,11 +36,37 @@ if (location.href.indexOf("//k.wxpai.cn") > 0) {
// 响应拦截器
axios.interceptors.response.use(
response => {
let {
config
} = response;
let {
opt
} = config;
// 服务器状态码
if (response.status === 200) {
// 业务状态码
if (response.data.code === 200) {
return Promise.resolve(response);
} else {
Toast(response.data.bizMsg);
if (typeof (opt.toast) == "undefined" || opt.toast) {
Toast(response.data.errMsg);
}
switch (response.data.code) {
/**
* 登陆失败
* 清除cookies
* 根据业务可能要引导回登陆页
*/
case 403:
removeToken();
break;
default:
break;
}
return Promise.reject(response);
}
} else {
......@@ -48,48 +77,6 @@ axios.interceptors.response.use(
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
......@@ -103,6 +90,7 @@ axios.interceptors.response.use(
}
);
//formDataHeaders设置
let formDataHeaders = {
headers: {
......@@ -113,15 +101,30 @@ let formDataHeaders = {
/**
* 封装get方法
* @param {*} params
*
*/
export const httpGet = params => {
let {
url,
data
data,
mode,
opt = Object.assign({}, params.opt),
sid = true
} = params;
return axios.get(`${base}${url}`, {
let reqUrl = `${base}${url}`;
if (mode == "custom") {
reqUrl = `${url}`
}
let headers = {}
if (sid) {
headers.sessionId = getToken();
}
return axios.get(reqUrl, {
params: data
}).then(res => res.data.content);
}, {
headers,
opt
}).then(res => res.data);
}
/**
......@@ -131,9 +134,23 @@ export const httpGet = params => {
export const httpPost = params => {
let {
url,
data
data,
mode,
opt = Object.assign({}, params.opt),
sid = true
} = params;
return axios.post(`${base}${url}`, data).then(res => res.data.content);
let reqUrl = `${base}${url}`;
if (mode == "custom") {
reqUrl = `${url}`
}
let headers = {}
if (sid) {
headers.sessionId = getToken();
}
return axios.post(reqUrl, data, {
headers,
opt
}).then(res => res.data);
}
......@@ -150,7 +167,12 @@ export const httpPost = params => {
export const formdata = params => {
let {
url,
data
data,
config,
} = params;
return axios.post(`${base}${url}`, data, formDataHeaders).then(res => res.data);
if (!config) {
config = {}
}
config.header = formDataHeaders.headers
return axios.post(`${base}${url}`, data, config).then(res => res.data);
}
\ No newline at end of file
......
......@@ -3,17 +3,50 @@ import App from './App.vue'
import router from './router'
import store from './store'
import Mock from './mock'
Mock.bootstrap();
// import Mock from './mock'
// Mock.bootstrap();
import 'amfe-flexible';
import 'amfe-flexible/index.js'
import '@/styles/index.scss' // global css
import '@/styles/index.scss' // global css
import '@/styles/fonticon.scss' // 图标字体
import '@/assets/fonts/font.scss' // 字体引入
// import '@styles/utils.scss' /*引入公共样式*/
Vue.config.productionTip = false
import {
Swipe,
SwipeItem,
Lazyload,
Tab,
Tabs,
Sticky,
Popup,
Tabbar,
TabbarItem,
Icon,
Toast
} from 'vant';
Vue.use(Swipe).use(SwipeItem)
.use(Lazyload)
.use(Tab).use(Tabs)
.use(Sticky)
.use(Popup)
.use(Tabbar).use(TabbarItem)
.use(Icon)
.use(Toast);
new Vue({
router,
store,
data: {
isInit: false,
},
render: h => h(App)
}).$mount('#app')
\ No newline at end of file
......
<template>
<div class="about">
<h1>This is an about page</h1>
<div class="cc">
<div class="ddd">1233</div>
</div>
<div>This is an about page</div>
<van-button type="default">默认按钮</van-button>
<div class="ccc"></div>
</div>
</template>
<script>
import { Button } from 'vant'
export default {
name: 'about',
components: {
[Button.name]: Button
}
}
</script>
<style lang="scss" scoped>
.cc {
.ddd {
.about{
font-size: 32px;
}
.ccc{
width: 746px;
height: 300px;
background-color: wheat;
}
}
</style>
......
<template>
<div class="home">home</div>
<div class="home">
<div >旅游必备清单</div>
</div>
</template>
<script>
......@@ -9,9 +12,8 @@ export default {
</script>
<style lang="scss" scoped>
@import "../../styles/support";
.home {
// @extend .u-flex;
text-align: center;
font-size: 14PX;
}
</style>
......
......@@ -15,7 +15,5 @@ export default {
initData() {}
},
mounted() {},
created() {
console.log("demo created");
}
created() {}
}
\ No newline at end of file
......
File mode changed
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
<!-- <span class="iconfont iconclose">demo</span> -->
demo
</div>
</div>
</div>
</template>
<script src="./demo.js"></script>
<style lang="scss" scoped>
@import './demo.scss';
</style>
\ No newline at end of file
@import './../../styles/support';
import api from '../../api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {},
toLottery() {
this.$router.push({
path: "/lottery"
})
}
},
mounted() {},
created() {
}
}
\ No newline at end of file
......@@ -6,7 +6,7 @@
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
<span class="iconfont iconclose">demo</span>
<div @click="toLottery">Index</div>
</div>
</div>
</div>
......@@ -14,5 +14,5 @@
<script src="./index.js"></script>
<style lang="scss" scoped>
// @import './index.scss';
@import "./index.scss";
</style>
\ No newline at end of file
......
import api from '../../api/api'
import {
httpGet,
httpPost
} from '../../api/fetch-api.js'
export default {
data() {
return {
key: 'value'
}
},
components: {},
methods: {
initData() {},
toIndex() {
this.$router.push({
path: "/"
})
},
},
mounted() {},
created() {}
}
\ No newline at end of file
.content {
color: $colorBlue;
@extend .underline;
}
<template>
<div class="page">
<div class="app__bgc bgc"></div>
<div class="app__bg bg"></div>
<div class="app__content main">
<div class="top-space"></div>
<div class="content">
<div @click="toIndex">lottery</div>
</div>
</div>
</div>
</template>
<script src="./lottery.js"></script>
<style lang="scss" scoped>
@import "./lottery.scss";
</style>
\ No newline at end of file
import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/Home.vue'
import Index from './pages/index/index.vue'
Vue.use(Router)
const routes = [{
path: '/',
name: 'home',
component: Home,
name: 'index',
component: Index,
meta: {
title: '首页'
title: ''
}
},
{
path: '/lottery',
name: 'lottery',
component: () => import('./pages/lottery/lottery.vue'),
meta: {
title: 'lottery'
}
},
{
path: '/demo',
name: 'demo',
component: () => import('./pages/demo/index.vue'),
component: () => import('./pages/demo/demo.vue'),
meta: {
title: '模板'
}
......
/**
* ------------------------------------------------------------------
* 支持文件
* 需要引用的地方均需要加上这个支持文件
*
* ------------------------------------------------------------------
*
*/
@import "mixins";
@import "var";
// @import "utils";
// 图标字体
@import "fonticon";
// 字体引入
@import './../assets/fonts/font.scss'
\ No newline at end of file
/**
* ------------------------------------------------------------------
* 原子类
*
* ------------------------------------------------------------------
*
*/
@import "support";
// Margin
.u-mt-smaller {
margin-top: $marginTopSmaller;
}
.u-mt-small {
margin-top: $marginTopSmall;
}
.u-mt-medium {
margin-top: $marginTopMedium;
}
.u-mt-large {
margin-top: $marginTopLarge;
}
.u-mt-larger {
margin-top: $marginTopLarger;
}
.u-mb-smaller {
margin-bottom: $marginTopSmaller;
}
.u-mb-small {
margin-bottom: $marginTopSmall;
}
.u-mb-medium {
margin-bottom: $marginTopMedium;
}
.u-mb-large {
margin-bottom: $marginTopLarge;
}
.u-mb-larger {
margin-bottom: $marginTopLarger;
}
// Padding
.u-pt-smaller {
padding-top: $paddingTopSmaller;
}
.u-pt-small {
padding-top: $paddingTopSmall;
}
.u-pt-medium {
padding-top: $paddingTopMedium;
}
.u-pt-large {
padding-top: $paddingTopLarge;
}
.u-pt-larger {
padding-top: $paddingTopLarger;
}
.u-pb-smaller {
padding-bottom: $paddingTopSmaller;
}
.u-pb-small {
padding-bottom: $paddingTopSmall;
}
.u-pb-medium {
padding-bottom: $paddingTopMedium;
}
.u-pb-large {
padding-bottom: $paddingTopLarge;
}
.u-pb-larger {
padding-bottom: $paddingTopLarger;
}
// 布局方位
.u-ta-c {
text-align: center !important;
}
.u-ta-l {
text-align: left !important;
}
.u-ta-r {
text-align: right !important;
}
.u-fl-l {
float: left;
}
.u-fl-n {
float: none;
}
.u-fl-r {
float: right;
}
.u-d-b {
display: block;
}
.u-d-i {
display: inline !important;
}
.u-d-ib {
display: inline-block !important;
}
.u-d-n {
display: none !important;
}
.u-d-t {
display: table;
table-layout: fixed;
}
.u-d-tc {
display: table-cell;
}
.u-va-b {
vertical-align: bottom;
}
.u-va-m {
vertical-align: middle;
}
.u-va-t {
vertical-align: top;
}
// clearfix
.u-clearfix {
@include clearfix;
}
// 虚拟格式
.u-cur-d {
cursor: default;
}
.u-cur-p {
cursor: pointer;
}
// flex
.u-flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.u-flex-item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
// 小程序中模拟ul、li
.u-ul {
padding-left: 30px;
text-align: left;
display: block;
}
.u-li {
position: relative;
font-size: $fontSizeSmall;
line-height: $fontSizeSmall + 4px;
margin-bottom: $marginTopSmall;
&:before {
position: absolute;
content: " ";
top: 14px;
left: -20px;
width: 8px;
height: 8px;
border-radius: 8px;
background-color: $colorBlack;
}
}
#app {
border: 0;
margin: 0;
padding: 0;
}
body,
div {
border: 0;
margin: 0;
padding: 0;
}
.app__width {
width: 750px;
}
.app__width {
width: 750px;
}
.app__inner {
margin: 20px;
}
.app__title {
font-size: $fontSize;
line-height: $fontSize + 4px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 0.5px solid #eeeeee;
}
.app__desc {
font-size: $fontSizeSmaller;
line-height: $fontSizeSmaller + 2px;
margin-bottom: 20px;
color: $colorGray;
}
.app__bgc {
position: fixed;
background-color: #ffffff;
width: 100%;
height: 100%;
}
.app__bg {
position: absolute;
width: 100%;
height: 100%;
}
.app__top-shadow {
position: fixed;
width: 750px;
height: 1px;
box-shadow: 0px 4px 0.9px 0.1px rgba(6, 0, 1, 0.07);
background-color: #ffffff;
}
.app__content {
position: relative;
}
/**
* ------------------------------------------------------------------
* Sass Minxins
*
* 参考收集：
* https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap/mixins
* ------------------------------------------------------------------
*
*/
// 居中按钮样式
@mixin btn-center($width, $height) {
width: $width;
height: $height;
line-height: $height;
text-align: center;
}
// 超过多少行自动省略 默认一行
@mixin ellipsis($line: 1) {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
overflow: hidden;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
@mixin ellipsis1() {
display: -webkit-box;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 文字截取
@mixin text-overflow() {
......@@ -37,6 +56,7 @@
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
......@@ -80,3 +100,82 @@
background-color: transparent;
border: 0;
}
// 橙色底实心 自定义圆角按钮
@mixin btc($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
@extend .fcc;
padding: 0 $padding;
height: $hei;
line-height: normal;
text-align: center;
border-radius: $borderRadius;
background-color: $cOrange;
font-size: $fontSize;
color: #ffffff;
letter-spacing: 1.4px;
cursor: pointer;
user-select: none;
}
// 白底空心 自定义圆角按钮
@mixin btc-o($hei: 22px, $borderRadius: 4px, $padding: 12px, $fontSize: 14px) {
@extend .fcc;
@extend .bb;
padding: 0 $padding;
height: $hei;
line-height: normal;
text-align: center;
border-radius: $borderRadius;
font-size: $fontSize;
color: $cOrange;
letter-spacing: 1.4px;
background-color: #ffffff;
cursor: pointer;
border: solid 1px $cOrange;
user-select: none;
}
// 定宽 橙色底实心圆角按钮
@mixin btc2($wid: 118px, $hei: 22px, $fontSize: 14px) {
width: $wid;
height: $hei;
line-height: $hei + 2px;
text-align: center;
border-radius: $hei * 0.5;
background-color: $cOrange;
font-size: $fontSize;
color: #ffffff;
letter-spacing: 1.4px;
cursor: pointer;
user-select: none;
}
// 橙框橙字
@mixin btc3($hei: 22px, $fontSize: 14px) {
height: $hei;
line-height: $hei;
padding: 0 12px;
text-align: center;
border-radius: 2px;
font-size: $fontSize;
letter-spacing: 1.4px;
cursor: pointer;
user-select: none;
color: $cOrange;
border: solid 1px $cOrange;
}
// 定宽 黑色底实心圆角按钮
@mixin btc4($wid: 118px, $hei: 22px, $fontSize: 14px) {
width: $wid;
height: $hei;
line-height: $hei + 2px;
text-align: center;
border-radius: $hei * 0.5;
background-color: $cLightDard;
font-size: $fontSize;
color: #ffffff;
letter-spacing: 1.4px;
cursor: pointer;
user-select: none;
}
......
.bis {
background-repeat: no-repeat;
background-size: 100% 100%;
}
//flex 布局和 子元素 对其方式
.fl {
display: flex;
}
.flc {
display: flex;
justify-content: center;
}
.flb {
display: flex;
justify-content: space-between;
}
.fla {
display: flex;
align-items: center;
}
//水平和垂直居中
.fcc {
display: flex;
justify-content: center;
align-items: center;
}
// 为元素设定的宽度和高度决定了元素的边框盒。
.bb {
box-sizing: border-box;
}
// 满屏
.fullp {
width: 100%;
height: 100%;
}
.pointer {
cursor: pointer;
}
.text-l {
text-align: left;
}
.text-r {
text-align: right;
}
.text-c {
text-align: center;
}
.underline {
text-decoration: underline;
}
.pointer {
cursor: pointer;
}
import Cookies from 'js-cookie'
const TokenKey = 'kd-app-token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
const Timestamp = new Date().getTime();
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path')
// 打包目录
let webpack_public_path = 'dist'
if (process.env.NODE_ENV === 'production') {
webpack_public_path = process.env.VUE_APP_TITLE
}
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: (config) => {
config.resolve.alias
.set('@', resolve('src'))
.set('@public', resolve('public'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@pages', resolve('src/pages'))
.set('@api', resolve('src/api'))
.set('@styles', resolve('src/styles'))
.set('@store', resolve('src/store'))
.set('@utils', resolve('src/utils'))
.set('@common', resolve('src/common'));
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
// 要公用的scss的路径
resources: ['./src/styles/vars.scss', './src/styles/mixins.scss', './src/styles/utils.scss']
})
.end()
})
},
configureWebpack: { // webpack 配置
// 修改打包后js文件名
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
......@@ -70,11 +104,11 @@ module.exports = {
productionSourceMap: false,
// 它支持webPack-dev-server的所有选项
devServer: {
host: "localhost",
port: 9001, // 端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
}
// devServer: {
// host: "localhost",
// port: 9001, // 端口号
// https: false, // https:{type:Boolean}
// open: true, //配置自动启动浏览器
// // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
// }
};
\ No newline at end of file
......