1.创建vue工程
使用管理员方式进入项目文件夹下
输入以下命令,创建vue项目
npm init vue@latest
安装相关依赖
- Element-Plus
npm install element-plus --save
- Axios
npm install axios
- Sass
npm install sass -D
目录调整
- 删除components下面自动生成的内容
- 新建目录api、utils、views
- 将资料中的静态资源拷贝到assets目录下
- 删除App.uve中自动生成的内容
进入vscode中将main.js中 的import './assets/main.css'改为import './assets/main.scss'
2.ElementPlus的使用步骤
安装:npm install element-plus –save
使用管理员方式打开命令提示符,进入项目文件夹下
输入
npm install element-plus –save
等待安装完成之后
在csCode中main.js中引入Elements plus
import './assets/main.scss' import { createApp } from 'vue' import App from './App.vue' //引入ElementsPlus import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app=createApp(App) app.mount('#app') app.use(ElementPlus)
3.VueRouter的使用
安装vue-router
npm install vue-router@4
在src/router/index.js中创建路由器,并导出
- 子路由
配置子路由 children
声明router-view标签
为菜单el-menu-item设置index属性,设置点击后的路由路径