Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f78ebe04 1 parent ff100985

init

Inline Side-by-side
Showing 21 changed files with 775 additions and 0 deletions
> 1%
last 2 versions
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
module.exports = {
root: true,
env: {
node: true,
browser: true,
commonjs: true,
es6: true
},
globals: {
$: true,
axios: true,
moment: true,
_: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
// allow no-new
'no-new': 0,
// allow semi
'semi': 0,
// allow indent
'indent': ['error', 2],
// 'indent': 0,
// allow no-tabs
'no-tabs': 0,
// allow camelcase
'camelcase': 0,
'eqeqeq': 0,
'no-undef': 0,
'no-self-assign': 0,
'no-console': ['error', { allow: ['warn', 'error'] }]
},
parserOptions: {
parser: 'babel-eslint'
}
}
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
module.exports = {
presets: [
'@vue/app'
]
}
This diff could not be displayed because it is too large.
{
"name": "muse-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^2.6.5",
"jquery": "^3.4.1",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"muse-ui": "^3.0.2",
"muse-ui-loading": "^0.2.0",
"muse-ui-message": "^0.2.1",
"muse-ui-progress": "^0.1.0",
"muse-ui-toast": "^0.3.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.11.0",
"compression-webpack-plugin": "^2.0.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"less": "^3.0.4",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.5.21"
}
}
module.exports = {
plugins: {
autoprefixer: {}
}
}
No preview for this file type
<!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">
<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<title>muse-test</title>
</head>
<body>
<noscript>
<strong>We're sorry but muse-test doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list>
<mu-list-item v-for="(v, k) in side_menu" :key="k" button>
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
<!-- <mu-list-item @click="close" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item> -->
</mu-list>
</mu-drawer>
<mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
<mu-button v-if="!side_show" @click="side_show = !side_show" icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>
<p style="text-align: left;">Title</p>
<mu-button flat slot="right">LOGIN</mu-button>
</mu-appbar>
<!-- <mu-row gutter>
<mu-col span="4" sm="0" md="3" lg="2" xl="2">
<side :show="show2"></side>
123
</mu-col>
<mu-col span="8" sm="12" md="9" lg="10" xl="10">
<mu-appbar style="width: 100%;" color="primary">
<mu-button icon slot="left">
<mu-icon value="menu"></mu-icon>
</mu-button>
Title
<mu-button flat slot="right">LOGIN</mu-button>
</mu-appbar>
<p>111</p>
<router-view/>
</mu-col>
</mu-row> -->
<div style="left: 256px; top: 100px; position: relative; width: calc(100% - 256px)">
<router-view/>
</div>
</div>
</template>
<script>
// import side from 'components/side'
export default {
components: {
// side
},
mounted () {
// 屏幕宽度小于600隐藏侧边栏
if ($('body').width() <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
// 键盘屏幕宽度
$(window).resize(() => {
this.screen_width = $('body').width();
// 屏幕宽度小于600隐藏侧边栏
if (this.screen_width <= 600) {
this.side_show = false;
this.docked = false;
} else {
this.side_show = true;
this.docked = true;
}
});
},
data () {
return {
side_show: false,
screen_width: '',
docked: false,
position: 'left',
side_menu: [{
title: 'Menu Item 1'
}, {
title: 'Menu Item 2'
}]
}
},
methods: {
close () {
// 关闭侧边栏
this.side_show = false;
$(window).resize()
}
}
}
</script>
<style lang="less">
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.mu-appbar-header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 101;
overflow: hidden
}
.mu-appbar-header.is-open {
left: 256px;
}
.mu-appbar-header.is-only-title .mu-appbar-title {
margin-left: 16px
}
</style>
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template lang="html">
<mu-drawer :open.sync="open" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list>
<mu-list-item v-for="(v, k) in side_menu" :key="k" button>
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
<mu-list-item @click="close" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-drawer>
</template>
<script>
export default {
props: ['open'],
data () {
return {
docked: true,
position: 'left',
side_menu: [{
title: 'Menu Item 1'
}, {
title: 'Menu Item 2'
}]
}
},
methods: {
close () {
// 关闭侧边栏
this.open = false;
$(window).resize()
}
}
}
</script>
<style lang="css" scoped>
</style>
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import MuseUI from 'muse-ui';
import 'muse-ui/dist/muse-ui.css';
import Toast from 'muse-ui-toast';
import Message from 'muse-ui-message';
import Loading from 'muse-ui-loading';
import NProgress from 'muse-ui-progress';
Vue.config.productionTip = false
Vue.use(MuseUI);
Vue.use(Toast);
Vue.use(Message);
Vue.use(Loading);
Vue.use(NProgress);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/test',
name: 'test',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/test.vue')
}
]
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
<template lang="html">
<mu-container>
<!-- <div style="margin: 0.5rem;"> -->
<mu-paper :z-depth="1">
<mu-data-table :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list">
<template slot-scope="scope">
<td class="is-center">{{scope.row.name}}</td>
<td class="is-center">{{scope.row.calories}}</td>
<td class="is-center">{{scope.row.fat}}</td>
<td class="is-center">{{scope.row.carbs}}</td>
<td class="is-center">{{scope.row.protein}}</td>
<td class="is-center">
jjj
</td>
</template>
</mu-data-table>
</mu-paper>
<!-- </div> -->
</mu-container>
</template>
<script>
export default {
mounted () {
},
data () {
return {
sort: {
name: '',
order: 'asc'
},
columns: [
{ title: 'Dessert (100g serving)', name: 'name' },
{ title: 'Calories', name: 'calories', align: 'center', sortable: true },
{ title: 'Fat (g)', name: 'fat', align: 'center', sortable: true },
{ title: 'Carbs (g)', name: 'carbs', align: 'center', sortable: true },
{ title: 'Protein (g)', name: 'protein', align: 'center', sortable: true },
{ title: '操作', name: 'iron', align: 'center', sortable: true }
],
list: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: 1
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: 1
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: 7
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: 8
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: 16
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: 0
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: 2
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: 45
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: 22
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: 6
}
]
}
},
methods: {
handleSortChange ({ name, order }) {
this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
}
}
}
</script>
<style lang="css" scoped>
.demo-button {
margin: 6px 8px;
}
</style>
/* jshint esversion: 6 */
const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, './', dir)
}
// cdn预加载使用
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'$': 'jquery',
'jquery': 'Jquery',
'moment': 'moment'
}
const cdn = {
// 开发环境
dev: {
css: [],
js: []
},
// 生产环境
build: {
css: [
],
js: [
'https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js',
'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
'https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js',
'https://cdn.jsdelivr.net/npm/moment@2.23.0/moment.min.js'
]
}
}
// 是否使用gzip
const productionGzip = true
// 需要gzip压缩的文件后缀
const productionGzipExtensions = ['js', 'css']
module.exports = {
// 基本路径
publicPath: process.env.NODE_ENV === 'production' ? '/boh/' : '/',
// 输出文件目录
outputDir: 'dist',
// 放置生成的静态资源的目录
assetsDir: '',
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
indexPath: 'index.html',
filenameHashing: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
}
},
// eslint-loader 是否在保存的时候检查
lintOnSave: 'error',
// 是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了。
runtimeCompiler: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// vux 相关配置,使用vux-ui
// 如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数，则会接收被解析的配置作为参数。该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
config.plugins.push(
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'_': 'lodash',
'axios': 'axios',
'moment': 'moment'
})
)
config.resolve.extensions.push('.less')
config.resolve.extensions.push('.css')
//
config.resolve.alias.src = path.resolve(__dirname, './src/src')
config.resolve.alias.assets = path.resolve(__dirname, './src/assets')
config.resolve.alias.components = path.resolve(__dirname, './src/components')
// 修改webpack config, 使其不打包externals下的资源
if (process.env.NODE_ENV === 'production') {
// 1. 生产环境npm包转CDN
config.externals = externals
// 2. 构建时开启gzip，降低服务器压缩对CPU资源的占用，服务器也要相应开启gzip
productionGzip && config.plugins.push(
new CompressionWebpackPlugin({
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 8192,
minRatio: 0.8
})
)
}
if (process.env.NODE_ENV === 'development') {
}
},
// 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
/**
* 添加CDN参数到htmlWebpackPlugin配置中， 详见public/index.html 修改
* vue inspect --plugins 查询插件 使用pages会有多个html实例
*/
config
.plugin('html-index')
.tap(args => {
if (process.env.NODE_ENV === 'production') {
args[0].cdn = cdn.build
}
if (process.env.NODE_ENV === 'development') {
args[0].cdn = cdn.dev
}
return args
})
.end()
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
// extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
},
// 默认情况下，只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为 true 后你就可以去掉文件名中的 .module 并将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块。
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: false,
// open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// 设置代理
proxy: {
'api': {
filter: ['/op/', '/fi/', '/de/', '/st/', '/fr/', '/pr/', '/pu/', '/dl/', '/b/', '/t/', '/rpt/'],
target: 'http://dev.kmlab.com/boh',
// target: 'http://itomix-dev.kmlab.com/boh'
changeOrigin: true,
pathRewrite: {
'^/(.*)': '/$1'
},
onProxyReq: function (proxyReq, req, res, options) {
proxyReq.setHeader('X-Proxy-Host', req.header('host'))
proxyReq.setHeader('X-Proxy-Request-URI', req.url)
}
}
},
before: app => {},
overlay: {
warnings: false,
errors: true
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}