Skip to content

Commit b406146

Browse files
jzfaijzfai
committed
ts version
0 parents  commit b406146

File tree

129 files changed

+9760
-0
lines changed

Some content is hidden

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

129 files changed

+9760
-0
lines changed

‎.env.build

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
VITE_APP_ENV = 'build'
2+
VITE_APP_BASE_URL = 'http://8.135.1.141:30156/api'
3+
VITE_APP_BASE_WS_URL = ''

‎.env.serve-dev

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#定义的变量必须以VITE_APP_开头
2+
VITE_APP_ENV = 'serve'
3+
VITE_APP_BASE_URL = 'http://8.135.1.141:30156/api'
4+
VITE_APP_BASE_WS_URL = ''

‎.env.serve-prod

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
2+
##连接线上环境
3+
#这里需要注意的是，定义变量需要以 VUE_APP_ 作为前缀
4+
NODE_ENV = 'serve'
5+
VUE_APP_IMAGE_URL_PRE = ''
6+
VUE_APP_BASE_URL = 'http://47.105.154.123/vhg-api/'
7+
VUE_APP_BASE_WS_URL = ws://47.105.154.123
8+

‎.eslintignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
public
2+
node_modules
3+
.history
4+
.husky
5+
dist
6+
*.d.ts
7+
*.svg

‎.eslintrc.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
//https://blog.csdn.net/Sheng_zhenzhen/article/details/108685176
2+
//
3+
module.exports = {
4+
root: true,
5+
env: {
6+
browser: true,
7+
commonjs: true,
8+
es6: true,
9+
node: true
10+
},
11+
globals: {
12+
document: true,
13+
localStorage: true,
14+
window: true,
15+
defineProps: true,
16+
defineExpose: true,
17+
Obj_type: true,
18+
axios_c_ty: true
19+
},
20+
extends: [
21+
'plugin:vue/vue3-essential',
22+
'eslint:recommended',
23+
'@vue/typescript/recommended',
24+
'@vue/prettier',
25+
'@vue/prettier/@typescript-eslint'
26+
],
27+
parserOptions: {
28+
ecmaVersion: 2021
29+
},
30+
rules: {
31+
'import/no-unresolved': 'off',
32+
'import/extensions': 'off',
33+
'import/no-absolute-path': 'off',
34+
'import/no-extraneous-dependencies': 'off',
35+
'vue/no-multiple-template-root': 'off',
36+
'vue/html-self-closing': 'off',
37+
'no-console': 'off',
38+
'no-plusplus': 'off',
39+
'no-useless-escape': 'off',
40+
'no-bitwise': 'off',
41+
'@typescript-eslint/no-explicit-any': ['off'],
42+
'@typescript-eslint/explicit-module-boundary-types': ['off'],
43+
'@typescript-eslint/ban-ts-comment': ['off'],
44+
'vue/no-setup-props-destructure': ['off'],
45+
'@typescript-eslint/no-empty-function': ['off'],
46+
//这个为了适配script-setup的变量问题
47+
'@typescript-eslint/no-unused-vars': ['off'],
48+
'no-param-reassign': ['off']
49+
},
50+
overrides: [
51+
{
52+
files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
53+
env: {
54+
jest: true
55+
}
56+
}
57+
]
58+
}

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.history
2+
.idea
3+
node_modules
4+
.DS_Store
5+
dist
6+
dist-ssr
7+
*.local

‎.husky/commit-msg

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#!/bin/sh
2+
#. "$(dirname "$0")/_/husky.sh"
3+
#yarn run lint

‎.husky/pre-commit

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#!/bin/sh
2+
#. "$(dirname "$0")/_/husky.sh"
3+
#yarn run lint
4+
#npx --no-install commitlint --edit "$1"
5+
#npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
6+
#推送之前运行eslint检查
7+
yarn run lint
8+
9+
10+
#测试提交有问题阻断
11+
#echo exit;;

‎.prettierrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"useTabs": false,
3+
"tabWidth": 2,
4+
"printWidth": 120,
5+
"singleQuote": true,
6+
"trailingComma": "none",
7+
"bracketSpacing": true,
8+
"semi": false,
9+
"htmlWhitespaceSensitivity": "ignore"
10+
}

‎README.md

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
#### 更新日志
2+
```
3+
// 2021-08-28
4+
1.setting.js文件中增加了是否需要登录属性 false-->不需要登录直接进入主页面
5+
2.修复main-container页面部分显示问题
6+
3.element-plus更新到最新版本"element-plus": "^1.1.0-beta.7",
7+
4.把element-plus默认语言修改成中文
8+
// 2021-08-31
9+
5.增加了mock, hook , svg-icon,vuex的使用示例
10+
// 2021-09-04
11+
1.修复了build后,ref的问题(https://github.com/vuejs/vue-next/issues/4431)
12+
2.vue,element-plus,vite及插件更新到最新版本
13+
3.ResizeHandler.js 方法从mixin 改为hooks
14+
```
15+
16+
### 前言
17+
#### 本架构使用的技术为：vue3.2(setup-script)+vite2.4+element-plus+typescript 的新一代的前端框架，框架使用类似 vue-admin-template
18+
19+
```
20+
框架有js和ts版本
21+
js版本分支：https://github.com/jzfai/vue3.0-admin-template
22+
ts版本分支：https://github.com/jzfai/vue3.0-admin-ts
23+
如果想学习vue3.0+vite2.0的可以把这个框架和vue-admin-template框架进行对比，后期也我会出在架构设计过程中
24+
vue2.0和vue3.0的区别，以及如何快速的把vue2.0迁移到3.0中的教程
25+
```
26+
27+
> 开发和使用感受：两个字 真香！！！！！
28+
29+
#### 和 vue-admin-template 的区别
30+
31+
##### 1.布局方式全部采用 flex 代替以前的 float，float 布局方式全部移除
32+
33+
##### 2.采用 vue3(setup-script)书写，用 vite2 替换 webpack，加入了 vue3 的 jsx 写法
34+
35+
##### 3.简化了部分复杂的逻辑
36+
37+
### 效果
38+
39+
### 线上体验地址：http://8.135.1.141/vue3.0-admin-template
40+
41+
![http://8.135.1.141/file/images/1629713090928.png](http://8.135.1.141/file/images/1629713090928.png)
42+
43+
![http://8.135.1.141/file/images/1629541566667.png](https://upload-images.jianshu.io/upload_images/21080604-9a46f48ee9114e08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
44+
45+
#### 页面首次渲染 加载资源（366K） 页面完全打开（0.36s）
46+
47+
![http://8.135.1.141/file/images/1629541566667.png](https://upload-images.jianshu.io/upload_images/21080604-b5dc141d2d6425e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
48+
49+
### 如何运行
50+
51+
```javascript
52+
53+
克隆项目
54+
git clone https://github.com/jzfai/vue3.0-admin-template.git
55+
56+
进入项目目录
57+
cd vue3.0-admin-template
58+
59+
运行yarn安装依赖
60+
yarn
61+
62+
运行dev命令
63+
yarn run dev
64+
65+
66+
补充：这里说下package.json里的scripts命令
67+
"scripts": {
68+
"dev": "vite --mode serve-dev", ---- 开发时运行
69+
"build": "vite build --mode build", ---- 打包发布生产环境
70+
"serve": "vite preview --mode build" ---- 这个是在你本地打包完后（yarn run build）后会生产一个dist文件夹，
71+
"preview:build": "yarn run build && vite preview " --- 构建并查看（建议更新上生成前运行一次）
72+
这个命令在你本地启动一个本地服务用于查看dist文件内容，发布生产前可以用这个先看下打包的效果
73+
},
74+
```
75+
76+
##### 后期会出架构中 vue3.0+vite2.0 开发时的一些坑以及如何快速的把 vue2.0 项目迁移到 3.0，框架还在努力开发中，但是基本功能已经完成
77+
78+
## 大家的支持是我前进的动力 欢迎加入一起开发
79+
80+
#### 如果需要实时交流的可以加入QQ群(有vue3+ts视频教程)
81+
82+
### ![http://8.135.1.141/file/images/1630398868394.png](http://8.135.1.141/file/images/1630398868394.png)
83+
84+
85+
### 大家的支持是我前进的动力 欢迎加入一起开发

‎bash.exe.stackdump

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
Stack trace:
2+
Frame Function Args
3+
00800000010 001800638AE (00180272F10, 00180263FD1, 00800000010, 000FFFFBA20)
4+
00800000010 0018004973A (00100002000, 000FFFFCBC0, 00180348078, 00000000002)
5+
00800000010 00180049772 (00000000002, 00180348388, 00800000010, 00000000008)
6+
00800000010 0018005CBDD (0018004ABEC, 000FFFFCC55, 00000000000, 000FFFFCC50)
7+
000FFFFCBCC 0018005CD4F (205C795C745C745C, 655C205C265C265C, 205C6F5C685C635C, 695C6C5C245C225C)
8+
000FFFFCCE0 00180049EE8 (00000000000, 00000000000, 00000000000, 00000000000)
9+
000FFFFFFF0 00180048846 (00000000000, 00000000000, 00000000000, 00000000000)
10+
000FFFFFFF0 001800488F4 (00000000000, 00000000000, 00000000000, 00000000000)
11+
End of stack trace

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>vue3-element-template</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎mock/test.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { MockMethod } from 'vite-plugin-mock'
2+
export default [
3+
{
4+
url: '/getMapInfo',
5+
method: 'get',
6+
response: () => {
7+
return {
8+
code: 0,
9+
title: 'mock请求测试'
10+
}
11+
}
12+
}
13+
] as MockMethod[]

‎package.json

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
{
2+
"name": "vue3.0-admin-ts",
3+
"version": "1.0.5",
4+
"license": "ISC",
5+
"author": "kuanghua([email protected])",
6+
"scripts": {
7+
"dev": "vite --mode serve-dev",
8+
"build": "vite build --mode build",
9+
"serve": "vite preview --mode build",
10+
"preview:build": "yarn run build && vite preview ",
11+
"lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src",
12+
"prepare": "husky install"
13+
},
14+
"dependencies": {
15+
"axios": "0.18.1",
16+
"core-js": "^3.6.5",
17+
"echarts": "4.2.1",
18+
"element-plus": "^1.1.0-beta.7",
19+
"js-cookie": "2.2.0",
20+
"moment-mini": "^2.22.1",
21+
"path": "^0.12.7",
22+
"path-to-regexp": "^6.2.0",
23+
"tinymce": "^4.9.11",
24+
"vue": "3.2.8",
25+
"vue-router": "^4.0.11",
26+
"vuex": "^4.0.2"
27+
},
28+
"devDependencies": {
29+
"@fullcalendar/vue3": "^5.8.0",
30+
"@types/axios": "^0.14.0",
31+
"@types/clipboard": "^2.0.1",
32+
"@types/dom-to-image": "^2.6.2",
33+
"@types/echarts": "^4.9.7",
34+
"@types/file-saver": "^2.0.2",
35+
"@types/lodash": "^4.14.170",
36+
"@types/marked": "^2.0.3",
37+
"@types/mockjs": "^1.0.3",
38+
"@types/node": "^15.0.1",
39+
"@types/qrcode": "^1.4.0",
40+
"@types/sortablejs": "^1.10.6",
41+
"@types/vuedraggable": "^2.24.0",
42+
"@typescript-eslint/eslint-plugin": "^4.22.0",
43+
"@typescript-eslint/parser": "^4.22.0",
44+
"@vitejs/plugin-legacy": "^1.5.2",
45+
"@vitejs/plugin-vue": "^1.6.0",
46+
"@vitejs/plugin-vue-jsx": "^1.1.7",
47+
"@vue/compiler-sfc": "3.2.7",
48+
"@vue/eslint-config-prettier": "^6.0.0",
49+
"@vue/eslint-config-typescript": "^5.0.2",
50+
"babel-eslint": "^10.1.0",
51+
"eslint": "^6.7.2",
52+
"eslint-config-airbnb-base": "^14.2.1",
53+
"eslint-plugin-import": "^2.22.1",
54+
"eslint-plugin-prettier": "^3.3.1",
55+
"eslint-plugin-vue": "^7.0.0",
56+
"husky": "^7.0.2",
57+
"mockjs": "^1.1.0",
58+
"prettier": "^2.2.1",
59+
"sass": "^1.32.12",
60+
"scss": "^0.2.4",
61+
"svg-sprite-loader": "4.1.3",
62+
"typescript": "^4.3.2",
63+
"vite": "^2.5.3",
64+
"vite-plugin-mock": "^2.9.6",
65+
"vite-plugin-style-import": "^1.2.1",
66+
"vite-plugin-svg-icons": "^1.0.4",
67+
"vue-tsc": "^0.3.0"
68+
}
69+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎src/App.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<router-view />
3+
</template>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/HelloWorld.vue

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<template>
2+
<h1>{{ msg }}</h1>
3+
4+
<p>
5+
Recommended IDE setup:
6+
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
7+
+
8+
<a href="https://marketplace.visualstudio.com/items?itemName=octref.vetur" target="_blank">Vetur</a>
9+
or
10+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
11+
(if using
12+
<code>&lt;script setup&gt;</code>
13+
)
14+
</p>
15+
16+
<p>
17+
See
18+
<code>README.md</code>
19+
for more information.
20+
</p>
21+
22+
<p>
23+
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite Docs</a>
24+
|
25+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
26+
</p>
27+
28+
<button type="button" @click="count++">count is: {{ count }}</button>
29+
<p>
30+
Edit
31+
<code>components/HelloWorld.vue</code>
32+
to test hot module replacement.
33+
</p>
34+
</template>
35+
36+
<script lang="ts">
37+
import { ref, defineComponent } from 'vue'
38+
export default defineComponent({
39+
name: 'HelloWorld',
40+
props: {
41+
msg: {
42+
type: String,
43+
required: true
44+
}
45+
},
46+
setup: () => {
47+
const count = ref(0)
48+
return { count }
49+
}
50+
})
51+
</script>
52+
53+
<style scoped>
54+
a {
55+
color: #42b983;
56+
}
57+
58+
label {
59+
margin: 0 0.5em;
60+
font-weight: bold;
61+
}
62+
63+
code {
64+
background-color: #eee;
65+
padding: 2px 4px;
66+
border-radius: 4px;
67+
color: #304455;
68+
}
69+
</style>

0 commit comments

Comments
 (0)