diff --git a/admin-fe/README.MD b/admin-fe/README.MD index 632cd62..4023126 100644 --- a/admin-fe/README.MD +++ b/admin-fe/README.MD @@ -1,16 +1,21 @@ ## 初始化项目 + ```shell npm init -y ``` + ## 选择打包编译工具 + webpack vite(新项目个人推荐) ## 选择技术栈（推荐使用typescript） + vue 3 、vue-router 、axios/fetch 、pinia 、dayjs ## 安装依赖 + ```shell npm install vue vue-router pinia dayjs yarn add vue vue-router pinia dayjs @@ -20,7 +25,9 @@ npm install vite @vitejs/plugin-vue typescript vue-tsc yarn add -D vite @vitejs/plugin-vue typescript vue-tsc pnpm install vite @vitejs/plugin-vue typescript vue-tsc ``` + ## html模板 + ```html @@ -34,7 +41,9 @@ pnpm install vite @vitejs/plugin-vue typescript vue-tsc ``` + ## main.ts + ```ts import {createApp, defineComponent} from 'vue'; @@ -45,7 +54,9 @@ const App = defineComponent({ const app = createApp(App) app.mount('#vue-root-app') ``` + ## package.json的配置 + ```json { "name": "admin-fe", @@ -60,11 +71,90 @@ app.mount('#vue-root-app') } ``` + ## vite的配置 + +[https://cn.vitejs.dev/guide/](https://cn.vitejs.dev/guide/) + ```js import vue from '@vitejs/plugin-vue' + export default { // 必须配置vue插件 plugins: [vue()] } +``` + +## 路由 + +#### 当页面比较少时，可以考虑直接使用if判断限制不使用组件 + +```vue + + + + + + +``` + +#### 页面较多 则使用vue-router + +[https://router.vuejs.org/zh/introduction.html](https://router.vuejs.org/zh/introduction.html) + +```shell +// 1.定义路由 +const routes = [ + { + path: '路径', + component: 组件对象, + redirect: '要跳转的路径', + children:[ // 路由嵌套 + { + path: '路径', + component: 组件对象, + } + ] + } +] +// 2.创建路由对象 +import {createRouter} from 'vue-router' +const router = createRouter({ + routes: routes +}) +// 3.使用路由 +const app = createApp(); +app.use(router); // 在应用使用router ``` \ No newline at end of file diff --git a/admin-fe/src/App.vue b/admin-fe/src/App.vue index 0753c6c..1a56f1c 100644 --- a/admin-fe/src/App.vue +++ b/admin-fe/src/App.vue @@ -1,19 +1,32 @@ + + \ No newline at end of file diff --git a/admin-fe/src/User.vue b/admin-fe/src/User.vue new file mode 100644 index 0000000..bcda02f --- /dev/null +++ b/admin-fe/src/User.vue @@ -0,0 +1,14 @@ + + + + + \ No newline at end of file diff --git a/admin-fe/src/main.ts b/admin-fe/src/main.ts index acf6b9d..bad7cdc 100644 --- a/admin-fe/src/main.ts +++ b/admin-fe/src/main.ts @@ -1,5 +1,8 @@ import {createApp} from 'vue'; import App from './App.vue' +import router from './router' const app = createApp(App) +// 使用路由 +app.use(router) app.mount('#vue-root-app') \ No newline at end of file diff --git a/admin-fe/src/router/index.js b/admin-fe/src/router/index.js new file mode 100644 index 0000000..d0bebba --- /dev/null +++ b/admin-fe/src/router/index.js @@ -0,0 +1,10 @@ +import {createRouter, createWebHistory} from 'vue-router' +import routes from "./routes"; + +const baseUrl = '' // 主要配置二级目录 +const router = createRouter({ + // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 + history: createWebHistory(baseUrl), // 此模式在部署时需要配置服务 + routes +}) +export default router \ No newline at end of file diff --git a/admin-fe/src/router/routes.ts b/admin-fe/src/router/routes.ts new file mode 100644 index 0000000..e231749 --- /dev/null +++ b/admin-fe/src/router/routes.ts @@ -0,0 +1,17 @@ +import {RouteRecordRaw} from "vue-router"; +import Home from './../Home.vue' +import User from './../User.vue' + +const routes: RouteRecordRaw[] = [ + { + path: '/home', + component: Home + }, + { + path: '/user', + component: User + } +] + + +export default routes \ No newline at end of file