Skip to content

Commit d3f04cb

Browse files
LonggerererLonggererer
committed
上线前做Vue代码和打包优化
1 parent 7947da1 commit d3f04cb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+603
-628
lines changed

‎README.md‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
1-
# js-encoder-online
2-
3-
## Project setup
4-
```
5-
yarn install
6-
```
7-
8-
### Compiles and hot-reloads for development
9-
```
10-
yarn serve
11-
```
12-
13-
### Compiles and minifies for production
14-
```
15-
yarn build
16-
```
17-
18-
### Run your unit tests
19-
```
20-
yarn test:unit
21-
```
22-
23-
### Run your end-to-end tests
24-
```
25-
yarn test:e2e
26-
```
27-
28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).
1+
<div align=center>
2+
<img width="150" src="./src/assets/logo/logo.svg"/>
3+
</div>
4+
5+
<h1 align="center">JS-Encoder-Online</h1>
6+
7+
<p align="center">👉 一个由 Vue.js 和 Codemirror 构建的前端代码在线编辑分享平台 👈</p>
8+
9+
查看[离线版 JS-Encoder](https://github.com/Longgererer/JS-Encoder)
10+
11+
## 新特性 🌟
12+
13+
JS-Encoder-Online 在原本的离线版 JS-Encoder 添加了许多功能：
14+
15+
- **云存储 💽**
16+
- 将你编辑好的代码上传而无须保存在本地，只要登录账号随时都可以查看和修改。
17+
- **链接分享 🔗**
18+
- 现在支持通过分享链接的形式分享你的代码给其他人。
19+
- **探索 🔍**
20+
- 可通过探索功能找到你需要的实例代码(不过现在由于项目刚上线，可探索到的东西很少)。
21+
- **喜欢 💖**
22+
- 如果你觉得一个实例对你的胃口，可以点亮实例的爱心来收藏它。
23+
- **关注 💞**
24+
- 你可以关注你感兴趣的实例作者，方便日后查看他们的作品。
25+
26+
如果你想知道 JS-Encoder 编辑器的功能，请看 [JS Encoder](https://github.com/Longgererer/JS-Encoder#js-encoder)。
27+
28+
## Support
29+
30+
如果你喜欢 **JS-Encoder**，点个 star 💗 支持一下吧！
31+
32+
## LICENSE
33+
34+
[The MIT LICENSE](https://github.com/Longgererer/JS-Encoder-Online/blob/master/LICENSE)

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"axios": "^0.21.1",
1616
"codemirror": "^5.62.3",
1717
"codemirror-emmet": "^1.0.0",
18+
"compression-webpack-plugin": "^6.1.1",
1819
"core-js": "^3.6.5",
1920
"csslint": "^1.0.5",
2021
"estraverse": "^5.2.0",
@@ -37,7 +38,8 @@
3738
"vue-cropperjs": "^4.1.0",
3839
"vue-router": "^3.2.0",
3940
"vuetify": "^2.4.0",
40-
"vuex": "^3.4.0"
41+
"vuex": "^3.4.0",
42+
"webpack-bundle-analyzer": "^4.4.2"
4143
},
4244
"devDependencies": {
4345
"@vue/cli-plugin-babel": "~4.5.0",

‎public/index.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@
1111
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2729832_0wi6h8givloq.css">
1212
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
1313
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
14+
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
15+
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
16+
<% } %>
17+
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
18+
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
19+
<% } %>
1420
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
15-
<title>
16-
<%= htmlWebpackPlugin.options.title %>
17-
</title>
21+
<title><%= htmlWebpackPlugin.options.title %></title>
1822
</head>
1923

2024
<body>
@@ -23,7 +27,6 @@
2327
Please enable it to continue.</strong>
2428
</noscript>
2529
<div id="app"></div>
26-
<!-- built files will be auto injected -->
2730
</body>
2831

2932
</html>

‎src/App.vue‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
2-
<v-app id="app" :class="bgcClass" :style="curBgcStyle">
2+
<v-app id="app" :class="bgcClass">
33
<jse-header v-show="!hideHAF" />
4-
<section class="app-content" :class="hideHAF?'app-full-screen':''">
4+
<section class="app-content" :class="{'app-full-screen':hideHAF}">
55
<router-view :key="routerKey" />
66
<jse-snackbar />
77
</section>
@@ -10,8 +10,7 @@
1010
</template>
1111

1212
<script>
13-
import { mapState, mapMutations } from 'vuex'
14-
13+
import { mapMutations } from 'vuex'
1514
import Header from '@components/header.vue'
1615
import Footer from '@components/footer.vue'
1716
import Snackbar from '@components/snackbar.vue'
@@ -20,7 +19,6 @@ export default {
2019
data() {
2120
return {
2221
bgcClass: '',
23-
curBgcStyle: {},
2422
routerKey: 0,
2523
}
2624
},
@@ -35,16 +33,9 @@ export default {
3533
this.setBgc()
3634
},
3735
computed: {
38-
...mapState(['curUserDetail']),
39-
routeName() {
40-
return this.$route.name
41-
},
4236
path() {
4337
return this.$route.path.replace('/', '') || 'home'
4438
},
45-
userBgc() {
46-
return this.curUserDetail.bgc
47-
},
4839
hideHAF() {
4940
return this.$route.meta.hideHAF
5041
},
@@ -53,17 +44,13 @@ export default {
5344
path() {
5445
this.setBgc()
5546
},
56-
userBgc() {
57-
this.setBgc()
58-
},
5947
},
6048
methods: {
6149
...mapMutations(['setLoginInfo', 'setLoginState']),
6250
setBgc() {
6351
// 根据路由更换不同的背景
6452
this.bgcClass = ''
65-
this.curBgcStyle = {}
66-
let path = this.path
53+
const path = this.path
6754
const list = ['home', 'features', 'feedback']
6855
if (list.includes(path)) {
6956
this.bgcClass = `bgc-animation bgc-before ${path}-bgc`
@@ -141,12 +128,6 @@ export default {
141128
background-color: rgba(194, 24, 91, 0.1);
142129
}
143130
}
144-
.user-bgc {
145-
background-image: linear-gradient(
146-
rgba(25, 128, 255, 0.3) -50px,
147-
$deep-5 300px
148-
);
149-
}
150131
@include screenLG {
151132
.app-content {
152133
min-height: calc(100vh - 70px);

‎src/components/alert.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<template>
2-
<v-overlay v-model="visible" class="global-alert">
3-
<v-dialog :style="{'z-index':zIndex}" dark persistent v-model="visible" :max-width="maxWidth" :width="width">
2+
<v-overlay class="global-alert" v-model="visible">
3+
<v-dialog dark persistent v-model="visible" :style="{'z-index':zIndex}" :max-width="maxWidth" :width="width">
44
<v-card>
55
<v-card-title class="text-h5" v-if="title">{{title}}</v-card-title>
66
<v-card-text>{{content}}</v-card-text>
77
<v-card-actions>
88
<v-spacer></v-spacer>
9-
<v-btn @click="cancel" v-if="showCancel">
9+
<v-btn v-if="showCancel" @click="cancel">
1010
{{cancelText}}
1111
</v-btn>
12-
<v-btn @click="ok" :color="okColor" :loading="loading">
12+
<v-btn :color="okColor" :loading="loading" @click="ok">
1313
{{okText}}
1414
</v-btn>
1515
</v-card-actions>
@@ -81,7 +81,6 @@ export default {
8181
this.visible = false
8282
},
8383
},
84-
components: {},
8584
}
8685
</script>
8786

‎src/components/cropper.vue‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
2-
<vue-cropper class="cropper" ref="cropper" :src="src" :aspectRatio="option.aspectRatio"
3-
:viewMode="option.viewMode" :dragMode="option.dragMode" :cropBoxResizable="option.cropBoxResizable"
4-
:img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full"
5-
:canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
2+
<vue-cropper class="cropper" ref="cropper" :src="src" :aspectRatio="option.aspectRatio" :viewMode="option.viewMode"
3+
:dragMode="option.dragMode" :cropBoxResizable="option.cropBoxResizable" :img="option.img" :outputSize="option.size"
4+
:outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove"
5+
:canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop"
66
:autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox">
77
</vue-cropper>
88
</template>
@@ -14,8 +14,8 @@ export default {
1414
props: {
1515
src: {
1616
type: String,
17-
default: ''
18-
}
17+
default: '',
18+
},
1919
},
2020
data() {
2121
return {
@@ -44,12 +44,8 @@ export default {
4444
},
4545
}
4646
},
47-
methods: {},
4847
components: {
49-
'vue-cropper': VueCropper,
48+
VueCropper,
5049
},
5150
}
52-
</script>
53-
54-
<style scoped>
55-
</style>
51+
</script>

‎src/components/dialog/instanceConfig.vue‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<template>
2-
<v-dialog id="instanceConfig" v-model="visible" max-width="500" @click:outside="setVisibleDialogName('')">
2+
<v-dialog id="instanceConfig" max-width="500" v-model="visible" @click:outside="setVisibleDialogName('')">
33
<v-card>
44
<v-card-title>
55
<span class="title-sm">实例设置</span>
66
</v-card-title>
77
<v-card-text style="padding-bottom:0">
88
<v-form class="form d-flex flex-clo" ref="form">
99
<span class="form-item-title">实例标题</span>
10-
<v-text-field class="form-item-input" solo v-model="form.title" label="填写实例标题..." background-color="info"
10+
<v-text-field class="form-item-input" solo label="填写实例标题..." background-color="info" v-model="form.title"
1111
:rules="rules.title">
1212
</v-text-field>
1313
<span class="form-item-title">实例标签</span>
1414
<span class="text-describe">添加或修改实例标签，标签最多三个，每个标签长度小于15</span>
15-
<v-combobox class="form-item-input" v-model="form.tags" :items="tagList" background-color="info" clearable
16-
multiple chips solo label="添加实例标签..." hide-selected :disable-lookup="form.tags.length>=3" @change="tagsChange"
17-
:rules="rules.tags">
15+
<v-combobox class="form-item-input" background-color="info" clearable multiple chips solo label="添加实例标签..."
16+
hide-selected v-model="form.tags" :items="tagList" :disable-lookup="form.tags.length>=3" :rules="rules.tags"
17+
@change="tagsChange">
1818
<template v-slot:selection="{ attrs, item, select, selected }">
19-
<v-chip v-bind="attrs" color="#1a1a1a" :input-value="selected" close @click="select"
19+
<v-chip color="#1a1a1a" close v-bind="attrs" :input-value="selected" @click="select"
2020
@click:close="removeTag(item)">
2121
<strong>{{ item }}</strong>
2222
</v-chip>
@@ -25,7 +25,7 @@
2525
</v-form>
2626
</v-card-text>
2727
<v-card-actions style="padding-bottom:20px">
28-
<v-btn class="save-btn" color="primary" @click="saveConfig" :loading="loading" block>保存</v-btn>
28+
<v-btn class="save-btn" color="primary" block :loading="loading" @click="saveConfig">保存</v-btn>
2929
</v-card-actions>
3030
</v-card>
3131
</v-dialog>
@@ -114,7 +114,6 @@ export default {
114114
form.tags = [...form.tags]
115115
},
116116
},
117-
components: {},
118117
}
119118
</script>
120119

‎src/components/dialog/loginVerify.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<v-dialog id="loginVerify" v-model="visible" max-width="500" persistent>
2+
<v-dialog id="loginVerify" max-width="500" v-model="visible" persistent>
33
<v-card>
44
<v-card-title class="info">
55
<span class="title-md">第三方登陆确认</span>

‎src/components/dialog/modifyBindEmail.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<template>
2-
<v-dialog id="modifyBindEmail" v-model="visible" max-width="520" @click:outside="close">
2+
<v-dialog id="modifyBindEmail" max-width="520" v-model="visible" @click:outside="close">
33
<v-card>
44
<v-card-title>
55
<span class="title-sm">修改绑定邮箱</span>
66
</v-card-title>
77
<v-card-text>
88
<v-form class="form d-flex flex-clo" ref="form">
99
<v-row>
10-
<v-col sm="8" cols="12" style="padding-bottom: 0">
11-
<v-text-field ref="emailField" label="邮箱" class="email-field" placeholder="修改后的邮箱" outlined
10+
<v-col style="padding-bottom: 0" sm="8" cols="12">
11+
<v-text-field class="email-field" ref="emailField" label="邮箱" placeholder="修改后的邮箱" outlined
1212
color="primary" v-model="form.email" :rules="rules.email">
1313
<template slot="append">
14-
<v-btn :disabled="!isEmailRight||emailOpts.sended" color="primary" class="send-email-btn"
15-
@click.stop="sendAuthCode" absolute :loading="emailOpts.authCodeLoading">{{emailOpts.emailText}}
14+
<v-btn color="primary" class="send-email-btn" absolute :disabled="!isEmailRight||emailOpts.sended"
15+
:loading="emailOpts.authCodeLoading" @click.stop="sendAuthCode">{{emailOpts.emailText}}
1616
</v-btn>
1717
</template>
1818
</v-text-field>
1919
</v-col>
20-
<v-col sm="4" cols="12" class="auth-input">
21-
<v-text-field label="验证码" :disabled="!isEmailRight" outlined color="primary" v-model="form.authCode"
20+
<v-col class="auth-input" sm="4" cols="12">
21+
<v-text-field label="验证码" outlined color="primary" v-model="form.authCode" :disabled="!isEmailRight"
2222
:rules="rules.authCode">
2323
</v-text-field>
2424
</v-col>
2525
</v-row>
26-
<v-text-field label="密码" placeholder="当前账户密码" autocomplete="new-password"
27-
:append-icon="showPwd ? 'mdi-eye' : 'mdi-eye-off'" :type="showPwd ? 'text' : 'password'"
28-
@click:append="showPwd = !showPwd" outlined color="primary" v-model="form.password" :rules="rules.password">
26+
<v-text-field label="密码" placeholder="当前账户密码" autocomplete="new-password" v-model="form.password"
27+
:rules="rules.password" :append-icon="showPwd ? 'mdi-eye' : 'mdi-eye-off'"
28+
:type="showPwd ? 'text' : 'password'" @click:append="showPwd = !showPwd" outlined color="primary">
2929
</v-text-field>
30-
<v-btn @click="modify" block x-large color="primary" :loading="loading">修改邮箱</v-btn>
30+
<v-btn color="primary" block x-large :loading="loading" @click="modify">修改邮箱</v-btn>
3131
</v-form>
3232
</v-card-text>
3333
</v-card>

‎src/components/followCard.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<div class="follow-card">
33
<v-avatar class="avatar pointer" :color="userInfo.userPicture?'':'primary'" @click="viewUserProfile">
4-
<v-img :src="qiNiuImgLink+userInfo.userPicture" v-if="userInfo.userPicture" :alt="userInfo.name"></v-img>
4+
<v-img v-if="userInfo.userPicture" :src="qiNiuImgLink+userInfo.userPicture" :alt="userInfo.name"></v-img>
55
<span class="white--text text-h4" v-else>{{userInfo.name|preNickname}}</span>
66
</v-avatar>
77
<div class="follow-user-info">
88
<div class="d-flex flex-ai">
99
<span class="text-bold text-md">{{userInfo.name}}</span>
1010
<v-spacer></v-spacer>
11-
<v-btn small color="#3C3C3C" depressed v-if="userInfo.myFollow" width="80" :loading="unFollowLoading"
11+
<v-btn width="80" small color="#3C3C3C" depressed v-if="userInfo.myFollow" :loading="unFollowLoading"
1212
@click="unFollow">取消关注</v-btn>
13-
<v-btn small color="primary" depressed v-else width="80" :loading="followLoading" @click="follow">关注</v-btn>
13+
<v-btn small color="primary" depressed width="80" v-else :loading="followLoading" @click="follow">关注</v-btn>
1414
</div>
1515
<span class="about text-describe text-sm">{{userInfo.description||'ta还没想好怎么描述自己...'}}</span>
1616
<div class="text-sm num">
@@ -95,7 +95,6 @@ export default {
9595
this.unFollowLoading = false
9696
},
9797
},
98-
components: {},
9998
}
10099
</script>
101100

0 commit comments

Comments
 (0)