vue动态路由写法

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

1. 创建项目

使用

CLI 创建项目，选择

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

  vue create my-project cd my-project 

2. 安装依赖包

安装

、

和 element-plus。

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

安装 pinia 和 echarts。

 npm install pinia echarts@5 --save 

3. 配置

在根目录下创建 `

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

```js

import path from 'path'

import { defineConfig } from '

'

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 '

'

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

'

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 '

'

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

'

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 '

'

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

'

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` 查看效果。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/15871.html