当前位置:网站首页 > 技术博客 > 正文

vue动态路由写法

好的,下面是搭建后台管理系统的简单步骤:

1. 创建项目

使用

Vue

CLI 创建项目,选择

vue

3 preset,安装完成后进入项目目录。

  vue create my-project cd my-project 

2. 安装依赖包

安装

vite

vue-router

和 element-plus。

 npm install vite vue-router @4 element-plus --save 

安装 pinia 和 echarts。

 npm install pinia echarts@5 --save 

3. 配置

vite

在根目录下创建 `

vite

.config.js` 文件,配置 alias 和 server。

```js

import path from 'path'

import { defineConfig } from '

vite

'

export default defineConfig({

resolve: {

alias: {

'@': path.resolve(__dirname, 'src'),

},

},

server: {

port: 3000,

open: true,

},

})

  4. 配置 路由 在 `src` 目录下创建 `router` 文件夹,并创建 `index.js` 文件,配置 路由   ```js import { createRouter, createWebHistory } from ' vue-router ' import Home from '@/views/Home. vue '  const routes = [ { path: '/', name: 'Home', component: Home, }, ]  const router = createRouter({ history: createWebHistory(), routes, })  export default router 

在 `src` 目录下的 `main.js` 中引入

路由

```js

import { createApp } from '

vue

'

import App from 'https://blog.csdn.net/listener_life/article/details/App.

vue

'

import router from 'https://blog.csdn.net/listener_life/article/details/router'

const app = createApp(App)

app.use(router)

app.mount('#app')

  5. 配置状态管理  在 `src` 目录下创建 `store` 文件夹,并创建 `index.js` 文件,配置状态管理。  ```js import { createPinia } from 'pinia'  const store = createPinia()  export default store 

在 `src` 目录下的 `main.js` 中引入状态管理。

```js

import { createApp } from '

vue

'

import App from 'https://blog.csdn.net/listener_life/article/details/App.

vue

'

import router from 'https://blog.csdn.net/listener_life/article/details/router'

import store from 'https://blog.csdn.net/listener_life/article/details/store'

const app = createApp(App)

app.use(router)

app.use(store)

app.mount('#app')

  6. 配置 UI 框架  在 `src` 目录下的 `main.js` 中引入 element-plus。  ```js import { createApp } from ' vue ' import App from 'https://blog.csdn.net/listener_life/article/details/App. vue ' import router from 'https://blog.csdn.net/listener_life/article/details/router' import store from 'https://blog.csdn.net/listener_life/article/details/store' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css'  const app = createApp(App)  app.use(router) app.use(store) app.use(ElementPlus)  app.mount('#app') 

7. 配置 echarts

在 `src` 目录下的 `main.js` 中引入 echarts。

```js

import { createApp } from '

vue

'

import App from 'https://blog.csdn.net/listener_life/article/details/App.

vue

'

import router from 'https://blog.csdn.net/listener_life/article/details/router'

import store from 'https://blog.csdn.net/listener_life/article/details/store'

import ElementPlus from 'element-plus'

import 'element-plus/lib/theme-chalk/index.css'

import * as echarts from 'echarts'

const app = createApp(App)

app.use(router)

app.use(store)

app.use(ElementPlus)

app.config.globalProperties.$echarts = echarts

app.mount('#app')

  8. 创建页面  在 `src` 目录下创建 `views` 文件夹,并创建页面组件。  9. 创建布局  在 `src` 目录下创建 `layouts` 文件夹,并创建布局组件。  10. 配置 路由 和布局  在 `router/index.js` 中配置 路由 和布局。  ```js import { createRouter, createWebHistory } from ' vue-router ' import Layout from '@/layouts/Layout. vue ' import Home from '@/views/Home. vue '  const routes = [ { path: '/', component: Layout, children: [ { path: '', name: 'Home', component: Home, }, ], }, ]  const router = createRouter({ history: createWebHistory(), routes, })  export default router 

11. 运行项目

在项目根目录下运行 `npm run dev`,打开浏览器访问 `http://localhost:3000` 查看效果。

版权声明


相关文章:

  • 定时开关机下载2024-11-03 15:29:59
  • jdk的环境变量配置(步骤超级简单)2024-11-03 15:29:59
  • 公式编辑器破解方法2024-11-03 15:29:59
  • lxk0301 jd_docker/2024-11-03 15:29:59
  • qt中的下拉框2024-11-03 15:29:59
  • python 指定依赖模块2024-11-03 15:29:59
  • 程序员接私活怎么收费2024-11-03 15:29:59
  • 国内最强AI大模型2024-11-03 15:29:59
  • sql编程工具2024-11-03 15:29:59
  • ord python用法2024-11-03 15:29:59