-
Notifications
You must be signed in to change notification settings - Fork 0
bienaowei/Vuets_Vite
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="icon" type="image/svg+xml" href="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/vite.svg"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vite + Vue + TS</title><script type="module" async="" crossorigin="" src="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/assets/app-da83c031.js"></script><link rel="stylesheet" href="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/assets/index-66868852.css"><style></style><link rel="modulepreload" crossorigin="" href="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/assets/README-267c0213.js"></head><body><div id="app" data-server-rendered="true"><div data-v-4e3bfc07=""><div class="bg-[length:5px_5px] backdrop-saturate-50 backdrop-blur-[8px] bg-white/80 dark:bg-gray-900/75 dark:border-gray-800" w-full="" h-80px="" px-20px="" border-b-1.5px="" border-solid="" f-c-c="" justify-between="" fixed="" bg-auto="" z-20="" px-38px="" data-v-4e3bfc07=""><div hover:drop-shadow-xl="" dark:text-gray-100="" data-v-4e3bfc07=""><img src="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/assets/vue-5532db34.svg" tag="logo" alt="" data-v-4e3bfc07=""></div><div dark:text-gray-100="" data-v-4e3bfc07="">content</div><div w-30="" flex="" justify-around="" data-v-4e3bfc07=""><button dark:text-gray-100="" icon-btn="" title="主题颜色切换" data-v-4e3bfc07=""><div i="carbon-sun dark:carbon-moon" data-v-4e3bfc07=""></div></button><button icon-btn="" dark:text-gray-100="" title="语言切换" data-v-4e3bfc07=""><div i-carbon-language="" data-v-4e3bfc07=""></div></button><a href="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/" class="" icon-btn="" dark:text-gray-100="" title="首页" data-v-4e3bfc07=""><div i-carbon-api="" data-v-4e3bfc07=""></div></a><a href="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/markdown" class="" icon-btn="" dark:text-gray-100="" title="MarkDown" data-test-id="about" data-v-4e3bfc07=""><div i-carbon-dicom-overlay="" data-v-4e3bfc07=""></div></a></div></div><div pt-100px="" px-38px="" data-v-4e3bfc07=""><h1 text-pink="" text-20px="" data-v-4e3bfc07="">Get your in the game.</h1><h1 text-60px="" dark:text-gray-100="" data-v-4e3bfc07="">Get your in the game.</h1><div bg-amber="" dark:bg-cyan="" h-200px="" data-v-4e3bfc07=""></div><div h-1000px="" data-v-4e3bfc07=""><main px-4="" py-10="" text="text-center gray-700 dark:gray-200" data-v-4e3bfc07=""><div>1 <button class="inc">+</button><button class="dec">-</button></div><div class="prose prose-sm m-auto text-left"><h1>es6-vue-template</h1><blockquote><p>ES6 Vue 项目模板</p></blockquote><h2>⛰️ 能力支持</h2><ul><li><a href="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/vuejs/router" target="_blank" rel="noopener"><code>Vue Router</code></a></li><li><a href="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/hannoeru/vite-plugin-pages" target="_blank" rel="noopener"><code>vite-plugin-pages</code></a> - 以文件系统为基础的路由</li><li><a href="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/JohnCampionJr/vite-plugin-vue-layouts" target="_blank" rel="noopener"><code>vite-plugin-vue-layouts</code></a> - 页面布局系统</li><li><a href="https://pinia.vuejs.org" target="_blank" rel="noopener"><code>Pinia</code></a> - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理</li><li><a href="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/antfu/vite-plugin-vue-markdown" target="_blank" rel="noopener"><code>vite-plugin-vue-markdown</code></a> - Markdown 作为组件，也可以让组件在 Markdown 中使用</li><li><a href="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/jGleitz/markdown-it-prism" target="_blank" rel="noopener"><code>markdown-it-prism</code></a> - <a href="https://prismjs.com/" target="_blank" rel="noopener">Prism</a> 的语法高亮</li><li><a href="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/antfu/prism-theme-vars" target="_blank" rel="noopener"><code>prism-theme-vars</code></a> - 利用 CSS 变量自定义 Prism.js 的主题</li><li><a href="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/intlify/vue-i18n-next" target="_blank" rel="noopener"><code>Vue I18n</code></a> - 国际化</li><li><a href="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/antfu/vueuse" target="_blank" rel="noopener"><code>VueUse</code></a> - 实用的 Composition API 工具合集</li><li><a href="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/vueuse/head" target="_blank" rel="noopener"><code>@vueuse/head</code></a> - 响应式地操作文档头信息</li><li><a href="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/webfansplz/vite-plugin-vue-devtools" target="_blank" rel="noopener"><code>vite-plugin-vue-devtools</code></a> - 旨在增强 Vue 开发者体验的 Vite 插件</li><li>使用 Composition API 地 <a href="vuejs/rfcs#227" target="_blank" rel="noopener"><code><script setup></code> SFC 语法</a></li><li><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener"><code>TypeScript</code></a></li><li><a href="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/vitest-dev/vitest" target="_blank" rel="noopener"><code>Vitest</code></a> - 基于 Vite 的单元测试框架</li><li><a href="https://cypress.io/" target="_blank" rel="noopener"><code>Cypress</code></a> - E2E 测试</li></ul><h2>🛡️ 配置要求</h2><ul><li><a href="https://nodejs.org/en" target="_blank" rel="noopener">node</a> >=14.18</li></ul><h2>🔨 如何使用</h2><p>1.下载代码仓库，执行如下指令</p><pre hidden=""></pre><div class="shiki-container language-sh"><pre class="shiki shiki-dark vitesse-dark" style="background-color:#121212" tabindex="0"><code><span class="line"><span style="color:#80a665">git</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">clone</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">[email protected]:encode-studio-fe/es6-vue-template.git</span></span> <span class="line"><span style="color:#b8a965">cd</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">es6-vue-template</span></span> <span class="line"></span></code></pre><pre class="shiki shiki-light vitesse-light" style="background-color:#fff" tabindex="0"><code><span class="line"><span style="color:#59873a">git</span><span style="color:#393a34"> </span><span style="color:#b56959">clone</span><span style="color:#393a34"> </span><span style="color:#b56959">[email protected]:encode-studio-fe/es6-vue-template.git</span></span> <span class="line"><span style="color:#998418">cd</span><span style="color:#393a34"> </span><span style="color:#b56959">es6-vue-template</span></span> <span class="line"></span></code></pre></div><p>2.安装依赖</p><blockquote><p>前提条件：使用最新版本的 pnpm</p></blockquote><pre hidden=""></pre><div class="shiki-container language-sh"><pre class="shiki shiki-dark vitesse-dark" style="background-color:#121212" tabindex="0"><code><span class="line"><span style="color:#80a665">pnpm</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">run</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">init</span><span style="color:#dbd7CAEE"> </span><span style="color:#758575DD"># pnpm install</span></span> <span class="line"></span></code></pre><pre class="shiki shiki-light vitesse-light" style="background-color:#fff" tabindex="0"><code><span class="line"><span style="color:#59873a">pnpm</span><span style="color:#393a34"> </span><span style="color:#b56959">run</span><span style="color:#393a34"> </span><span style="color:#b56959">init</span><span style="color:#393a34"> </span><span style="color:#a0ada0"># pnpm install</span></span> <span class="line"></span></code></pre></div><p>3.执行指令</p><p>开发 只需要执行以下命令就可以在 <code>https://localhost:9999</code> 中看到</p><pre hidden=""></pre><div class="shiki-container language-sh"><pre class="shiki shiki-dark vitesse-dark" style="background-color:#121212" tabindex="0"><code><span class="line"><span style="color:#80a665">pnpm</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">dev</span></span> <span class="line"></span></code></pre><pre class="shiki shiki-light vitesse-light" style="background-color:#fff" tabindex="0"><code><span class="line"><span style="color:#59873a">pnpm</span><span style="color:#393a34"> </span><span style="color:#b56959">dev</span></span> <span class="line"></span></code></pre></div><p>构建</p><pre hidden=""></pre><div class="shiki-container language-sh"><pre class="shiki shiki-dark vitesse-dark" style="background-color:#121212" tabindex="0"><code><span class="line"><span style="color:#80a665">pnpm</span><span style="color:#dbd7CAEE"> </span><span style="color:#c98a7d">build</span></span> <span class="line"></span></code></pre><pre class="shiki shiki-light vitesse-light" style="background-color:#fff" tabindex="0"><code><span class="line"><span style="color:#59873a">pnpm</span><span style="color:#393a34"> </span><span style="color:#b56959">build</span></span> <span class="line"></span></code></pre></div><p>然后会看到用于发布的 dist 文件夹被生成。</p></div>default<div mx-auto="" mt-5="" text-center="" text-30px="" opacity-50="">[Default Layout]</div></main></div></div></div></div><script>window.__INITIAL_STATE__='{"pinia":{}}'</script><noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript></body></html>
About
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published