├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── .idea ├── Vue.js-Study.iml ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── inspectionProfiles │ └── Project_Default.xml ├── jsLinters │ └── eslint.xml ├── modules.xml ├── vcs.xml └── workspace.xml ├── .nojekyll ├── 233park-web ├── .github │ └── workflows │ │ └── deploy.yml ├── .gitignore ├── .nojekyll ├── DEPLOY.md ├── README.md ├── dist │ ├── .nojekyll │ ├── assets │ │ ├── index-CT5kgbCG.js │ │ └── index-CcRraY2h.css │ ├── index.html │ └── vite.svg ├── index.html ├── mock │ ├── discovery.js │ └── mockProdServer.js ├── package-lock.json ├── package.json ├── postcss.config.cjs ├── public │ └── vite.svg ├── src │ ├── App.vue │ ├── api │ │ ├── discovery.js │ │ └── request.js │ ├── assets │ │ └── vue.svg │ ├── components │ │ ├── PostItem.vue │ │ ├── TopNav.vue │ │ └── WaterfallList.vue │ ├── main.js │ └── style.css └── vite.config.js ├── MANUAL_DEPLOY.md ├── README.md ├── Vue3-WebSocket-demo ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc.json ├── .vscode │ └── extensions.json ├── README.md ├── env.d.ts ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── favicon.ico ├── server │ ├── index.js │ ├── package.json │ └── pnpm-lock.yaml ├── src │ ├── App.vue │ ├── assets │ │ ├── base.css │ │ ├── logo.svg │ │ └── main.css │ ├── components │ │ ├── HelloWorld.vue │ │ ├── TheWelcome.vue │ │ ├── WelcomeItem.vue │ │ ├── __tests__ │ │ │ └── HelloWorld.spec.ts │ │ └── icons │ │ │ ├── IconCommunity.vue │ │ │ ├── IconDocumentation.vue │ │ │ ├── IconEcosystem.vue │ │ │ ├── IconSupport.vue │ │ │ └── IconTooling.vue │ ├── configs │ │ └── index.ts │ ├── hooks │ │ ├── index.ts │ │ └── websocket.ts │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── stores │ │ └── counter.ts │ └── views │ │ ├── HomeView.vue │ │ └── LoginView.vue ├── tsconfig.app.json ├── tsconfig.config.json ├── tsconfig.json ├── tsconfig.vitest.json └── vite.config.ts ├── build-fix.sh ├── build.sh ├── deploy-gh.sh ├── deploy-manifest.txt ├── deploy.sh ├── direct-deploy.sh ├── force-deploy.sh ├── index.html ├── my-vue-app ├── .eslintrc.js ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── favicon.ico ├── src │ ├── App.vue │ ├── assets │ │ ├── CSS │ │ │ └── common.scss │ │ └── logo.png │ ├── components │ │ ├── comp.vue │ │ ├── menu.vue │ │ └── rate.vue │ ├── env.d.ts │ ├── layout │ │ ├── components │ │ │ ├── AppMain │ │ │ │ └── index.vue │ │ │ ├── Navbar │ │ │ │ └── index.vue │ │ │ ├── Settings │ │ │ │ ├── checkBoxList.js │ │ │ │ └── index.vue │ │ │ ├── Sidebar │ │ │ │ ├── Item.vue │ │ │ │ ├── Link.vue │ │ │ │ ├── Logo.vue │ │ │ │ ├── SidebarItem.vue │ │ │ │ └── index.vue │ │ │ └── TagsView │ │ │ │ ├── ScrollPane.vue │ │ │ │ └── index.vue │ │ └── index.vue │ ├── main.ts │ ├── router │ │ └── index.ts │ ├── store │ │ └── index.ts │ └── views │ │ └── home.vue ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── package.json ├── public └── .nojekyll ├── simple-deploy.sh ├── temp-233park ├── .nojekyll ├── 404.html ├── assets │ ├── index-CT5kgbCG.js │ └── index-CcRraY2h.css ├── index.html └── vite.svg └── vite.config.js /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: 部署到GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: [ master, main ] 6 | workflow_dispatch: 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | permissions: 12 | contents: write 13 | steps: 14 | - name: 检出代码 15 | uses: actions/checkout@v3.5.3 16 | 17 | - name: 设置Node.js 18 | uses: actions/setup-node@v3.8.1 19 | with: 20 | node-version: '18' 21 | cache: 'npm' 22 | cache-dependency-path: '233park-web/package-lock.json' 23 | 24 | - name: 安装依赖和构建 25 | working-directory: 233park-web 26 | run: | 27 | npm ci 28 | npm run build 29 | # 确保资源引用正确 30 | sed -i 's|/Vue.js-Study/233park-web/|./|g' dist/index.html 31 | 32 | - name: 准备部署文件 33 | run: | 34 | # 创建根目录重定向页面 35 | cat > redirect.html << EOF 36 | 37 | 38 | 39 | 40 | 41 | 233Park - Vue.js项目 42 | 43 | 59 | 60 | 61 |

233Park - Vue.js项目

62 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

63 | 64 | 65 | EOF 66 | 67 | # 创建部署目录结构 68 | mkdir -p dist/233park-web 69 | cp -r 233park-web/dist/* dist/233park-web/ 70 | cp redirect.html dist/index.html 71 | touch dist/.nojekyll 72 | 73 | - name: 部署到GitHub Pages 74 | uses: peaceiris/actions-gh-pages@v3 75 | with: 76 | github_token: ${{ secrets.GITHUB_TOKEN }} 77 | publish_dir: ./dist 78 | force_orphan: true -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SincereCSL/Vue.js-Study/561b9328f9d0a09aea7e490effed335c77e5655c/.gitignore -------------------------------------------------------------------------------- /.idea/Vue.js-Study.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 27 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /.idea/jsLinters/eslint.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 13 | 14 | 17 | 18 | 19 | 24 | 25 | 26 | 28 | 34 | 40 | 41 | 43 | 44 | 46 | { 47 | "customColor": "", 48 | "associatedIndex": 3 49 | } 50 | 51 | 52 | 56 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /233park-web/dist/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /233park-web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /233park-web/mock/discovery.js: -------------------------------------------------------------------------------- 1 | import Mock from 'mockjs' 2 | 3 | // 游戏类型帖子 4 | const gamePostsData = { 5 | code: 0, 6 | data: { 7 | hasMore: true, 8 | list: [ 9 | { 10 | id: 1, 11 | title: '[版本前瞻] 手游新版本预告——重置巢穴型，部分恐龙新羽毛', 12 | author: '游戏云', 13 | authorAvatar: 'https://picsum.photos/50/50?random=101', 14 | likes: 10, 15 | cover: 'https://picsum.photos/400/200?random=1', 16 | type: 'image', 17 | tag: '游戏' 18 | }, 19 | { 20 | id: 2, 21 | title: '三角洲行动: 全面战场题味性升级, 夺旗, 攻防合集, 来玩', 22 | author: '玩家俱乐部', 23 | authorAvatar: 'https://picsum.photos/50/50?random=102', 24 | likes: 644, 25 | cover: 'https://picsum.photos/400/200?random=2', 26 | type: 'video', 27 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 28 | tag: '游戏' 29 | }, 30 | { 31 | id: 3, 32 | title: '[推荐地图一瞥花酒楼] 第三期', 33 | author: '我是你的美食家', 34 | authorAvatar: 'https://picsum.photos/50/50?random=103', 35 | likes: 9, 36 | cover: 'https://picsum.photos/400/200?random=3', 37 | type: 'image', 38 | tag: '游戏' 39 | }, 40 | { 41 | id: 4, 42 | title: '梅雨沙漠挡不住技巧！用这番垂直上一层楼', 43 | author: '沙漠掘金', 44 | authorAvatar: 'https://picsum.photos/50/50?random=104', 45 | likes: 23, 46 | cover: 'https://picsum.photos/400/200?random=4', 47 | type: 'video', 48 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 49 | tag: '游戏' 50 | }, 51 | { 52 | id: 5, 53 | title: '阿尔法测试结束，感谢各位玩家的参与和反馈', 54 | author: '开发日志', 55 | authorAvatar: 'https://picsum.photos/50/50?random=105', 56 | likes: 127, 57 | cover: 'https://picsum.photos/400/200?random=5', 58 | type: 'image', 59 | tag: '游戏' 60 | }, 61 | { 62 | id: 6, 63 | title: '新手玩家福利：十大必学技巧分享', 64 | author: '游戏导师', 65 | authorAvatar: 'https://picsum.photos/50/50?random=106', 66 | likes: 88, 67 | cover: 'https://picsum.photos/400/200?random=6', 68 | type: 'video', 69 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 70 | tag: '游戏' 71 | } 72 | ] 73 | }, 74 | message: 'success' 75 | } 76 | 77 | // 推荐类型帖子 78 | const recommendPostsData = { 79 | code: 0, 80 | data: { 81 | hasMore: true, 82 | list: [ 83 | { 84 | id: 1, 85 | title: '【共筑家园🏠】黄在猪猪网里的小镇🌈🎈🐖', 86 | author: '小猪警官', 87 | authorAvatar: 'https://picsum.photos/50/50?random=201', 88 | likes: 79, 89 | cover: 'https://picsum.photos/400/200?random=101', 90 | type: 'image', 91 | tag: '推荐' 92 | }, 93 | { 94 | id: 2, 95 | title: '夏日限定甜品制作，草莓牛奶冰淇淋', 96 | author: '甜品大师', 97 | authorAvatar: 'https://picsum.photos/50/50?random=202', 98 | likes: 45, 99 | cover: 'https://picsum.photos/400/200?random=102', 100 | type: 'video', 101 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 102 | tag: '推荐' 103 | }, 104 | { 105 | id: 3, 106 | title: '阿姨，空千斤，天下第一舞', 107 | author: '青空千斤', 108 | authorAvatar: 'https://picsum.photos/50/50?random=203', 109 | likes: 32, 110 | cover: 'https://picsum.photos/400/200?random=103', 111 | type: 'image', 112 | tag: '推荐' 113 | }, 114 | { 115 | id: 4, 116 | title: '大橘无情，家猫日常记录', 117 | author: '大橘无情', 118 | authorAvatar: 'https://picsum.photos/50/50?random=204', 119 | likes: 107, 120 | cover: 'https://picsum.photos/400/200?random=104', 121 | type: 'video', 122 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 123 | tag: '推荐' 124 | }, 125 | { 126 | id: 5, 127 | title: '阿舒，你太美了，菜市场偶遇大明星', 128 | author: '追星少女', 129 | authorAvatar: 'https://picsum.photos/50/50?random=205', 130 | likes: 67, 131 | cover: 'https://picsum.photos/400/200?random=105', 132 | type: 'image', 133 | tag: '推荐' 134 | }, 135 | { 136 | id: 6, 137 | title: '手工DIY：旧物改造再利用', 138 | author: '创意无限', 139 | authorAvatar: 'https://picsum.photos/50/50?random=206', 140 | likes: 37, 141 | cover: 'https://picsum.photos/400/200?random=106', 142 | type: 'video', 143 | videoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', 144 | tag: '推荐' 145 | } 146 | ] 147 | }, 148 | message: 'success' 149 | } 150 | 151 | // 分页模拟函数 152 | function getPaginatedData(data, page, pageSize) { 153 | const clonedData = JSON.parse(JSON.stringify(data)) 154 | const totalItems = clonedData.data.list.length 155 | const start = (page - 1) * pageSize 156 | const end = Math.min(start + pageSize, totalItems) 157 | 158 | // 模拟更多数据 159 | if (end >= totalItems && page < 5) { 160 | // 随机生成更多数据 161 | const moreItems = Mock.mock({ 162 | [`list|${pageSize}`]: [{ 163 | 'id|+1': totalItems + 1, 164 | 'title': '@ctitle(10, 30)', 165 | 'author': '@cname', 166 | 'authorAvatar': function() { 167 | return `https://picsum.photos/50/50?random=${Mock.Random.integer(300, 1000)}` 168 | }, 169 | 'likes|1-1000': 1, 170 | 'cover': function() { 171 | return `https://picsum.photos/400/200?random=${Mock.Random.integer(200, 1000)}` 172 | }, 173 | 'type|1': ['image', 'video'], 174 | 'videoUrl': 'https://www.w3schools.com/html/mov_bbb.mp4', 175 | 'tag': data === gamePostsData ? '游戏' : '推荐' 176 | }] 177 | }).list 178 | 179 | clonedData.data.list = clonedData.data.list.concat(moreItems) 180 | clonedData.data.hasMore = page < 4 // 第5页后没有更多数据 181 | } else if (page >= 5) { 182 | clonedData.data.hasMore = false 183 | } 184 | 185 | // 返回分页数据 186 | const result = JSON.parse(JSON.stringify(clonedData)) 187 | result.data.list = result.data.list.slice(start, start + pageSize) 188 | return result 189 | } 190 | 191 | const mockConfig = [ 192 | { 193 | url: '/api/discovery', 194 | method: 'get', 195 | response: (req) => { 196 | const { type = 'recommend', page = 1, pageSize = 10 } = req.query 197 | 198 | let responseData 199 | if (type === 'game') { 200 | responseData = getPaginatedData(gamePostsData, parseInt(page), parseInt(pageSize)) 201 | } else { 202 | responseData = getPaginatedData(recommendPostsData, parseInt(page), parseInt(pageSize)) 203 | } 204 | 205 | return responseData 206 | } 207 | } 208 | ] 209 | 210 | export default mockConfig -------------------------------------------------------------------------------- /233park-web/mock/mockProdServer.js: -------------------------------------------------------------------------------- 1 | import { createProdMockServer } from 'vite-plugin-mock' 2 | import discoveryMock from './discovery' 3 | 4 | export function setupProdMockServer() { 5 | createProdMockServer([...discoveryMock]) 6 | } -------------------------------------------------------------------------------- /233park-web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "233park-web", 3 | "private": true, 4 | "version": "0.0.0", 5 | "homepage": "https://sincerecsl.github.io/Vue.js-Study/233park-web/", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.9.0", 13 | "mockjs": "^1.1.0", 14 | "vant": "^4.9.19", 15 | "vite-plugin-mock": "^3.0.2", 16 | "vue": "^3.5.13" 17 | }, 18 | "devDependencies": { 19 | "@vitejs/plugin-vue": "^5.2.3", 20 | "amfe-flexible": "^2.2.1", 21 | "gh-pages": "^6.3.0", 22 | "postcss-pxtorem": "^6.1.0", 23 | "vite": "^6.3.5" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /233park-web/postcss.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-pxtorem': { 4 | rootValue: 37.5, // 根据设计稿的宽度除以10来设置 5 | propList: ['*'], 6 | selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换 7 | } 8 | } 9 | }; -------------------------------------------------------------------------------- /233park-web/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /233park-web/src/App.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 103 | 104 | 138 | -------------------------------------------------------------------------------- /233park-web/src/api/discovery.js: -------------------------------------------------------------------------------- 1 | import request from './request' 2 | 3 | /** 4 | * 获取发现页数据 5 | * @param {Object} params 6 | * @param {string} params.type - 数据类型：recommend(推荐) / game(游戏) 7 | * @param {number} params.page - 页码 8 | * @param {number} params.pageSize - 每页数量 9 | */ 10 | export function getDiscoveryList(params) { 11 | return request({ 12 | url: '/api/discovery', 13 | method: 'get', 14 | params 15 | }) 16 | } -------------------------------------------------------------------------------- /233park-web/src/api/request.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | import { showToast } from 'vant' 3 | 4 | // 创建axios实例 5 | const service = axios.create({ 6 | baseURL: '/', 7 | timeout: 10000 8 | }) 9 | 10 | // 请求拦截器 11 | service.interceptors.request.use( 12 | config => { 13 | return config 14 | }, 15 | error => { 16 | console.log(error) 17 | return Promise.reject(error) 18 | } 19 | ) 20 | 21 | // 响应拦截器 22 | service.interceptors.response.use( 23 | response => { 24 | const res = response.data 25 | 26 | if (res.code !== 0) { 27 | showToast({ 28 | message: res.message || '请求失败', 29 | type: 'fail', 30 | duration: 2000 31 | }) 32 | return Promise.reject(new Error(res.message || '请求失败')) 33 | } else { 34 | return res 35 | } 36 | }, 37 | error => { 38 | console.log('请求错误：', error) 39 | showToast({ 40 | message: error.message || '请求失败', 41 | type: 'fail', 42 | duration: 2000 43 | }) 44 | return Promise.reject(error) 45 | } 46 | ) 47 | 48 | export default service -------------------------------------------------------------------------------- /233park-web/src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /233park-web/src/components/PostItem.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 40 | 41 | -------------------------------------------------------------------------------- /233park-web/src/components/TopNav.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 52 | 53 | -------------------------------------------------------------------------------- /233park-web/src/components/WaterfallList.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 40 | 41 | -------------------------------------------------------------------------------- /233park-web/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | // 引入Vant组件库 6 | import Vant from 'vant' 7 | import 'vant/lib/index.css' 8 | 9 | // 移动端适配 10 | import 'amfe-flexible/index.js' 11 | 12 | const app = createApp(App) 13 | app.use(Vant) 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /233park-web/src/style.css: -------------------------------------------------------------------------------- 1 | /* 移动端样式重置 */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Microsoft YaHei', Arial, sans-serif; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | font-size: 14px; 13 | color: #333; 14 | background-color: #f7f8fa; 15 | } 16 | 17 | :root { 18 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 19 | line-height: 1.5; 20 | font-weight: 400; 21 | 22 | color-scheme: light dark; 23 | color: rgba(255, 255, 255, 0.87); 24 | background-color: #242424; 25 | 26 | font-synthesis: none; 27 | text-rendering: optimizeLegibility; 28 | -webkit-font-smoothing: antialiased; 29 | -moz-osx-font-smoothing: grayscale; 30 | } 31 | 32 | a { 33 | font-weight: 500; 34 | color: #646cff; 35 | text-decoration: inherit; 36 | } 37 | a:hover { 38 | color: #535bf2; 39 | } 40 | 41 | h1 { 42 | font-size: 3.2em; 43 | line-height: 1.1; 44 | } 45 | 46 | button { 47 | border-radius: 8px; 48 | border: 1px solid transparent; 49 | padding: 0.6em 1.2em; 50 | font-size: 1em; 51 | font-weight: 500; 52 | font-family: inherit; 53 | background-color: #1a1a1a; 54 | cursor: pointer; 55 | transition: border-color 0.25s; 56 | } 57 | button:hover { 58 | border-color: #646cff; 59 | } 60 | button:focus, 61 | button:focus-visible { 62 | outline: 4px auto -webkit-focus-ring-color; 63 | } 64 | 65 | .card { 66 | padding: 2em; 67 | } 68 | 69 | #app { 70 | max-width: 1280px; 71 | margin: 0 auto; 72 | /* padding: 2rem; */ 73 | text-align: center; 74 | } 75 | 76 | @media (prefers-color-scheme: light) { 77 | :root { 78 | color: #213547; 79 | background-color: #ffffff; 80 | } 81 | a:hover { 82 | color: #747bff; 83 | } 84 | button { 85 | background-color: #f9f9f9; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /233park-web/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import vue from '@vitejs/plugin-vue' 3 | import { viteMockServe } from 'vite-plugin-mock' 4 | import path from 'path' 5 | import { fileURLToPath } from 'url' 6 | 7 | const __filename = fileURLToPath(import.meta.url) 8 | const __dirname = path.dirname(__filename) 9 | 10 | // https://vitejs.dev/config/ 11 | export default defineConfig({ 12 | base: './', 13 | plugins: [ 14 | vue(), 15 | viteMockServe({ 16 | mockPath: 'mock', 17 | supportTs: false, 18 | localEnabled: true, 19 | logger: true, 20 | cors: true, 21 | ignoreFiles: [], 22 | watch: true, 23 | esModule: true, 24 | prodEnabled: true, 25 | injectCode: ` 26 | import { setupProdMockServer } from './mock/mockProdServer'; 27 | setupProdMockServer(); 28 | `, 29 | }), 30 | ], 31 | resolve: { 32 | alias: { 33 | '@': path.resolve(__dirname, './src'), 34 | }, 35 | }, 36 | server: { 37 | host: '0.0.0.0' 38 | }, 39 | build: { 40 | outDir: 'dist', 41 | assetsDir: 'assets', 42 | emptyOutDir: true 43 | } 44 | }) 45 | -------------------------------------------------------------------------------- /MANUAL_DEPLOY.md: -------------------------------------------------------------------------------- 1 | # 手动部署到GitHub Pages指南 2 | 3 | 由于自动部署遇到网络问题，以下是手动部署的步骤： 4 | 5 | ## 1. 确认文件准备就绪 6 | 7 | 我们已经在`public`目录中准备了正确的文件结构： 8 | 9 | ``` 10 | public/ 11 | ├── .nojekyll # 防止GitHub Pages使用Jekyll处理器 12 | ├── 233park-web/ # 应用主目录 13 | │ ├── assets/ # 资源文件目录 14 | │ │ ├── index-CcRraY2h.css 15 | │ │ └── index-CT5kgbCG.js 16 | │ ├── index.html # 应用主HTML文件 17 | │ └── vite.svg # 图标文件 18 | ├── deployed.txt # 部署测试文件 19 | └── index.html # 重定向页面 20 | ``` 21 | 22 | ## 2. 手动部署到GitHub选项 23 | 24 | ### 选项A：使用GitHub网页界面 25 | 26 | 1. 登录GitHub并前往您的仓库：https://github.com/SincereCSL/Vue.js-Study 27 | 2. 切换到`gh-pages`分支（如果不存在，创建一个） 28 | 3. 删除分支上的所有现有文件 29 | 4. 上传`public`目录中的所有文件和目录到仓库根目录 30 | 31 | ### 选项B：使用Git命令行 32 | 33 | 如果网络稍后恢复，可以使用以下命令： 34 | 35 | ```bash 36 | cd public 37 | git init 38 | git add . 39 | git commit -m "手动部署网站 - 修复路径问题" 40 | git push -f https://github.com/SincereCSL/Vue.js-Study.git HEAD:gh-pages 41 | ``` 42 | 43 | ### 选项C：使用GitHub Desktop 44 | 45 | 1. 创建一个新的本地仓库，路径指向`public`目录 46 | 2. 提交所有更改 47 | 3. 发布分支，选择您的GitHub仓库和`gh-pages`分支 48 | 49 | ## 3. 验证部署 50 | 51 | 部署完成后，访问以下URL验证网站是否正常工作： 52 | 53 | - https://sincerecsl.github.io/Vue.js-Study/ 54 | - https://sincerecsl.github.io/Vue.js-Study/233park-web/ 55 | 56 | 如果一切正常，您应该能够看到您的Vue.js应用成功加载。 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js Study 2 | ## Vue.js 学习资料 3 | 4 | ## Vue.js 生态系统 5 | 6 | - [2023 Vue.js 生态系统](https://risingstars.js.org/2023/en#section-vue) 7 | - [2022 Vue.js 生态系统](https://risingstars.js.org/2022/en#section-vue) 8 | - [2021 Vue.js 生态系统](https://risingstars.js.org/2021/en#section-vue) 9 | - [2020 Vue.js 生态系统](https://risingstars.js.org/2020/en#section-vue) 10 | - [2019 Vue.js 生态系统](https://risingstars.js.org/2019/en#section-vue) 11 | - [2018 Vue.js 生态系统](https://risingstars.js.org/2018/en#section-vue) 12 | - [2017 Vue.js 生态系统](https://risingstars.js.org/2017/en#section-vue) 13 | - [2016 Vue.js 生态系统](https://risingstars.js.org/2016/en#section-vue) 14 | 15 | ## Vue.js 资料（2023） 16 | ## Vue.js 资料（2023） 17 | 18 | ## 关于仓库 19 | 20 | 这个仓库是笔者用来记录自己学习Vue.js知识，自己整理的一些的学习资料。 21 | 22 | 欢迎提交对本仓库的改进建议~ 23 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | require('@rushstack/eslint-patch/modern-module-resolution') 3 | 4 | module.exports = { 5 | root: true, 6 | 'extends': [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/eslint-config-typescript', 10 | '@vue/eslint-config-prettier' 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 'latest' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/README.md: -------------------------------------------------------------------------------- 1 | # Vue3-WebSocket-demo 2 | 3 | This template should help get you started developing with Vue 3 in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). 8 | 9 | ## Type Support for `.vue` Imports in TS 10 | 11 | TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. 12 | 13 | If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: 14 | 15 | 1. Disable the built-in TypeScript Extension 16 | 1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette 17 | 2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` 18 | 2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. 19 | 20 | ## Customize configuration 21 | 22 | See [Vite Configuration Reference](https://vitejs.dev/config/). 23 | 24 | ## Project Setup 25 | 26 | ```sh 27 | npm install 28 | ``` 29 | 30 | ### Compile and Hot-Reload for Development 31 | 32 | ```sh 33 | npm run dev 34 | ``` 35 | 36 | ### Type-Check, Compile and Minify for Production 37 | 38 | ```sh 39 | npm run build 40 | ``` 41 | 42 | ### Run Unit Tests with [Vitest](https://vitest.dev/) 43 | 44 | ```sh 45 | npm run test:unit 46 | ``` 47 | 48 | ### Lint with [ESLint](https://eslint.org/) 49 | 50 | ```sh 51 | npm run lint 52 | ``` 53 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-websocket-demo", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "run-p type-check build-only", 8 | "preview": "vite preview", 9 | "test:unit": "vitest --environment jsdom --root src/", 10 | "build-only": "vite build", 11 | "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false", 12 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore" 13 | }, 14 | "dependencies": { 15 | "element-plus": "^2.2.28", 16 | "pinia": "^2.0.28", 17 | "vue": "^3.2.45", 18 | "vue-router": "^4.1.6" 19 | }, 20 | "devDependencies": { 21 | "@rushstack/eslint-patch": "^1.1.4", 22 | "@types/jsdom": "^20.0.1", 23 | "@types/node": "^18.11.12", 24 | "@vitejs/plugin-vue": "^4.0.0", 25 | "@vitejs/plugin-vue-jsx": "^3.0.0", 26 | "@vue/eslint-config-prettier": "^7.0.0", 27 | "@vue/eslint-config-typescript": "^11.0.0", 28 | "@vue/test-utils": "^2.2.6", 29 | "@vue/tsconfig": "^0.1.3", 30 | "eslint": "^8.22.0", 31 | "eslint-plugin-vue": "^9.3.0", 32 | "jsdom": "^20.0.3", 33 | "npm-run-all": "^4.1.5", 34 | "prettier": "^2.7.1", 35 | "typescript": "~4.7.4", 36 | "vite": "^4.0.3", 37 | "vitest": "^0.25.6", 38 | "vue-tsc": "^1.0.12" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SincereCSL/Vue.js-Study/561b9328f9d0a09aea7e490effed335c77e5655c/Vue3-WebSocket-demo/public/favicon.ico -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/server/index.js: -------------------------------------------------------------------------------- 1 | const WebSocket = require("ws"); 2 | // import { WebSocketServer } from 'ws'; 3 | ;((Ws) => { 4 | const server = new Ws.Server({ port: 8000 }); 5 | const init = () => { 6 | bindEvent(); 7 | }; 8 | 9 | function bindEvent() { 10 | server.on('open', handleOpen); 11 | server.on('close', handleClose); 12 | server.on('error', handleError); 13 | server.on('connection', handleConnection); 14 | } 15 | 16 | function handleOpen() { 17 | console.log("WebSocket Open"); 18 | } 19 | 20 | function handleClose() { 21 | console.log("WebSocket Close"); 22 | } 23 | 24 | function handleError() { 25 | console.log("WebSocket Error"); 26 | } 27 | 28 | function handleConnection(ws) { 29 | console.log("WebSocket Connection"); 30 | ws.on("message", handleMessage); 31 | } 32 | 33 | function handleMessage(msg) { 34 | console.log("msg"); 35 | } 36 | 37 | init(); 38 | 39 | })(WebSocket); 40 | 41 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "node index.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "ws": "^8.11.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/server/pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: 5.4 2 | 3 | specifiers: 4 | ws: ^8.11.0 5 | 6 | dependencies: 7 | ws: 8.11.0 8 | 9 | packages: 10 | 11 | /ws/8.11.0: 12 | resolution: {integrity: sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==} 13 | engines: {node: '>=10.0.0'} 14 | peerDependencies: 15 | bufferutil: ^4.0.1 16 | utf-8-validate: ^5.0.2 17 | peerDependenciesMeta: 18 | bufferutil: 19 | optional: true 20 | utf-8-validate: 21 | optional: true 22 | dev: false 23 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 20 | 21 | 84 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | position: relative; 59 | font-weight: normal; 60 | } 61 | 62 | body { 63 | min-height: 100vh; 64 | color: var(--color-text); 65 | background: var(--color-background); 66 | transition: color 0.5s, background-color 0.5s; 67 | line-height: 1.6; 68 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 69 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 70 | font-size: 15px; 71 | text-rendering: optimizeLegibility; 72 | -webkit-font-smoothing: antialiased; 73 | -moz-osx-font-smoothing: grayscale; 74 | } 75 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | 8 | font-weight: normal; 9 | } 10 | 11 | a, 12 | .green { 13 | text-decoration: none; 14 | color: hsla(160, 100%, 37%, 1); 15 | transition: 0.4s; 16 | } 17 | 18 | @media (hover: hover) { 19 | a:hover { 20 | background-color: hsla(160, 100%, 37%, 0.2); 21 | } 22 | } 23 | 24 | @media (min-width: 1024px) { 25 | body { 26 | display: flex; 27 | place-items: center; 28 | } 29 | 30 | #app { 31 | display: grid; 32 | grid-template-columns: 1fr 1fr; 33 | padding: 0 2rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 41 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/TheWelcome.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 87 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/WelcomeItem.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 87 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/__tests__/HelloWorld.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest' 2 | 3 | import { mount } from '@vue/test-utils' 4 | import HelloWorld from '../HelloWorld.vue' 5 | 6 | describe('HelloWorld', () => { 7 | it('renders properly', () => { 8 | const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } }) 9 | expect(wrapper.text()).toContain('Hello Vitest') 10 | }) 11 | }) 12 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/configs/index.ts: -------------------------------------------------------------------------------- 1 | const BASE_URL: string = 'loclhost'; 2 | const WS_PORT: string = '8000'; 3 | export const WS_ADDRESS:string | URL = `ws://${BASE_URL}:${WS_PORT}` 4 | 5 | export default {WS_ADDRESS} 6 | 7 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | import { useWebSocket } from "./websocket"; 2 | export default { 3 | useWebSocket 4 | } 5 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/hooks/websocket.ts: -------------------------------------------------------------------------------- 1 | import { WS_ADDRESS } from "../configs"; 2 | export function useWebSocket() { 3 | const ws = new WebSocket(WS_ADDRESS) 4 | 5 | const init = () =>{ 6 | bindEvent(); 7 | } 8 | 9 | function bindEvent(){ 10 | ws.addEventListener('open',handleOpen,false) 11 | ws.addEventListener('close',handleClose,false) 12 | ws.addEventListener('error',handleError,false) 13 | ws.addEventListener('message ',handleMessage,false) 14 | } 15 | 16 | function handleOpen(event:any){ 17 | console.log("WebSocket is open now.",event); 18 | } 19 | function handleClose(event:any){ 20 | console.log("WebSocket is close now.",event); 21 | } 22 | function handleError(event:any){ 23 | console.log("WebSocket is error now.",event); 24 | } 25 | function handleMessage(event:any){ 26 | console.log("WebSocket is message now.",event); 27 | } 28 | init(); 29 | return ws; 30 | } 31 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import { createPinia } from 'pinia' 3 | import ElementPlus from 'element-plus' 4 | import 'element-plus/dist/index.css' 5 | import App from './App.vue' 6 | import router from './router' 7 | 8 | import './assets/main.css' 9 | 10 | const app = createApp(App) 11 | 12 | app.use(createPinia()) 13 | app.use(ElementPlus) 14 | app.use(router) 15 | 16 | app.mount('#app') 17 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/router/index.ts: -------------------------------------------------------------------------------- 1 | import { createRouter, createWebHistory } from "vue-router"; 2 | import HomeView from "../views/HomeView.vue"; 3 | 4 | const router = createRouter({ 5 | history: createWebHistory(import.meta.env.BASE_URL), 6 | routes: [ 7 | { 8 | path: "/login", 9 | name: "login", 10 | // route level code-splitting 11 | // this generates a separate chunk (About.[hash].js) for this route 12 | // which is lazy-loaded when the route is visited. 13 | component: () => import("../views/LoginView.vue") 14 | }, 15 | { 16 | path: "/", 17 | name: "home", 18 | component: HomeView 19 | } 20 | ] 21 | }); 22 | 23 | export default router; 24 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/stores/counter.ts: -------------------------------------------------------------------------------- 1 | import { ref, computed } from 'vue' 2 | import { defineStore } from 'pinia' 3 | 4 | export const useCounterStore = defineStore('counter', () => { 5 | const count = ref(0) 6 | const doubleCount = computed(() => count.value * 2) 7 | function increment() { 8 | count.value++ 9 | } 10 | 11 | return { count, doubleCount, increment } 12 | }) 13 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/views/HomeView.vue: -------------------------------------------------------------------------------- 1 | 42 | 60 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/src/views/LoginView.vue: -------------------------------------------------------------------------------- 1 | 25 | 74 | 75 | 84 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.web.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "baseUrl": ".", 8 | "paths": { 9 | "@/*": ["./src/*"] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/tsconfig.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.node.json", 3 | "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"], 4 | "compilerOptions": { 5 | "composite": true, 6 | "types": ["node"] 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.config.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | }, 10 | { 11 | "path": "./tsconfig.vitest.json" 12 | } 13 | ], 14 | } 15 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/tsconfig.vitest.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.app.json", 3 | "exclude": [], 4 | "compilerOptions": { 5 | "composite": true, 6 | "lib": [], 7 | "types": ["node", "jsdom"] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Vue3-WebSocket-demo/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | import vueJsx from '@vitejs/plugin-vue-jsx' 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [vue(), vueJsx()], 10 | resolve: { 11 | alias: { 12 | '@': fileURLToPath(new URL('./src', import.meta.url)) 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /build-fix.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # 颜色输出 5 | RED='\033[0;31m' 6 | GREEN='\033[0;32m' 7 | BLUE='\033[0;34m' 8 | YELLOW='\033[0;33m' 9 | NC='\033[0m' # No Color 10 | 11 | echo -e "${BLUE}开始修复并部署到GitHub Pages...${NC}" 12 | 13 | # 构建233park-web项目 14 | echo -e "${BLUE}1. 构建项目...${NC}" 15 | cd 233park-web 16 | npm ci 17 | npm run build 18 | 19 | # 修复资源路径 20 | echo -e "${BLUE}2. 修复资源路径...${NC}" 21 | sed -i '' 's|/Vue.js-Study/233park-web/|./|g' dist/index.html 22 | cd .. 23 | 24 | # 创建根目录重定向页面 25 | echo -e "${BLUE}3. 创建重定向页面...${NC}" 26 | cat > redirect.html << EOF 27 | 28 | 29 | 30 | 31 | 32 | 233Park - Vue.js项目 33 | 34 | 50 | 51 | 52 |

233Park - Vue.js项目

53 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

54 | 55 | 56 | EOF 57 | 58 | # 准备部署目录 59 | echo -e "${BLUE}4. 准备部署文件...${NC}" 60 | rm -rf dist_deploy 61 | mkdir -p dist_deploy/233park-web 62 | cp -r 233park-web/dist/* dist_deploy/233park-web/ 63 | cp redirect.html dist_deploy/index.html 64 | touch dist_deploy/.nojekyll 65 | 66 | # 创建具有正确结构的示例文件 67 | echo -e "${BLUE}5. 创建示例文件...${NC}" 68 | cat > dist_deploy/233park-web/manual-deploy.txt << EOF 69 | 这是一个手动部署的示例文件，用于确认部署结构正确。 70 | 部署时间: $(date +'%Y-%m-%d %H:%M:%S') 71 | EOF 72 | 73 | echo -e "${GREEN}部署文件已准备完成！${NC}" 74 | echo -e "${YELLOW}请将dist_deploy目录的内容手动上传到GitHub仓库的gh-pages分支${NC}" 75 | echo -e "${YELLOW}或者使用GitHub网页界面上传这些文件${NC}" 76 | echo -e "${GREEN}部署后访问: https://sincerecsl.github.io/Vue.js-Study/ 查看网站${NC}" -------------------------------------------------------------------------------- /build.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # 进入233park-web目录 4 | cd 233park-web 5 | 6 | # 安装依赖 7 | npm ci 8 | 9 | # 构建项目 10 | npm run build 11 | 12 | # 返回根目录 13 | cd .. 14 | 15 | # 确保有.nojekyll文件 16 | touch .nojekyll 17 | touch 233park-web/dist/.nojekyll 18 | 19 | # 输出成功信息 20 | echo "构建完成，现在可以部署到GitHub Pages了" -------------------------------------------------------------------------------- /deploy-gh.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # 颜色输出 5 | RED='\033[0;31m' 6 | GREEN='\033[0;32m' 7 | BLUE='\033[0;34m' 8 | YELLOW='\033[0;33m' 9 | NC='\033[0m' # No Color 10 | 11 | echo -e "${BLUE}开始准备部署到GitHub Pages...${NC}" 12 | 13 | # 安装gh-pages工具 14 | echo -e "${BLUE}1. 安装gh-pages工具...${NC}" 15 | npm install -g gh-pages 16 | 17 | # 构建233park-web项目 18 | echo -e "${BLUE}2. 构建项目...${NC}" 19 | cd 233park-web 20 | npm ci 21 | npm run build 22 | cd .. 23 | 24 | # 创建发布目录 25 | echo -e "${BLUE}3. 准备发布目录...${NC}" 26 | rm -rf public 27 | mkdir -p public/233park-web 28 | 29 | # 复制文件 30 | echo -e "${BLUE}4. 复制文件到发布目录...${NC}" 31 | cp -r 233park-web/dist/* public/233park-web/ 32 | 33 | # 创建根目录索引文件 34 | echo -e "${BLUE}5. 创建根目录索引...${NC}" 35 | cat > public/index.html << EOF 36 | 37 | 38 | 39 | 40 | 41 | 233Park - Vue.js项目 42 | 43 | 59 | 60 | 61 |

233Park - Vue.js项目

62 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

63 | 64 | 65 | EOF 66 | 67 | # 确保.nojekyll文件存在 68 | touch public/.nojekyll 69 | 70 | # 创建一个测试文件验证部署 71 | echo "部署测试文件 - $(date)" > public/deployed.txt 72 | 73 | # 部署到GitHub Pages 74 | echo -e "${BLUE}6. 部署到GitHub Pages...${NC}" 75 | echo -e "${YELLOW}注意: 将使用gh-pages工具部署，这可能需要GitHub凭据${NC}" 76 | gh-pages -d public --dotfiles 77 | 78 | echo -e "${GREEN}部署命令已执行！${NC}" 79 | echo -e "${GREEN}请稍后访问 https://sincerecsl.github.io/Vue.js-Study/ 查看您的网站${NC}" 80 | echo -e "${YELLOW}如果仍有问题，请检查gh-pages工具的日志输出${NC}" -------------------------------------------------------------------------------- /deploy-manifest.txt: -------------------------------------------------------------------------------- 1 | # 233park-web 部署清单 2 | 3 | ## 核心文件 4 | - index.html (根目录重定向) 5 | - 233park-web/dist/index.html 6 | - 233park-web/dist/.nojekyll 7 | - 233park-web/dist/vite.svg 8 | 9 | ## CSS资源 10 | - 233park-web/dist/assets/index-CcRraY2h.css 11 | 12 | ## JS资源 13 | - 233park-web/dist/assets/index-CT5kgbCG.js 14 | 15 | ## 部署后的URL 16 | https://sincerecsl.github.io/Vue.js-Study/ 17 | https://sincerecsl.github.io/Vue.js-Study/233park-web/ -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # 颜色输出 5 | RED='\033[0;31m' 6 | GREEN='\033[0;32m' 7 | BLUE='\033[0;34m' 8 | YELLOW='\033[0;33m' 9 | NC='\033[0m' # No Color 10 | 11 | echo -e "${BLUE}开始部署到GitHub Pages...${NC}" 12 | 13 | # 构建233park-web项目 14 | echo -e "${BLUE}1. 构建项目...${NC}" 15 | cd 233park-web 16 | npm ci 17 | npm run build 18 | cd .. 19 | 20 | # 准备部署目录 21 | echo -e "${BLUE}2. 准备部署文件...${NC}" 22 | rm -rf deploy_temp 23 | mkdir -p deploy_temp/233park-web 24 | 25 | # 复制dist目录内容到部署目录 26 | echo -e "${BLUE}复制dist目录内容...${NC}" 27 | cp -r 233park-web/dist/* deploy_temp/233park-web/ 28 | 29 | # 检查并复制vite.svg（如果存在） 30 | if [ -f "233park-web/vite.svg" ]; then 31 | echo -e "${GREEN}找到vite.svg文件，正在复制...${NC}" 32 | cp 233park-web/vite.svg deploy_temp/233park-web/ 33 | elif [ -f "233park-web/dist/vite.svg" ]; then 34 | echo -e "${YELLOW}在dist目录找到vite.svg文件，正在复制...${NC}" 35 | cp 233park-web/dist/vite.svg deploy_temp/233park-web/ 36 | else 37 | echo -e "${YELLOW}警告: 找不到vite.svg文件，跳过复制${NC}" 38 | # 创建一个空的favicon以避免404错误 39 | echo -e "${YELLOW}创建一个空的favicon.ico文件...${NC}" 40 | touch deploy_temp/233park-web/favicon.ico 41 | fi 42 | 43 | # 添加.nojekyll文件 44 | touch deploy_temp/233park-web/.nojekyll 45 | 46 | # 复制根目录重定向文件 47 | echo -e "${BLUE}复制重定向文件...${NC}" 48 | cp index.html deploy_temp/ 49 | # 尝试复制404文件，如果存在的话 50 | if [ -f "404.html" ]; then 51 | cp 404.html deploy_temp/ 52 | fi 53 | touch deploy_temp/.nojekyll 54 | 55 | # 在部署目录创建临时git仓库 56 | echo -e "${BLUE}3. 准备Git仓库...${NC}" 57 | cd deploy_temp 58 | git init 59 | git config user.name "GitHub Actions" 60 | git config user.email "github-actions@github.com" 61 | git add . 62 | git commit -m "部署网站 $(date +'%Y-%m-%d %H:%M:%S')" 63 | 64 | # 推送到gh-pages分支 65 | echo -e "${BLUE}4. 推送到gh-pages分支...${NC}" 66 | git push -f git@github.com:SincereCSL/Vue.js-Study.git master:gh-pages 67 | 68 | # 清理 69 | echo -e "${BLUE}5. 清理临时文件...${NC}" 70 | cd .. 71 | rm -rf deploy_temp 72 | 73 | echo -e "${GREEN}部署完成！访问 https://sincerecsl.github.io/Vue.js-Study/ 查看网站${NC}" -------------------------------------------------------------------------------- /direct-deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # 颜色输出 5 | GREEN='\033[0;32m' 6 | BLUE='\033[0;34m' 7 | NC='\033[0m' # No Color 8 | 9 | echo -e "${BLUE}开始创建纯静态部署文件...${NC}" 10 | 11 | # 创建纯静态站点结构 12 | echo -e "${BLUE}1. 创建基本目录结构...${NC}" 13 | rm -rf static_site 14 | mkdir -p static_site/233park-web/assets 15 | 16 | # 创建最简单的Vue应用页面 17 | echo -e "${BLUE}2. 创建应用文件...${NC}" 18 | cat > static_site/233park-web/index.html << EOF 19 | 20 | 21 | 22 | 23 | 24 | 233乐园 - Vue.js项目 25 | 26 | 49 | 50 | 51 |
52 |

{{ title }}

53 |
✓
54 |

{{ message }}

55 |

当前时间: {{ currentTime }}

56 | 57 |
58 | 59 | 81 | 82 | 83 | EOF 84 | 85 | # 创建根目录重定向页面 86 | echo -e "${BLUE}3. 创建重定向页面...${NC}" 87 | cat > static_site/index.html << EOF 88 | 89 | 90 | 91 | 92 | 93 | 233Park - Vue.js项目 94 | 95 | 111 | 112 | 113 |

233Park - Vue.js项目

114 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

115 | 116 | 117 | EOF 118 | 119 | # 添加.nojekyll文件 120 | touch static_site/.nojekyll 121 | 122 | echo -e "${GREEN}静态站点文件已创建完成！${NC}" 123 | echo -e "${GREEN}请将static_site目录中的所有文件上传到GitHub的gh-pages分支${NC}" -------------------------------------------------------------------------------- /force-deploy.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -e 3 | 4 | # 颜色输出 5 | GREEN='\033[0;32m' 6 | BLUE='\033[0;34m' 7 | YELLOW='\033[0;33m' 8 | RED='\033[0;31m' 9 | NC='\033[0m' # No Color 10 | 11 | echo -e "${BLUE}开始强制部署纯HTML站点到GitHub Pages...${NC}" 12 | 13 | # 创建一个完全独立的HTML文件，不依赖任何外部资源 14 | echo -e "${BLUE}1. 创建独立HTML文件...${NC}" 15 | 16 | rm -rf deploy_html 17 | mkdir -p deploy_html/233park-web 18 | 19 | # 创建一个完全内联的Vue应用 20 | cat > deploy_html/233park-web/index.html << 'HTMLEOF' 21 | 22 | 23 | 24 | 25 | 26 | 233乐园 - Vue.js应用 27 | 62 | 63 | 64 |
65 |

233乐园 - Vue.js应用

66 |
✓
67 |

部署成功！应用已成功加载。

68 |

当前时间:

69 | 70 |
71 | 72 | 79 | 80 | 81 | HTMLEOF 82 | 83 | # 创建重定向页面 84 | cat > deploy_html/index.html << 'HTMLEOF' 85 | 86 | 87 | 88 | 89 | 90 | 233Park 91 | 92 | 104 | 105 | 106 |

233Park - Vue.js项目

107 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

108 | 109 | 110 | HTMLEOF 111 | 112 | # 添加必要的GitHub Pages文件 113 | touch deploy_html/.nojekyll 114 | echo "This is a test file $(date)" > deploy_html/test.txt 115 | 116 | echo -e "${BLUE}2. 初始化Git仓库并推送...${NC}" 117 | cd deploy_html 118 | git init 119 | git checkout -b gh-pages 120 | git config user.name "GitHub Pages Deploy" 121 | git config user.email "pages-deploy@github.com" 122 | 123 | git add . 124 | git commit -m "Force deploy pure HTML site $(date)" 125 | 126 | # 尝试推送到GitHub 127 | echo -e "${YELLOW}正在推送到GitHub...${NC}" 128 | if git push -f https://github.com/SincereCSL/Vue.js-Study.git gh-pages:gh-pages; then 129 | echo -e "${GREEN}推送成功！${NC}" 130 | else 131 | echo -e "${RED}远程推送失败，正在创建本地文件供手动上传...${NC}" 132 | cd .. 133 | echo -e "${YELLOW}所有文件已准备好在 'deploy_html' 目录中${NC}" 134 | echo -e "${YELLOW}请手动上传这些文件到GitHub gh-pages分支${NC}" 135 | exit 1 136 | fi 137 | 138 | cd .. 139 | echo -e "${GREEN}部署完成！请等待1-2分钟让GitHub Pages生效${NC}" 140 | echo -e "${GREEN}然后访问: https://sincerecsl.github.io/Vue.js-Study/${NC}" -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 233Park - Vue.js项目 7 | 8 | 24 | 25 | 26 |

233Park - Vue.js项目

27 |

正在跳转到项目页面，如果没有自动跳转，请点击这里。

28 | 29 | 30 | -------------------------------------------------------------------------------- /my-vue-app/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "root": true, 3 | "env": { 4 | "node": true, 5 | "browser":true, 6 | "es6":true 7 | }, 8 | "parserOptions": { 9 | "ecmaVersion": 2020, 10 | "sourceType": "module" 11 | }, 12 | "parser": "vue-eslint-parser", 13 | "extends": ["plugin:vue/vue3-essential", "plugin:vue/vue3-strongly-recommended"], 14 | "rules": { 15 | "no-console": "off", 16 | "comma-dangle":[2,"never"]//禁止使用拖尾逗号 17 | } 18 | }; 19 | -------------------------------------------------------------------------------- /my-vue-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /my-vue-app/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["johnsoncodehk.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /my-vue-app/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Typescript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 ` 12 | 13 | 14 | -------------------------------------------------------------------------------- /my-vue-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-vue-app", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vue-tsc --noEmit && vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "@types/node": "^18.11.17", 12 | "a": "^2.1.2", 13 | "element-plus": "^2.2.27", 14 | "vue": "^3.2.45", 15 | "vue-router": "^4.1.6", 16 | "vuex": "^4.1.0" 17 | }, 18 | "devDependencies": { 19 | "@vitejs/plugin-vue": "^4.0.0", 20 | "eslint": "^8.30.0", 21 | "eslint-plugin-vue": "^9.8.0", 22 | "sass": "^1.57.1", 23 | "sass-loader": "^13.2.0", 24 | "typescript": "^4.9.4", 25 | "vite": "^4.0.2", 26 | "vue-eslint-parser": "^9.1.0", 27 | "vue-tsc": "^1.0.16" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /my-vue-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SincereCSL/Vue.js-Study/561b9328f9d0a09aea7e490effed335c77e5655c/my-vue-app/public/favicon.ico -------------------------------------------------------------------------------- /my-vue-app/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 17 | 30 | -------------------------------------------------------------------------------- /my-vue-app/src/assets/CSS/common.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 7 | abbr, acronym, address, big, cite, 8 | code, 9 | del, 10 | dfn, 11 | em, 12 | img, 13 | ins, 14 | kbd, 15 | q, 16 | s, 17 | samp, 18 | small, 19 | strike, 20 | strong, 21 | sub, 22 | sup, 23 | tt, 24 | var, 25 | b, 26 | u, 27 | i, 28 | center, 29 | dl, 30 | dt, 31 | dd, 32 | ol, 33 | ul, 34 | li, 35 | fieldset, 36 | form, 37 | label, 38 | legend, 39 | table, 40 | caption, 41 | tbody, 42 | tfoot, 43 | thead, 44 | tr, 45 | th, 46 | td, 47 | article, 48 | aside, 49 | canvas, 50 | details, 51 | embed, 52 | figure, 53 | figcaption, 54 | footer, 55 | header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 56 | margin: 0; 57 | padding: 0; 58 | } 59 | 60 | html, 61 | body { 62 | font-size: 12px; 63 | font-family: Microsoft Yahei, Arial, Helvetica, sans-serif; 64 | width: 100%; 65 | height: 100%; 66 | min-width: 1200px; 67 | } 68 | 69 | img { 70 | vertical-align: middle; 71 | } 72 | 73 | 74 | :focus { 75 | outline: none; 76 | } 77 | 78 | table { 79 | border-collapse: collapse; 80 | border-spacing: 0; 81 | } 82 | 83 | ul, 84 | ol, 85 | dd, 86 | dt, 87 | dl, 88 | li { 89 | list-style-type: none; 90 | } 91 | 92 | a { 93 | text-decoration: none; 94 | -webkit-touch-callout: none; 95 | -webkit-user-select: none; 96 | } 97 | 98 | a, 99 | input, 100 | select { 101 | -webkit-tap-highlight-color: transparent; 102 | -webkit-appearance: none; 103 | -moz-appearance: none; 104 | -webkit-border-radius: 0; 105 | outline: none; 106 | } 107 | 108 | .fl { 109 | float: left; 110 | } 111 | 112 | .fr { 113 | float: right; 114 | } 115 | 116 | .clearfix:before, 117 | .clearfix:after { 118 | content: ''; 119 | display: block; 120 | clear: both; 121 | height: 0; 122 | } 123 | 124 | .clearfix { 125 | *zoom: 1; 126 | } 127 | 128 | p, 129 | h1, 130 | h2, 131 | h3, 132 | h4, 133 | h5, 134 | h6, 135 | span, 136 | i, 137 | em { 138 | word-wrap: break-word; 139 | font-style: normal; 140 | font-weight: normal; 141 | } 142 | 143 | .before:before { 144 | content: ''; 145 | display: table; 146 | } 147 | 148 | button { 149 | border: none; 150 | appearance: none; 151 | -webkit-appearance: none; 152 | outline: none; 153 | } 154 | 155 | button::after { 156 | border: none; 157 | appearance: none; 158 | -webkit-appearance: none; 159 | outline: none; 160 | } 161 | 162 | input, 163 | textarea { 164 | //-moz-user-focus: none; 165 | //-moz-user-select: none; 166 | -webkit-appearance: none; 167 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 168 | line-height: normal !important; 169 | outline: none; 170 | border: none; 171 | } 172 | -------------------------------------------------------------------------------- /my-vue-app/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SincereCSL/Vue.js-Study/561b9328f9d0a09aea7e490effed335c77e5655c/my-vue-app/src/assets/logo.png -------------------------------------------------------------------------------- /my-vue-app/src/components/comp.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /my-vue-app/src/components/menu.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 64 | 65 | 71 | -------------------------------------------------------------------------------- /my-vue-app/src/components/rate.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /my-vue-app/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import type { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } 9 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/AppMain/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 49 | 50 | 72 | 73 | 80 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Navbar/index.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 247 | 248 | 381 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Settings/checkBoxList.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | imageL: require("@/assets/images/dark.svg"), 3 | alt: "dark", 4 | name: "ThemeDark", 5 | }, 6 | { 7 | imageL: require("@/assets/images/light.svg"), 8 | alt: "light", 9 | name: "ThemeLight", 10 | }, 11 | { 12 | imageL: require("@/assets/images/gray.svg"), 13 | alt: "gray", 14 | name: "ThemeGray", 15 | }, 16 | { 17 | imageL: require("@/assets/images/green.svg"), 18 | alt: "green", 19 | name: "ThemeGreen", 20 | }, 21 | { 22 | imageL: require("@/assets/images/blue.svg"), 23 | alt: "blue", 24 | name: "ThemeBlue", 25 | }, 26 | { 27 | imageL: require("@/assets/images/purple.svg"), 28 | alt: "purple", 29 | name: "ThemePurple", 30 | }, 31 | { 32 | imageL: require("@/assets/images/red.svg"), 33 | alt: "red", 34 | name: "ThemeRed", 35 | }, 36 | { 37 | imageL: require("@/assets/images/yellow.svg"), 38 | alt: "yellow", 39 | name: "ThemeYellow", 40 | }, 41 | { 42 | imageL: require("@/assets/images/orange.svg"), 43 | alt: "orange", 44 | name: "ThemeOrange", 45 | }, 46 | ] -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Settings/index.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 123 | 124 | 193 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Sidebar/Item.vue: -------------------------------------------------------------------------------- 1 | 9 | 41 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Sidebar/Link.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 42 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Sidebar/Logo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | 78 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Sidebar/SidebarItem.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 132 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/Sidebar/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 66 | 67 | 77 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/TagsView/ScrollPane.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 62 | 63 | 77 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/components/TagsView/index.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 324 | 325 | 401 | -------------------------------------------------------------------------------- /my-vue-app/src/layout/index.vue: -------------------------------------------------------------------------------- 1 |