Skip to content

C
common-templete
Commit 245bd18f by 汤强勇
Options

项目配置

parent 625524e7
Showing with 290 additions and 157 deletions
.eslintrc.js
......@@ -15,6 +15,9 @@ module.exports = {
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
],
globals: {
$: true
},
// required to lint *.vue files
plugins: ['vue'],
// add your custom rules here
......
build/webpack.dev.conf.js
......@@ -48,6 +48,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': require('../config/dev.env')
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
......@@ -85,8 +89,8 @@ module.exports = new Promise((resolve, reject) => {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
......
build/webpack.prod.conf.js
......@@ -11,7 +11,9 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const env = require('../config/prod.env')
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env')
const webpackConfig = merge(baseWebpackConfig, {
module: {
......@@ -23,8 +25,9 @@ const webpackConfig = merge(baseWebpackConfig, {
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
path: path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}`),//config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
publicPath: ['', env.project.replace(/['"]/g, ""), ''].join('/'),
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
plugins: [
......@@ -32,6 +35,10 @@ const webpackConfig = merge(baseWebpackConfig, {
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
......@@ -61,7 +68,9 @@ const webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: path.resolve(__dirname, `../dist/${env.project.replace(/['"]/g, "")}/index.html`),
template: 'index.html',
inject: true,
minify: {
......@@ -81,7 +90,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
minChunks(module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
......
config/config.request.js deleted 100644 → 0
module.exports = {
config: [{
project: '',
requestUrl: ''
}]
}
\ No newline at end of file
config/dev.env.js
......@@ -3,5 +3,8 @@ const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
'NODE_ENV': "'development'",
'host': "'//localhost'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
})
config/index.js
......@@ -6,30 +6,33 @@ const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/materials-list': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/materials-list',
'/api': {
target: 'http://wxapp.hotwind.net', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/materials-list': '/',
},
'^/api': ''
}
},
'/getarticlesummary': {
changeOrigin: true, // 是否跨域
target: 'http://testcenter.bigaka.net/crm/back/wechat/msg-mass/getarticlesummary',
'/hot': {
target: 'http://10.0.19.146:8080', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/getarticlesummary': '/',
},
},
'^/hot': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
......@@ -54,7 +57,7 @@ module.exports = {
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true,
cssSourceMap: true
},
build: {
......@@ -64,7 +67,8 @@ module.exports = {
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// assetsPublicPath: '/minapro/vue/', // '/minapro/vue/'
assetsPublicPath: '',
/**
* Source Maps
......@@ -85,6 +89,6 @@ module.exports = {
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report,
},
bundleAnalyzerReport: process.env.npm_config_report
}
}
config/prod.dev.env.js 0 → 100644
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
config/prod.env.js
'use strict'
const yargs = require('yargs').argv
const env = yargs.env
let path = './prod.prod.env'
if (env === 'dev') {
path = './prod.dev.env'
} else if (env === 'uat') {
path = './prod.uat.env'
}
const envConfig = require(path)
module.exports = {
NODE_ENV: '"production"'
NODE_ENV: '"production"',
...envConfig
}
config/prod.prod.env.js 0 → 100644
module.exports = {
"host": "'//wxapp.hotwind.net'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
config/prod.uat.env.js 0 → 100644
module.exports = {
"host": "'//10.0.16.178:8080'",
'project': "'crm/vue'",
'requestUrl': "'mina'"
}
package.json
......@@ -8,13 +8,16 @@
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --fix --ext .js,.vue src",
"build": "node build/build.js"
"build:dev": "node build/build.js --env=dev",
"build:uat": "node build/build.js --env=uat",
"build": "node build/build.js --env=prod"
},
"dependencies": {
"animate.css": "^3.7.0",
"axios": "^0.18.0",
"echarts": "^4.2.0-rc.2",
"element-ui": "^2.4.9",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"underscore": "^1.9.1",
"v-charts": "^1.19.0",
......@@ -78,7 +81,8 @@
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
"webpack-merge": "^4.1.0",
"yargs": "^12.0.1"
},
"engines": {
"node": ">= 6.0.0",
......
src/components/Header/index.vue
......@@ -244,49 +244,50 @@
</style>
<style lang="scss">
.message-panel {
top:70px !important;
padding-top: 0;
&.el-notification {
height: 864px;
width: 420px;
overflow: hidden;
overflow-y: scroll;
}
&.el-message-box {
width: auto;
}
.el-notification__group {
width: 100%;
}
.message-panel {
top: 70px !important;
padding-top: 0;
&.el-notification {
height: 864px;
width: 420px;
overflow: hidden;
}
&.el-message-box {
width: auto;
}
.el-notification__group {
width: 100%;
}
.el-notification__title {
height: 40px;
box-sizing: border-box;
line-height: 1;
position: relative;
background: #ffffff;
border-bottom: 1px solid #ddd;
z-index: 2;
padding: 10px 20px;
font-weight: bold;
font-size: 16px;
}
.el-notification__title {
height: 40px;
box-sizing: border-box;
line-height: 1;
position: relative;
background: #ffffff;
border-bottom: 1px solid #ddd;
z-index: 2;
padding: 10px 20px;
font-weight: bold;
font-size: 16px;
}
.el-notification__closeBtn {
z-index: 9;
}
.el-notification__closeBtn {
z-index: 9;
}
}
</style>
<script>
import { mapGetters, mapActions } from 'vuex'
import message from './message'
require('@/lib/slimscroll/slimscroll')
export default {
name: 'headerNav',
data () {
return {
showMenusPanel: false,
showEditMenusPanel: false,
showMessagePanelcontrol: null,
currentSelectIndex: -1,
oprations: [{name: '修改密码', link: 'http://www.baidu.com'}, {name: '安全退出', link: 'http://www.baidu.com'}],
helpers: [{
......@@ -336,22 +337,61 @@ export default {
components: {
message
},
mounted () {
this.$nextTick(() => {
this.initSlimscroll()
})
},
methods: {
...mapActions([
'showEditMenus',
'hideEditMenus'
]),
initSlimscroll () {
$('.message-panel.el-notification').slimScroll({
width: '100%', // 可滚动区域宽度
height: '100%', // 可滚动区域高度
size: '10px', // 滚动条宽度，即组件宽度
color: '#000', // 滚动条颜色
position: 'right', // 组件位置：left/right
distance: '0px', // 组件与侧边之间的距离
start: 'top', // 默认滚动位置：top/bottom
opacity: 0.4, // 滚动条透明度
alwaysVisible: true, // 是否 始终显示组件
disableFadeOut: false, // 是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
railVisible: true, // 是否 显示轨道
railColor: '#333', // 轨道颜色
railOpacity: 0.2, // 轨道透明度
railDraggable: true, // 是否 滚动条可拖动
railClass: 'slimScrollRail', // 轨道div类名
barClass: 'slimScrollBar', // 滚动条div类名
wrapperClass: 'slimScrollDiv', // 外包div类名
allowPageScroll: true, // 是否 使用滚轮到达顶端/底端时，滚动窗口
wheelStep: 20, // 滚轮滚动量
touchScrollStep: 200, // 滚动量当用户使用手势
borderRadius: '7px', // 滚动条圆角
railBorderRadius: '7px' // 轨道圆角
})
},
clickItem () {
console.log(this)
console.log('this is header index %o', this)
},
showMessage () {
const h = this.$createElement
this.$notify({
title: '消息中心',
message: h('message'),
duration: 0,
customClass: 'message-panel'
})
if (this.showMessagePanelcontrol) {
this.showMessagePanelcontrol.close()
this.showMessagePanelcontrol = null
} else {
const h = this.$createElement
this.showMessagePanelcontrol = this.$notify({
title: '消息中心',
message: h('message'),
duration: 0,
onClose: () => {
this.showMessagePanelcontrol = null
},
customClass: 'message-panel'
})
}
},
handleOpen () {},
handleClose () {},
......@@ -359,7 +399,7 @@ export default {
this.showMenusPanel = !this.showMenusPanel
},
toggleMenus (...args) {
console.log(args)
console.log('this is header toggleMenus %o', args)
},
handleEditMenus () {
if (!this.editMenus) {
......@@ -370,7 +410,7 @@ export default {
},
setActiveStyle (item, ev) {
this.currentSelectIndex = ev.index
console.log(item)
console.log('this is header setActiveStyle %o', item)
},
formatPathString (...args) {
return args.join('-')
......
src/components/Header/message.vue
......@@ -4,25 +4,28 @@
<div id="pullDown">
<span class="pullDownIcon" style="display: none"></span><span class="pullDownLabel">释放刷新</span>
</div>
<ul id="thelist">
<li v-for="(item, index) in items" class="message-item" :key="index" @click="openMessageContent(item)">
<ul id="thelist"
@mouseup="handlerMouseUp($event)"
@mousedown="handlerMousedown($event)"
>
<li v-for="(item, index) in items" class="message-item"
:key="index" @click="openMessageContent(item,$event)">
<div class="message-item-title">{{item.title}}</div>
<div class="message-desc">{{item.content_text}}</div>
<div class="message-desc">{{item.push_time | fomatDate}}</div>
</li>
</ul>
<div id="pullUp">
<span class="pullUpIcon" style="display: none"></span><span class="pullUpLabel">释放加载</span>
<span class="pullUpIcon" style="display: none"></span><span class="pullUpLabel">上拉加载更多</span>
</div>
</div>
</div>
</template>
<script>
require('@/lib/iscroll/iscroll.js')
require('@/lib/iscroll/iscroll')
const IScroll = window.iScroll
let pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset
let pullDownEl, pullDownOffset, pullUpEl, pullUpOffset
export default {
name: 'message',
data () {
......@@ -30,21 +33,19 @@ export default {
items: [],
myScroll: null,
pageNo: 0,
isLastPage: false
isLastPage: false,
eventType: '',
eventMouseStarEl: null,
eventMouseEndEl: null
}
},
components: {
},
components: {},
created () {
this.getListDataFromNet(1, 10)
},
watch: {
},
computed: {
},
watch: {},
computed: {},
mounted () {
this.$nextTick(() => {
this.loaded()
......@@ -63,7 +64,7 @@ export default {
{
params: {
pageNo: this.pageNo,
pageSize: 10,
pageSize: 20,
push_state: 2
}
}
......@@ -85,8 +86,8 @@ export default {
pullUpEl = document.getElementById('pullUp')
pullUpOffset = pullUpEl.offsetHeight
this.myScroll = new IScroll('wrapper', {
scrollbarClass: 'myScrollbar', /* 重要样式 */
useTransition: false, /* 此属性不知用意，本人从true改为false */
scrollbarClass: 'myScrollbar' /* 重要样式 */,
useTransition: false /* 此属性不知用意，本人从true改为false */,
topOffset: pullDownOffset,
onRefresh: () => {
this.$nextTick(() => {
......@@ -95,7 +96,9 @@ export default {
pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = ''
pullUpEl.querySelector('.pullUpLabel').innerHTML = this.isLastPage ? '没有更多数据' : '释放加载'
pullUpEl.querySelector('.pullUpLabel').innerHTML = this.isLastPage
? '没有更多数据'
: '释放加载'
}
})
},
......@@ -108,11 +111,17 @@ export default {
pullDownEl.className = ''
pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新'
this.minScrollY = -pullDownOffset
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
} else if (
this.y < this.maxScrollY - 5 &&
!pullUpEl.className.match('flip')
) {
pullUpEl.className = 'flip'
pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放加载'
this.maxScrollY = this.maxScrollY
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
} else if (
this.y > this.maxScrollY + 5 &&
pullUpEl.className.match('flip')
) {
pullUpEl.className = ''
pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新'
this.maxScrollY = pullUpOffset
......@@ -122,7 +131,8 @@ export default {
this.$nextTick(() => {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading'
pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...'
pullDownEl.querySelector('.pullDownLabel').innerHTML =
'加载中...'
this.pullDownAction()
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading'
......@@ -132,9 +142,29 @@ export default {
})
}
})
document.addEventListener('touchmove', function (e) { e.preventDefault() }, false)
document.addEventListener(
'touchmove',
function (e) {
e.preventDefault()
},
false
)
},
handlerMouseUp(event) {
this.eventMouseStarEl = event.target
this.eventType = ''
console.log(event)
},
handlerMousedown(event) {
this.eventMouseEndEl = event.target
console.log(event)
if (this.eventMouseStarEl && this.eventMouseStarEl === this.eventMouseEndEl) {
this.eventType = 'click'
} else {
this.eventType = 'mousemove'
}
this.eventMouseStarEl = this.eventMouseEndEl = null
},
pullDownAction () {
this.items = []
this.pageNo = 0
......@@ -147,55 +177,59 @@ export default {
},
openMessageContent (item) {
this.$alert(`${item.content}`, '', {
dangerouslyUseHTMLString: true,
customClass: 'message-panel'
})
console.log(arguments)
if (this.eventType === 'click') {
this.$alert(`${item.content}`, '', {
dangerouslyUseHTMLString: true,
customClass: 'message-panel'
})
}
}
}
}
</script>
<style scoped>
#wrapper {
width: 100%;
position: absolute;
top: 18px;
bottom: 0;
}
#pullDown,#pullUp {
border-bottom: none;
text-align: center;
height: 40px;
box-sizing: border-box;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
#wrapper {
width: 100%;
position: absolute;
top: 18px;
bottom: 0;
overflow: hidden;
}
#pullDown,
#pullUp {
border-bottom: none;
text-align: center;
height: 40px;
box-sizing: border-box;
line-height: 1;
display: flex;
justify-content: center;
align-items: center;
}
#pullUp {
border-top: solid 1px #d7d7d7;
text-align: center;
}
#pullUp {
border-top: solid 1px #d7d7d7;
text-align: center;
}
</style>
<style lang="scss" scoped>
.message-item {
border-top: 1px dashed #ddd;
padding: 5px 20px;
cursor: pointer;
&:first-child {
border-top:none;
}
}
.message-item-title {
font-size: 15px;
.message-item {
border-top: 1px dashed #ddd;
padding: 5px 20px;
cursor: pointer;
&:first-child {
border-top: none;
}
}
.message-desc {
font-size: 13px;
}
.message-item-title {
font-size: 15px;
}
.message-desc {
font-size: 13px;
}
</style>
src/components/Sidebar/index.vue
......@@ -16,7 +16,7 @@
':sort':'item.sort'
})
transition(name="fade",mode="out-in",appear)
.childrens-meuns('v-show'="unfold",'v-if'="currentMenus")
.childrens-meuns('v-show'="sidebarUnfoldInfo",'v-if'="currentMenus")
.children-item('v-for'="(it,index) in currentMenus.children",':key'="it.id",'@click'="choseChildrenItem(it)")
el-menu&attributes({
'default-active':"2",
......@@ -33,8 +33,8 @@
template
el-menu-item(':index'="idx | pipeString(index)",'v-if'="it.children",'v-for'="(i,idx) in it.children",':key'="i.id",'@click'="choseSubChildren(i)")
span.menu-item-name {{i.name}}
.arrow-tip(':class'="{'left-l':!unfold,'left-ll':unfold}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
img(class='icon-arrow',':class'="{right:!unfold}","src"='@/assets/images/sidebar/left-arrow-gray.png')
.arrow-tip(':class'="{'left-l':!sidebarUnfoldInfo,'left-ll':sidebarUnfoldInfo}",'@click'="toggleUnfold()",'v-show'="unfoldBtn")
img(class='icon-arrow',':class'="{right:!sidebarUnfoldInfo}","src"='@/assets/images/sidebar/left-arrow-gray.png')
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
......@@ -64,7 +64,7 @@ export default {
},
mounted () {},
computed: {
...mapGetters({menus: 'getMenus'}),
...mapGetters({menus: 'getMenus', sidebarUnfoldInfo: 'getSidebarUnfoldInfo'}),
currentMenus: {
get () {
const currentIndex = this.currentMenusIndex
......@@ -88,14 +88,14 @@ export default {
* 二级菜单
**/
choseChildrenItem (...args) {
console.log(args)
console.log('this is sidebar 二级菜单 %o', args)
},
/**
* 三级菜单
* @param args
**/
selectItemMenu (...args) {
console.log(args)
selectItemMenu (item) {
console.log('this is sidebar 三级菜单 %o', item)
},
toggleUnfold (...args) {
if (!args.length) {
......@@ -111,8 +111,10 @@ export default {
showUnfoldBtn () {
this.unfoldBtn = true
},
choseSubChildren (...args) {
console.log(args)
choseSubChildren (item) {
this.$router.push({
path: `/${item.link}`
})
},
getCurrentMenus (index) {
return this.menus[index]
......
src/components/sidebarItem/index.vue
......@@ -13,21 +13,31 @@ export default {
props: ['icon', 'link', 'type', 'id', 'sort', 'name', 'pid', 'grade'],
methods: {
clickItem () {
console.log(this)
console.log('this is sidebar item %o', this)
if (this.link) {
this.$router.push({
path: `${this.link}`
})
}
}
}
}
</script>
<style lang="stylus" scoped>
.sidebar-item
display block
color: #fff
/*text-align center*/
font-weight 400
font-size 10px
padding 10px 5px
i
margin-bottom 5px
.fa
font-size 25px
.sidebar-item {
display: block;
color: #fff;
/* text-align center */
font-weight: 400;
font-size: 10px;
padding: 10px 5px;
i {
margin-bottom: 5px;
}
}
.fa {
font-size: 25px;
}
</style>
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import config from '../config'
Vue.use(Router)
export default new Router({
mode: 'history',
base: `/${config.project}/`,
routes: [
{
path: '/',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment