diff --git a/.env b/.env index 6d4a853..26cf0c3 100644 --- a/.env +++ b/.env @@ -1,5 +1,6 @@ # 项目根目录 VITE_BASE_URL=/ - # 项目名称 -VITE_APP_TITLE = 'Ench Admin' \ No newline at end of file +VITE_APP_TITLE = Ench Admin +# 路由模式 +VITE_HASH_ROUTE = Y diff --git a/.eslintrc.js b/.eslintrc.js index f4d0c28..f99d072 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -32,5 +32,6 @@ module.exports = { 'no-var': 'error', // 禁止使用var 'no-console': 'warn', // 禁止出现console 'no-debugger': 'off', // 关闭debugger警告 + 'vue/multi-word-component-names': 0, // 关闭文件名多单词 }, }; diff --git a/.prettierrc.js b/.prettierrc.js index b14aac5..c3501b3 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1,6 @@ module.exports = { // https://prettier.io/docs/en/options.html - printWidth: 80, //单行长度 + printWidth: 120, //单行长度 tabWidth: 2, //缩进长度 useTabs: false, //使用空格代替tab缩进 semi: true, //句末使用分号 diff --git a/package.json b/package.json index cadfe9f..7be83b1 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write" }, "dependencies": { - "vue": "^3.2.37" + "vue": "^3.2.37", + "vue-router": "^4.1.3" }, "devDependencies": { "@commitlint/cli": "^17.0.3", diff --git a/src/App.vue b/src/App.vue index 9cc1c3a..8664306 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,25 +1,7 @@ - + - + diff --git a/src/assets/vue.svg b/src/assets/vue.svg deleted file mode 100644 index 770e9d3..0000000 --- a/src/assets/vue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 3b2dffd..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/src/main.ts b/src/main.ts index f8c23e4..20b3468 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,13 @@ import { createApp } from 'vue'; -import './style.css'; import App from './App.vue'; +import { setupRouter } from './router'; -createApp(App).mount('#app'); +async function setupApp() { + // 创建vue实例 + const app = createApp(App); + // 安装router + await setupRouter(app); + // 挂载 + app.mount('#app'); +} +setupApp(); diff --git a/src/router/index.ts b/src/router/index.ts new file mode 100644 index 0000000..dbd4460 --- /dev/null +++ b/src/router/index.ts @@ -0,0 +1,27 @@ +import type { App } from 'vue'; +import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'; + +const routes: RouteRecordRaw[] = [ + { + path: '/', + name: 'Login', + component: () => import('@/views/login/index.vue'), // 注意这里要带上 文件后缀.vue + }, + { + path: '/test', + name: 'test', + component: () => import('@/views/system/index.vue'), // 注意这里要带上 文件后缀.vue + }, +]; + +const { VITE_HASH_ROUTE = 'N', VITE_BASE_URL } = import.meta.env; +export const router = createRouter({ + history: VITE_HASH_ROUTE === 'Y' ? createWebHashHistory(VITE_BASE_URL) : createWebHistory(VITE_BASE_URL), + routes, +}); + +// 安装vue路由 +export async function setupRouter(app: App) { + app.use(router); + await router.isReady(); //https://router.vuejs.org/zh/api/index.html#isready +} diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 0192f9a..0000000 --- a/src/style.css +++ /dev/null @@ -1,81 +0,0 @@ -:root { - font-family: Inter, Avenir, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -.card { - padding: 2em; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/src/types/env.d.ts b/src/types/env.d.ts new file mode 100644 index 0000000..e57b60e --- /dev/null +++ b/src/types/env.d.ts @@ -0,0 +1,18 @@ +interface ImportMetaEnv { + /** 项目基本地址 */ + readonly VITE_BASE_URL: string; + /** 项目标题 */ + readonly VITE_APP_TITLE: string; + /** 开启请求代理 */ + readonly VITE_HTTP_PROXY?: 'Y' | 'N'; + /** 是否开启打包压缩 */ + readonly VITE_COMPRESS?: 'Y' | 'N'; + /** 压缩算法类型 */ + readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'; + /** hash路由模式 */ + readonly VITE_HASH_ROUTE?: 'Y' | 'N'; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} diff --git a/src/types/shims-vue.d.ts b/src/types/shims-vue.d.ts new file mode 100644 index 0000000..40f3f4b --- /dev/null +++ b/src/types/shims-vue.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { DefineComponent } from 'vue'; + const component: DefineComponent; + export default component; +} diff --git a/src/views/login/index.vue b/src/views/login/index.vue new file mode 100644 index 0000000..e5127e0 --- /dev/null +++ b/src/views/login/index.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/src/views/system/index.vue b/src/views/system/index.vue new file mode 100644 index 0000000..6e28a43 --- /dev/null +++ b/src/views/system/index.vue @@ -0,0 +1,11 @@ + + + + +