Skip to content

ZhangJianFrontEnd
ZhangJianFrontEnd
Commit 51c55a75 by xiaxiansheng
Options

Merge branch '20210714' into 'master' 

20210714

See merge request vue-project/basic!1
parents 63f54306 cf36fbe6
Showing with 43 additions and 1166 deletions
.gitmodules 0 → 100644
[submodule "runner"]
path = runner
url = git@123.207.147.179:vue-project/runner.git
build/build.prd.js deleted 100644 → 0
/**
* @file 项目打包服务, 用来构建一个全量生产包
*/
'use strict'
const ora = require('ora')
const rm = require('rimraf')
const chalk = require('chalk')
const path = require('path')
const webpack = require('webpack')
const config = require('./webpack.prod.conf')
const rmFile = path.resolve(__dirname, '../dist')
// build start loading
const spinner = ora('building for production...')
spinner.start()
// 构建全量压缩包
rm(rmFile, function (err) {
if (err) throw err
webpack(config, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(
stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n'
)
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'))
console.log(
chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
" Opening index.html over file:// won't work.\n"
)
)
})
})
build/vue-loader.config.js deleted 100644 → 0
/**
* @file Vue-loader配置
*/
const { dev = {}, build = {} } = require('../config/config')
module.exports = (isDev) => {
return {
preserveWhitespace: true, // 清空多余空格
extractCSS: !isDev, // 将.vue中的css单独抽离出来
cssModules: { // 解决class命名空间冲突
localIdentName: isDev ? '[path]-[name]-[hash:base64:5]' : '[hash:base64:5]', // class命名
camelCase: true // 驼峰class命名
},
// hotReload: false // 是否关闭组件热重载, 根据环境变量生成
// 自定义loader模块
loaders: isDev ? dev.vueloaderConf : build.vueloaderConf,
preLoader: {
js: ''
},
postLoader: {}
}
}
build/webpack.base.conf.js deleted 100644 → 0
/**
* @file webpack.base.conf 生产 & 开发环境通用配置
*/
'use strict'
const path = require('path')
const webpack = require('webpack')
const createVueLoaderOptions = require('./vue-loader.config')
// 拼接路径
function resolve (track) {
return path.join(__dirname, '..', track)
}
// 当前运行环境
const isDev = process.env.NODE_ENV === 'development'
const defaultPlugins = [
// 主要作用是在此处可以根据isdev配置process.env,一是可以在js代码中可以获取到process.env
// 二是webpack或则vue等根据process.env如果是development,会给一些特殊的错误提醒等,而这些特殊项在正式环境是不需要的
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: `"${process.env.NODE_ENV}"`
}
})
]
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'),
resolve: {
// 自动解析文件扩展名(补全文件后缀)(左 -> 右)
extensions: ['.js', '.vue', '.json'],
// 配置别名映射
alias: {
// 键后加上$,表示精准匹配
vue$: 'vue/dist/vue.esm.js',
'@': resolve('src'),
utils: resolve('src/public/utils/utils'),
components: resolve('src/components'),
public: resolve('public')
}
},
module: {
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre' // 先使用eslint预处理对应的文件, 校验通过再使用对应的loader处理
},
{
test: /\.vue$/,
loader: 'vue-loader', // 处理.vue文件
options: createVueLoaderOptions(isDev)
},
{
test: /\.jsx$/,
loader: 'babel-loader' // 处理jsx文件
},
// 使用babel-loader来处理src下所有js文件, 详细babel配置在.babelrc
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
include: resolve('src')
},
// 使用url-loader(file-loader的一个再封装)对引入的图片进行编码,此处可将小于20480字节(20kb)的图片转为DataURL(base64),
// 大于limit字节的会调用file-loader进行处理
// 图片一般发布后都是长缓存,故此处文件名加入hash做版本区分
{
test: /\.(jpg|png|gif|svg|jpeg|txt|exl)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1024,
name: '[name]_[hash:8].[ext]',
outputPath: 'images/' // 静态资源输出路径
}
}
]
},
{
// iconfont字体文件
test: /\.(eot|ttf|svg|woff|woff2)(\?\S*)?$/,
// 处理test中的文件类型需要用到的loader类型(名称)
use: {
loader: 'file-loader'
}
}
]
},
plugins: defaultPlugins.concat([])
}
build/webpack.dev.conf.js deleted 100644 → 0
/**
* @file webpack.dev.conf 开发环境配置
*/
'use strict'
const path = require('path')
const webpack = require('webpack')
const devConfig = require('../config/config').dev // 开发环境配置
const baseConf = require('./webpack.base.conf')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const notifier = require('node-notifier')
const devConf = merge(baseConf, {
output: {
filename: '[name].[hash:8].js',
publicPath: devConfig.publicPath
},
devtool: devConfig.devtoolType,
devServer: {
// HMR控制台log等级
clientLogLevel: 'warning',
// 热加载
hot: true,
// 自动刷新
inline: true,
// 自动打开浏览器
open: false,
// 它依赖于HTML5 history API, 如果设置为true, 所有的跳转将指向index.html
historyApiFallback: true,
// 主机名
host: devConfig.host,
// 端口号
port: devConfig.port,
// 配置反向代理解决跨域
proxy: devConfig.proxyTable,
// 代码进行压缩。加快开发流程和优化的作用
compress: true,
// 在浏览器上全屏显示编译的errors或warnings
overlay: {
errors: true,
warnings: false
},
// 终端输出的只有初始启动信息, webpack 的警告和错误是不输出到终端的
quiet: false
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.less$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
}
]
},
plugins: [
// 开启HMR(热替换功能, 替换更新部分, 不重载页面)
new webpack.HotModuleReplacementPlugin(),
// 显示模块相对路径
new webpack.NamedModulesPlugin(),
// 编译出错时, 该插件可跳过输出, 确保输出资源不会包含错误
// new webpack.NoEmitOnErrorsPlugin()
new HtmlWebpackPlugin({
title: 'vue-cli-init',
filename: 'index.html',
template: 'index.html',
// js资源插入位置, true表示插入到body元素底部
inject: true
}),
// 编译提示插件
new FriendlyErrorsPlugin({
// 编译成功提示
compilationSuccessInfo: {
message: [
`Your application is running here: http://${devConfig.host}:${devConfig.port}`
]
},
onErrors: function (severity, errors) {
if (severity !== 'error') {
return
}
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
// 编译出错时右下角弹出错误提示
notifier.notify({
title: 'vue-cli-init',
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'xc-cli.png')
})
},
clearConsole: true
})
]
})
module.exports = devConf
build/webpack.prod.conf.js deleted 100644 → 0
/**
* @file webpack.base.conf 生产环境配置
*/
'use strict'
const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const prodConfig = require('../config/config').build // 生产环境配置
const baseConf = require('./webpack.base.conf')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
// 资源路径
function assetsPath (_path) {
return path.join(prodConfig.staticPath, _path)
}
const prodConf = merge(baseConf, {
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: prodConfig.publicPath,
filename: assetsPath('js/[name].[chunkhash:8].js'),
chunkFilename: assetsPath('js/[name].[chunkhash:8].js')
},
devtool: prodConfig.devtoolType,
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'postcss-loader'],
fallback: 'vue-style-loader'
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'less-loader', 'postcss-loader'],
fallback: 'vue-style-loader'
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: ['css-loader', 'sass-loader', 'postcss-loader'],
fallback: 'vue-style-loader'
})
}
]
},
plugins: [
new webpack.BannerPlugin('vue-cli-init'),
// 压缩js
new webpack.optimize.UglifyJsPlugin({
parallel: true,
compress: {
warnings: false
}
}),
// 分离入口引用的css,不内嵌到js bundle中!
new ExtractTextPlugin({
filename: assetsPath('styles/[name].[contentHash:8].css'),
publicPath: '../../',
allChunks: false
}),
// 压缩css
new OptimizeCSSPlugin(),
// 根据模块相对路径生成四位数hash值作为模块id
new webpack.HashedModuleIdsPlugin(),
// 作用域提升,提升代码在浏览器执行速度
new webpack.optimize.ModuleConcatenationPlugin(),
// 抽离公共模块,合成一个chunk,在最开始加载一次,便缓存使用,用于提升速度
// 1. 第三方库chunk, 公共部分
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
// 在node_modules的js文件
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
)
}
}),
// 2. 缓存chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// 3.异步 公共chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
children: true,
// (选择所有被选 chunks 的子 chunks)
async: true,
// (创建一个异步 公共chunk)
minChunks: 3
// (在提取之前需要至少三个子 chunk 共享这个模块)
}),
// 将整个文件复制到构建输出指定目录下
// new CopyWebpackPlugin([
// {
// from: path.resolve(__dirname, '../static'),
// to: prodConfig.staticPath,
// ignore: ['.*']
// }
// ]),
// 生成html
new HtmlWebpackPlugin({
filename: path.resolve(__dirname, '../dist/index.html'),
template: 'index.html',
favicon: path.resolve(__dirname, '../favicon.ico'),
// js资源插入位置, true表示插入到body元素底部
inject: true,
// 压缩配置
minify: {
// 删除Html注释
removeComments: true,
// 去除空格
collapseWhitespace: true,
// 去除属性引号
removeAttributeQuotes: true
},
// 根据依赖引入chunk
chunksSortMode: 'dependency'
})
]
})
module.exports = prodConf
config/config.js deleted 100644 → 0
/**
* @file 配置构建开发环境和生产环境差异化参数
*/
const _path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// vue-loader基本配置
const baseVueLoaderConf = {
postcss: {
config: {
path: _path.resolve('../')
}
},
// 转为require调用, 让webpack处理目标资源
transformToRequire: {
video: 'src',
source: 'src',
img: 'src',
image: 'xlink:href'
}
}
// vue-loader开发环境配置
const devVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
loaders: {
css: ['vue-style-loader', 'css-loader'],
less: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
cssSourceMap: true
})
// vue-loader生产环境配置
const buildVueLoaderConf = Object.assign({}, baseVueLoaderConf, {
loaders: ExtractTextPlugin.extract({
use: ['css-loader', 'postcss-loader', 'less-loader'],
fallback: 'vue-style-loader'
}),
cssSourceMap: false
})
// 开发 / 生产环境 配置参数
module.exports = {
dev: {
publicPath: '/',
devtoolType: '#cheap-module-eval-source-map',
vueloaderConf: devVueLoaderConf,
host: '127.0.0.1',
port: '8081',
// 开发环境跨域配置
proxyTable: {
'/apis': {
target: 'http://192.168.0.121:8881',
pathRewrite: {
'^/apis': '/'
},
changeOrigin: true // 是否跨域 - 开启代理, 在本地会创建一个虚拟服务端, 然后发送请求的数据, 并同时接收请求的数据, 这样服务端和服务端进行数据的交互就不会有跨域问题
}
}
},
build: {
// publicPath: '127.0.0.1', // 生产环境资源路径(部署后的访问url)
publicPath: '../../',
devtoolType: '#cheap-module-source-map',
vueloaderConf: buildVueLoaderConf,
host: '',
staticPath: 'static'
}
}
package.json
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --history-api-fallback --config build/webpack.dev.conf.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --history-api-fallback --config runner/build/webpack.dev.conf.js",
"start": "npm run dev", "start": "npm run dev",
"build": "cross-env NODE_ENV=production node build/build.prd.js", "build": "cross-env NODE_ENV=production node runner/build/build.prd.js",
"lint": "eslint --ext .js --ext .jsx --ext .vue client/", "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/", "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/",
"precommit": "npm run lint-fix" "precommit": "npm run lint-fix"
......
postcss.config.js
module.exports = { module.exports = {
plugins: [ plugins: [
require("autoprefixer")({ require('autoprefixer')({
overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] overrideBrowserslist: ['last 2 version', '>1%', 'ios 7']
}) })
] ]
}; }
runner @ d295deac
Subproject commit d295deac16c7024d3df80eabf415f5080f83fdfa
src/App.vue
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
</template> </template>
<script> <script>
import { refreshScale } from './public/utils/refreshSize' import { refreshScale } from 'runner/public/utils/refreshSize'
export default { export default {
name: 'app', name: 'app',
......
src/assets/fonts/fonts.less
/* 数字字体包 */ /* 数字字体包 */
@font-face { @font-face {
font-family: "CenturyGothic"; font-family: "CenturyGothic";
src: url('./CenturyGothic.ttf'); src: url('./CenturyGothic.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
/* UI文字字体包 */ /* UI文字字体包 */
@font-face { @font-face {
font-family: "Alibaba PuHuiTi35"; font-family: "Alibaba PuHuiTi35";
src: url('./AlibabaPuHuiTi-2-35-Thin.ttf'); src: url('./AlibabaPuHuiTi-2-35-Thin.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Alibaba PuHuiTi45"; font-family: "Alibaba PuHuiTi45";
src: url('./AlibabaPuHuiTi-2-45-Light.ttf'); src: url('./AlibabaPuHuiTi-2-45-Light.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Alibaba PuHuiTi55"; font-family: "Alibaba PuHuiTi55";
src: url('./AlibabaPuHuiTi-2-55-Regular.ttf'); src: url('./AlibabaPuHuiTi-2-55-Regular.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Alibaba PuHuiTi65"; font-family: "Alibaba PuHuiTi65";
src: url('./AlibabaPuHuiTi-2-65-Medium.ttf'); src: url('./AlibabaPuHuiTi-2-65-Medium.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Alibaba PuHuiTi75"; font-family: "Alibaba PuHuiTi75";
src: url('./AlibabaPuHuiTi-2-75-SemiBold.ttf'); src: url('./AlibabaPuHuiTi-2-75-SemiBold.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-Digital-B";
src: url('./DS-DIGIB-2.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-Digital-I";
src: url('./DS-DIGII-3.TTF');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "DS-Digital-T";
src: url('./DS-DIGIT-4.TTF');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
src/components/CountRoll.vue deleted 100644 → 0
<template>
<div class="chartNum">
<div class="box-item">
<li v-for="(item,index) in orderNum"
:class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
        <span v-if="!isNaN(item)">
         <i ref="numberItem">0123456789</i>
       </span>
       <span class="comma" v-else>{{item}}</span>
</li>
</div>
</div>
</template>
<script>
export default {
name: 'CountRoll',
props: {
count: Number
},
data () {
return {
orderNum: []
}
},
mounted () {
this.toOrderNum(this.count)
this.increaseNumber()
},
deactivated () {
clearInterval(this.timer)
},
methods: {
// TODO: 定时器
increaseNumber () {
this.timer = setInterval(() => {
this.setNumberTransform()
}, 300)
},
// TODO：设置文字滚动
setNumberTransform () {
const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
const numberArr = this.orderNum.filter(item => !isNaN(item))
// 结合CSS 对数字字符进行滚动
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
}
clearInterval(this.timer)
},
// TODO: 处理数字
toOrderNum (num) {
num = this.utils.formatNumber(num, num.length)
this.orderNum = num // 将其便变成数据，渲染至滚动数组
}
}
}
</script>
<style scoped lang='less'>
.chartNum {
.box-item {
position: relative;
font-size: 36px;
line-height: 48px;
text-align: center;
list-style: none;
color: #FFFFFF;
writing-mode: vertical-lr;
text-orientation: upright;
/* 默认逗号设置 */
 .mark-item {
width: 20px;
height: 48px;
border: 1px solid #2B79BC;
margin-right: 5px;
line-height: 10px;
font-size: 36px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 4px;
left: -2px;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
/*滚动数字设置*/
.number-item {
width: 30px;
height: 48px;
display: flex;
list-style: none;
margin-right: 5px;
border-radius: 4px;
border: 1px solid #2B79BC;
color: #FFFFFF;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 6px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
color: #FFFFFF;
}
}
}
.number-item:last-child {
margin-right: 0;
}
.comma {
bottom: 4px;
}
}
}
</style>
src/components/CountTo.vue deleted 100644 → 0
<template>
<CountTo
:startVal="startVal"
:endVal="endVal"
:duration="duration"
:decimals="decimals"
:separator="separator"
:suffix="suffix"
:prefix="prefix"
/>
</template>
<script>
import CountTo from 'vue-count-to'
export default {
name: 'VueCountTo', // TODO: 数字变动组件
components: { CountTo },
props: {
autoplay: { type: Boolean, default: true }, // 自动播放 默认为 True
startVal: { type: Number, default: 0 }, // 起始值
endVal: { type: Number, default: 0 }, // 结束值
duration: { type: Number, default: 800 }, // 持续时间，以毫秒为单位
decimals: { type: Number, default: 0 }, // 要显示的小数位数
separator: { type: String, default: ',' }, // 分隔符
prefix: { type: String, default: '' }, // 前缀
suffix: { type: String, default: '' } // 后缀
}
}
</script>
<style scoped>
span {
font-family: "Century Gothic";
}
</style>
src/components/Layout.vue deleted 100644 → 0
<template>
<div class="main-container">
<!-- 头部 -->
<Header v-bind="$attrs" />
<!-- 主内容 -->
<div id="layoutMain" class="layout-main">
<div
class="left"
:style="{
width: layoutSize.leftWidth,
minWidth: layoutSize.leftWidth
}"
ref="layoutLeft"
>
<slot name="left"></slot>
</div>
<div
class="center"
ref="layoutCenter"
>
<div class="content">
<slot name="center"></slot>
</div>
</div>
<div
class="right"
:style="{
width: layoutSize.rightWidth,
minWidth: layoutSize.rightWidth
}"
ref="layoutRight"
>
<slot name="right"></slot>
</div>
</div>
</div>
</template>
<script>
import { merge } from 'lodash'
import Header from 'components/Header'
export default {
name: 'Layout',
data () {
return {
// 布局尺寸
layoutSize: {
leftWidth: '2168px',
rightWidth: '2168px',
centerWidth: '100%'
}
}
},
props: {
layoutConf: {
type: Object,
default () {
return {}
}
}
},
components: {
Header
},
created () {
window.vm = this
},
methods: {
setPageSize () {
// 默认页面主体内容配置(不含Header)
this.layoutSize = merge({}, this.layoutSize, this.layoutConf)
}
}
}
</script>
<style lang="less">
@import "../assets/styles/less/common.less";
.main-container {
position: relative;
width: 100%;
height: 100%;
color: #fff;
font-size: 14px;
overflow: hidden;
}
// 主体内容
.layout-main {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
.center {
flex: 1;
position: relative;
box-sizing: border-box;
}
.left, .right {
position: relative;
overflow: hidden;
box-sizing: border-box;
&:after {
content: "";
position: absolute;
top: 160px;
background-position: left top;
background-repeat: no-repeat;
}
}
.left {
padding-left: 30px;
padding-right: 118px;
// background: url('../../static/images/index/lineLeft.png') no-repeat right 160px;
&:after {
right: 0;
}
}
.right {
padding-left: 118px;
padding-right: 30px;
// background: url('../../static/images/index/lineRight.png') no-repeat left 160px;
&:after {
left: 0;
}
}
}
</style>
src/components/echarts/index.vue deleted 100644 → 0
<template>
<div
:class="chartOpt.className"
:id="chartOpt.id"
:style="{width: chartOpt.width, height: chartOpt.height}"
></div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'chartEl',
props: {
chartOpt: {
type: Object,
required: true,
default () {
return {}
}
},
// 是否开启轮播
isMove: {
type: Boolean,
default: true
}
},
data () {
return {
chart: null // 生成charts容器
}
},
computed: {
...mapState(['innerWH'])
},
mounted () {
this.initChart()
},
watch: {
// 监听option变动, 重新渲染图表
'chartOpt.option': {
handler (newVal, oldVal) {
if (newVal) {
this.$nextTick(() => {
this.initChart()
})
}
},
deep: true // 深度监听
},
// 监听窗口缩放重置echarts
innerWH: {
handler () {
console.log('window resize')
this.chartResize()
},
deep: true
}
},
beforeDestroy () {
window.removeEventListener('resize')
if (this.chart) {
this.chart.dispose()
this.chart = null
}
},
methods: {
/**
* @method initChart 初始化图表
*/
initChart () {
const { id = '', option = {} } = this.chartOpt || {}
if (id && option) {
const currChartEl = document.getElementById(id)
// 无需滚动的图表, 初始化时先销毁, 防止重复创建
if (!this.isMove) {
this.echarts.dispose(currChartEl)
}
if (!this.chart) {
this.chart = this.echarts.init(currChartEl)
}
// 渲染图表
this.chart.setOption(option, true)
}
},
/**
* @method chartResize 重置图表
*/
chartResize () {
this.chart && this.chart.resize()
}
}
}
</script>
src/index.js
...@@ -4,14 +4,16 @@ import Vuex from 'vuex' ...@@ -4,14 +4,16 @@ import Vuex from 'vuex'
import App from './App.vue' import App from './App.vue'
import createStore from './store' // Vuex import createStore from './store' // Vuex
import createRouter from './router/router' import createRouter from './router/router'
import axiosServer from './request' import axiosServer from 'runner/request'
import UsePlugin from './public/plugins' import UsePlugin from 'runner/public/plugins'
import customPlugin from './public/plugins'
import utils from 'utils' import utils from 'utils'
Vue.use(Vuex) Vue.use(Vuex)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(axiosServer) Vue.use(axiosServer)
Vue.use(UsePlugin) Vue.use(UsePlugin)
Vue.use(customPlugin)
const router = createRouter() // 创建router const router = createRouter() // 创建router
const store = createStore() // 创建Vuex const store = createStore() // 创建Vuex
...@@ -34,6 +36,7 @@ new Vue({ ...@@ -34,6 +36,7 @@ new Vue({
store, store,
axiosServer, axiosServer,
UsePlugin, UsePlugin,
customPlugin,
template: '<App/>', template: '<App/>',
components: { App } components: { App }
}) })
src/pages/index.vue
<template> <template>
<div class="index-page"> <div class="index-page">
<layout title="测试title"> <layout title="测试title123">
<!-- left --> <!-- left -->
<div class="index-left" slot="left"></div> <div class="index-left" slot="left"></div>
<!-- center --> <!-- center -->
......
src/public/plugins/index.js
// Vue插件(Vue plugin) // Vue插件(Vue plugin)
import utils from '../utils/utils'
import { merge } from 'lodash'
import chartEl from '@/components/echarts' // 基础Echarts组件
import Layout from '@/components/Layout.vue' // 布局组件
import CountTo from '@/components/CountTo.vue'
import CountRoll from '@/components/CountRoll.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import ContentContainer from '@/components/ContentContainer' import ContentContainer from '@/components/ContentContainer'
import * as echarts from 'echarts'
const UsePlugin = {} const UsePlugin = {}
...@@ -18,23 +10,6 @@ const UsePlugin = {} ...@@ -18,23 +10,6 @@ const UsePlugin = {}
* Vue.use(UsePlugin, { global: true }) * Vue.use(UsePlugin, { global: true })
*/ */
UsePlugin.install = function (Vue, options = {}) { UsePlugin.install = function (Vue, options = {}) {
// 全局公用方法
Vue.prototype.utils = utils
// 合并对象
Vue.prototype.deepMerge = merge
// 注册全局布局组件
Vue.component('layout', Layout)
// Echarts
Vue.prototype.echarts = echarts
// 基础Echarts组件
Vue.component('chart-el', chartEl)
// 数组滚动
Vue.component('count-to', CountTo)
// 数字分切滚动
Vue.component('count-roll', CountRoll)
// 无缝滚动插件
Vue.component('vueSeamlessScroll', vueSeamlessScroll)
// 内容容器 // 内容容器
Vue.component('content-container', ContentContainer) Vue.component('content-container', ContentContainer)
} }
......
src/public/utils/refreshSize.js deleted 100644 → 0
/**
* @method refreshScale 设置页面缩放比
* @param {Int|Number} designWidth 设计稿宽度, 默认: 1920
* @param {Int|Number} designHeight 设计稿高度, 默认: 1080
*/
export function refreshScale (designWidth = 1920, designHeight = 1080) {
let baseWidth = document.documentElement.clientWidth
let baseHeight = document.documentElement.clientHeight
let appStyle = document.getElementById('app').style
let bodyStyle = document.body.style
let realRatio = baseWidth / baseHeight
let designRatio = 16 / 9 // 默认宽高比
let scaleRate = baseWidth / designWidth
if (realRatio > designRatio) {
scaleRate = baseHeight / designHeight
}
bodyStyle.overflow = 'hidden'
appStyle.position = 'fixed'
appStyle.transformOrigin = 'left top'
appStyle.transform = `scale(${scaleRate}) translateX(-50%)`
appStyle.width = `${baseWidth / scaleRate}px`
}
src/public/utils/type.js deleted 100644 → 0
const type = function (o) {
var s = Object.prototype.toString.call(o)
return s.match(/\[object (.*?)\]/)[1].toLowerCase()
}
const dataTypeArr = ['Null', 'Undefined', 'Object', 'Array', 'String', 'Number', 'Boolean', 'Function', 'RegExp']
dataTypeArr.forEach(function (t) {
type['is' + t] = function (o) {
return type(o) === t.toLowerCase()
}
})
export default type
src/request/apis.js deleted 100644 → 0
/**
* @file request/apis 所有接口url
*/
export default {}
src/request/axiosPlugin.js deleted 100644 → 0
/**
* vue-axios 封装(报错/权限/跳转/拦截/提示)
* 基础需求:
* 统一捕获接口报错 => axiso 内置拦截器
* 弹窗提示 => 自定义(如: `Element-ui Message` 组件)
* 报错重定向 => 路由钩子(根据实际需要配置)
* 基础权限 => 服务端过期时间戳和token, 以及借助路由钩子(根据实际需要决定是否配置)
* 表单序列化 => npm 模块 qs
*/
import axios from 'axios'
import qs from 'qs'
export const Axios = axios.create({
baseURL: '/', // 反向代理配置
timeout: 10000,
responseType: 'json',
withCredentials: true, // 是否允许携带cookie等
headers: {
'Content-Type': 'application/x-www-form-urlencodedcharset=utf-8'
}
})
// POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
config => {
// 在发送请求之前做的事情
if (
config.method === 'post' ||
config.method === 'put' ||
config.method === 'delete'
) {
// 序列化
config.data = qs.stringify(config.data)
}
// 若是有权限token, 则给请求头加上token
if (window.localStorage.token) {
config.headers.Authorization = window.localStorage.token
}
return config
},
error => {
// 错误提示信息, 可以自定义, 如 `Element-ui Message` 弹窗组件
// `error.data.error.message` 根据实际返回错误数据信息调整
console.error(error.data.error.message)
}
)
// 返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(
res => {
let data = res.data
return data
},
error => {
let errorInfo = error.data ? (error.data.error ? error.data.error.message : error.data) : {}
return Promise.reject(errorInfo)
}
)
// Vue-axios 中文文档 https://www.kancloud.cn/yunye/axios/234845
src/request/index.js deleted 100644 → 0
import apis from './apis' // 接口url
import { Axios } from './axiosPlugin' // axios请求
// 设置请求域名
const isPrd = process.env.NODE_ENV === 'production' // 默认生产环境
let domain = window.location.origin
if (!isPrd) {
domain = 'http://192.168.0.135:8881' // 开发环境跨域默认配置
}
/**
* @method fetch 获取接口请求
* @param {String} url 接口路径url(不包含请求域名), 必须
* @param {Object} params 请求入参, 非必须
* @param {Object} extra 请求方式其他配置, 如: 配置请求方式 - method: GET, 非必须
* @return {Promise} 返回Promise对象, 业务中自主处理
*/
const fetch = (url = '', params = {}, extra = {}) => {
try {
const currReqApi = apis[url] || ''
// 请求地址配置错误
if (!currReqApi) {
const errInfo = {
url,
code: '1',
message: '请求url不存在'
}
throw errInfo
}
const fullReqApi = domain + currReqApi
console.log('fetch-fullReqApi > ', fullReqApi)
return Axios({
method: extra.method ? extra.method.toLocaleLowerCase : 'GET',
url: fullReqApi,
data: params,
params // GET
})
} catch (error) {
error.code === '1' && console.error(`当前请求url > ${error.url} 不存在`)
throw error
}
}
// 对axios的实例重新封装成一个plugin, 方便 Vue.use(xxxx)
export default {
install (Vue, Option) {
// 将fetch挂载在全局
Vue.prototype.fetch = fetch
// 当前环境
Vue.prototype.isPrd = isPrd
}
}
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