Hooke / w4-vux-template

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
cb390f60 1 parent fe6e6a75

update 优化配置

Inline Side-by-side
Showing 39 changed files with 9 additions and 988 deletions
......@@ -2,18 +2,6 @@ var dev = [
{
title: '登录页',
page: 'login'
},
{
title: 'A',
page: 'A'
},
{
title: 'B',
page: 'B'
},
{
title: 'C',
page: 'C'
}
];
......
......@@ -2,18 +2,6 @@ var prod = [
{
title: '登录页',
page: 'login'
},
{
title: 'A',
page: 'A'
},
{
title: 'B',
page: 'B'
},
{
title: 'C',
page: 'C'
}
];
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="A"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="B"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script"></script>
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but test1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="C"></div>
<!-- built files will be auto injected -->
</body>
</html>
/* jshint esversion: 6 */
import Vue from 'vue';
import Vuex from 'vuex';
import store from './vuex/store';
import router from './router';
import VueRouter from 'vue-router';
import axios from './http';
import A from './A.vue';
import { sync } from 'vuex-router-sync';
import FastClick from 'fastclick';
import Vant from 'vant';
import 'vant/lib/index.css';
sync(store, router);
Vue.use(VueRouter);
Vue.use(Vuex);
Vue.use(Vant);
Vue.config.productionTip = false;
Vue.prototype.method = function () {};
FastClick.attach(document.body);
new Vue({
store,
router,
axios,
render: h => h(A)
}).$mount('#A');
<template lang="html">
<div id="A" style="height:100%;">
<router-view style="margin-top: 3rem"></router-view>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
components: {},
data () {
return {
isIndex: true,
showMore: true
}
},
computed: {
...mapState({
title: state => state.title
})
},
watch: {
$route: 'fetchData'
},
mounted () {
},
methods: {
fetchData () {
if (this.$route.meta.isIndex) {
this.isIndex = true
} else {
this.isIndex = false
}
}
}
}
</script>
<style lang="less">
html, body {
font-family: '微软雅黑', Microsoft YaHei;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #F0EFF5;
#login {
}
}
</style>
/* jshint esversion: 6 */
import axios from 'axios'
import router from './router'
// 请求拦截器
axios.interceptors.request.use(
config => {
// 发送请求前
return config
},
error => {
// 请求错误处理
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/'
})
break
case 404:
router.replace({
path: '/'
})
break
}
}
return Promise.reject(error.response.data)
})
export default axios
/* jshint esversion: 6 */
export default [
{
path: '/',
name: '登录',
component: () => import('./views/login.vue')
}
]
/* jshint esversion: 6 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import ConfigRouter from './route.js'
import store from './vuex/store'
Vue.use(VueRouter)
const router = new VueRouter({
history: false,
hashbang: true,
base: __dirname,
routes: ConfigRouter
})
router.beforeEach((to, from, next) => {
store.commit('updateLoadingStatus', true)
next()
})
router.afterEach((to, from, next) => {
store.commit('updateLoadingStatus', false)
})
export default router
function initFontSize (baseFontSize, baseWidth) {
let clientWidth = document.documentElement.clientWidth || window.innerWidth()
let size = Math.floor(clientWidth / baseWidth * baseFontSize)
document.querySelector('html').style.fontSize = size + 'px'
}
initFontSize(100, 1080)
window.onresize = function () {
initFontSize(100, 1080)
}
<template>
<div>
<!-- <van-password-input
:value="value"
info="密码为6位数字"
@focus="keyboard = 'custom'"
/> -->
<van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
<!-- <van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/> -->
<van-number-keyboard
:show="keyboard === 'custom'"
close-button-text="完成"
theme="custom"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
@close="onClose"
/>
</div>
</template>
<script>
export default {
mounted () {
},
data () {
return {
value: '',
showKeyboard: true,
keyboard: 'default'
}
},
methods: {
onInput (key) {
this.value = (this.value + key).slice(0, 5)
},
onDelete () {
this.value = this.value.slice(0, this.value.length - 1)
},
onBlur () {
// console.warn(this.value);
},
onClose () {
this.keyboard = false
}
}
}
</script>
<style lang="less" scoped>
.login {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
padding: 1.8rem 2.5rem;
width: 15rem;
button {
margin-top: 1.2rem;
position: absolute;
right: 2.5rem;
}
input {
display: block;
width: 95%;
padding: 0.8rem 0.4rem;
background: #fff;
border: 1px solid #d6d7dc;
font-size: 0.95rem;
}
}
</style>
export const increment = ({ commit }) => {
commit('INCREMENT')
}
export const decrement = ({ commit }) => {
commit('DECREMENT')
}
export const getCount = state => {
return state.count
}
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
Vue.use(Vuex)
// 应用初始状态
const state = {
isLoading: false,
title: '登录',
form: '',
direction: 'forward'
}
// 定义所需的 mutations
const mutations = {
updateLoadingStatus (state, status) {
state.isLoading = status
},
changeTitle (state, title) {
state.title = title
},
savedForm (state, form) {
state.form = form
},
UPDATE_DIRECTION (state, direction) {
state.direction = direction
}
}
// 创建 store 实例
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
// 多页面测试入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
import router from './router'
import VueRouter from 'vue-router'
import axios from './http'
import B from './B.vue'
import { sync } from 'vuex-router-sync'
import FastClick from 'fastclick'
import Vant from 'vant'
import 'vant/lib/index.css'
sync(store, router)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(Vant)
Vue.config.productionTip = false
Vue.prototype.method = function () {}
FastClick.attach(document.body)
new Vue({
store,
router,
axios,
render: h => h(B)
}).$mount('#B')
<template lang="html">
<div id="B" style="height:100%;">
<router-view style="margin-top: 3rem"></router-view>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
components: {},
data () {
return {
isIndex: true,
showMore: true
}
},
computed: {
...mapState({
title: state => state.title
})
},
watch: {
$route: 'fetchData'
},
mounted () {
},
methods: {
fetchData () {
if (this.$route.meta.isIndex) {
this.isIndex = true
} else {
this.isIndex = false
}
}
}
}
</script>
<style lang="less">
html, body {
font-family: '微软雅黑', Microsoft YaHei;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #F0EFF5;
#login {
}
}
</style>
/* jshint esversion: 6 */
import axios from 'axios'
import router from './router'
// 请求拦截器
axios.interceptors.request.use(
config => {
// 发送请求前
return config
},
error => {
// 请求错误处理
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/'
})
break
case 404:
router.replace({
path: '/'
})
break
}
}
return Promise.reject(error.response.data)
})
export default axios
/* jshint esversion: 6 */
export default [
{
path: '/',
name: '登录',
component: () => import('./views/login.vue')
}
]
/* jshint esversion: 6 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import ConfigRouter from './route.js'
import store from './vuex/store'
Vue.use(VueRouter)
const router = new VueRouter({
history: false,
hashbang: true,
base: __dirname,
routes: ConfigRouter
})
router.beforeEach((to, from, next) => {
store.commit('updateLoadingStatus', true)
next()
})
router.afterEach((to, from, next) => {
store.commit('updateLoadingStatus', false)
})
export default router
function initFontSize (baseFontSize, baseWidth) {
let clientWidth = document.documentElement.clientWidth || window.innerWidth()
let size = Math.floor(clientWidth / baseWidth * baseFontSize)
document.querySelector('html').style.fontSize = size + 'px'
}
initFontSize(100, 1080)
window.onresize = function () {
initFontSize(100, 1080)
}
<template>
<div>
<!-- <van-password-input
:value="value"
info="密码为6位数字"
@focus="keyboard = 'custom'"
/> -->
<van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
<!-- <van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/> -->
<van-number-keyboard
:show="keyboard === 'custom'"
close-button-text="完成"
theme="custom"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
@close="onClose"
/>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
showKeyboard: true,
keyboard: 'default'
}
},
methods: {
onInput (key) {
this.value = (this.value + key).slice(0, 5)
},
onDelete () {
this.value = this.value.slice(0, this.value.length - 1)
},
onBlur () {
// console.warn(this.value);
},
onClose () {
this.keyboard = false
}
}
}
</script>
<style lang="less" scoped>
.login {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
padding: 1.8rem 2.5rem;
width: 15rem;
button {
margin-top: 1.2rem;
position: absolute;
right: 2.5rem;
}
input {
display: block;
width: 95%;
padding: 0.8rem 0.4rem;
background: #fff;
border: 1px solid #d6d7dc;
font-size: 0.95rem;
}
}
</style>
export const increment = ({ commit }) => {
commit('INCREMENT')
}
export const decrement = ({ commit }) => {
commit('DECREMENT')
}
export const getCount = state => {
return state.count
}
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
Vue.use(Vuex)
// 应用初始状态
const state = {
isLoading: false,
title: '登录',
form: '',
direction: 'forward'
}
// 定义所需的 mutations
const mutations = {
updateLoadingStatus (state, status) {
state.isLoading = status
},
changeTitle (state, title) {
state.title = title
},
savedForm (state, form) {
state.form = form
},
UPDATE_DIRECTION (state, direction) {
state.direction = direction
}
}
// 创建 store 实例
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
// 多页面测试入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
import router from './router'
import VueRouter from 'vue-router'
import axios from './http'
import C from './C.vue'
import { sync } from 'vuex-router-sync'
import FastClick from 'fastclick'
import Vant from 'vant'
import 'vant/lib/index.css'
sync(store, router)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(Vant)
Vue.config.productionTip = false
Vue.prototype.method = function () {}
FastClick.attach(document.body)
new Vue({
store,
router,
axios,
render: h => h(C)
}).$mount('#C')
<template lang="html">
<div id="C" style="height:100%;">
<router-view style="margin-top: 3rem"></router-view>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
components: {},
data () {
return {
isIndex: true,
showMore: true
}
},
computed: {
...mapState({
title: state => state.title
})
},
watch: {
$route: 'fetchData'
},
mounted () {
},
methods: {
fetchData () {
if (this.$route.meta.isIndex) {
this.isIndex = true
} else {
this.isIndex = false
}
}
}
}
</script>
<style lang="less">
html, body {
font-family: '微软雅黑', Microsoft YaHei;
height: 100%;
width: 100%;
overflow-x: hidden;
background-color: #F0EFF5;
#login {
}
}
</style>
/* jshint esversion: 6 */
import axios from 'axios'
import router from './router'
// 请求拦截器
axios.interceptors.request.use(
config => {
// 发送请求前
return config
},
error => {
// 请求错误处理
return Promise.reject(error)
})
// 响应拦截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/'
})
break
case 404:
router.replace({
path: '/'
})
break
}
}
return Promise.reject(error.response.data)
})
export default axios
/* jshint esversion: 6 */
export default [
{
path: '/',
name: '登录',
component: () => import('./views/login.vue')
}
]
/* jshint esversion: 6 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import ConfigRouter from './route.js'
import store from './vuex/store'
Vue.use(VueRouter)
const router = new VueRouter({
history: false,
hashbang: true,
base: __dirname,
routes: ConfigRouter
})
router.beforeEach((to, from, next) => {
store.commit('updateLoadingStatus', true)
next()
})
router.afterEach((to, from, next) => {
store.commit('updateLoadingStatus', false)
})
export default router
function initFontSize (baseFontSize, baseWidth) {
let clientWidth = document.documentElement.clientWidth || window.innerWidth()
let size = Math.floor(clientWidth / baseWidth * baseFontSize)
document.querySelector('html').style.fontSize = size + 'px'
}
initFontSize(100, 1080)
window.onresize = function () {
initFontSize(100, 1080)
}
<template>
<div>
<!-- <van-password-input
:value="value"
info="密码为6位数字"
@focus="keyboard = 'custom'"
/> -->
<van-field v-model="value" :maxlength="10" @click.native="keyboard = 'custom'" @blur="onBlur" readonly placeholder="请输入用户名" />
<!-- <van-number-keyboard
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@blur="showKeyboard = false"
/> -->
<van-number-keyboard
:show="keyboard === 'custom'"
close-button-text="完成"
theme="custom"
extra-key="."
@blur="keyboard = ''"
@input="onInput"
@delete="onDelete"
@close="onClose"
/>
</div>
</template>
<script>
export default {
data () {
return {
value: '',
showKeyboard: true,
keyboard: 'default'
}
},
methods: {
onInput (key) {
this.value = (this.value + key).slice(0, 5)
},
onDelete () {
this.value = this.value.slice(0, this.value.length - 1)
},
onBlur () {
// console.warn(this.value);
},
onClose () {
this.keyboard = false
}
}
}
</script>
<style lang="less" scoped>
.login {
position: absolute;
top: 25%;
left: 50%;
transform: translateX(-50%);
padding: 1.8rem 2.5rem;
width: 15rem;
button {
margin-top: 1.2rem;
position: absolute;
right: 2.5rem;
}
input {
display: block;
width: 95%;
padding: 0.8rem 0.4rem;
background: #fff;
border: 1px solid #d6d7dc;
font-size: 0.95rem;
}
}
</style>
export const increment = ({ commit }) => {
commit('INCREMENT')
}
export const decrement = ({ commit }) => {
commit('DECREMENT')
}
export const getCount = state => {
return state.count
}
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
Vue.use(Vuex)
// 应用初始状态
const state = {
isLoading: false,
title: '登录',
form: '',
direction: 'forward'
}
// 定义所需的 mutations
const mutations = {
updateLoadingStatus (state, status) {
state.isLoading = status
},
changeTitle (state, title) {
state.title = title
},
savedForm (state, form) {
state.form = form
},
UPDATE_DIRECTION (state, direction) {
state.direction = direction
}
}
// 创建 store 实例
export default new Vuex.Store({
actions,
getters,
state,
mutations
})
......@@ -5,4 +5,4 @@ export default [
name: '登录',
component: () => import('./views/login.vue')
}
]
];
......
......@@ -27,6 +27,8 @@
<script>
export default {
mounted () {
},
data () {
return {
value: '',
......
......@@ -113,7 +113,6 @@ export default {
}, 1000)
},
onClick () {
// this.show = true;
if (_.random(1, true) > 0.5) {
const images = [
'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'
......
......@@ -41,17 +41,20 @@ const cdn = {
// 生产环境
build: {
css: [
'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css'
// 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css'
'http://boh.onwall.cn/vant@1.5/lib/index.css'
],
js: [
'https://cdn.bootcss.com/vue/2.5.21/vue.min.js',
'https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js',
'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js',
// 'https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js',
'http://boh.onwall.cn/vant@1.5/lib/vant.min.js',
'https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js',
'https://cdn.bootcss.com/moment.js/2.23.0/moment.min.js',
'https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js',
'https://cdn.bootcss.com/lodash.js/4.17.11/lodash.core.min.js',
// 'https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js',
'https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js'
]
}
......@@ -211,33 +214,6 @@ module.exports = {
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-A')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-B')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end()
.plugin('html-C')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
}
args[0].cdn = cdn.build;
args[0].dnsPrefetch = dnsPrefetch;
return args;
})
.end();
},
// css相关配置
......