# vue-project-demo

**Repository Path**: magicww/vue-project-demo

## Basic Information

- **Project Name**: vue-project-demo
- **Description**: 前端vue课程代码案例 elementUI+router+axios
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-17
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# new-vue

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


1、cmd: node -v      npm -v
2、cmd: 安装vue-cli   npm install -g @vue/cli
3、git bash: winpty vue.cmd create hello-world   （babel、router、esLint）
4、git bash:（hello-world）：npm run serve //  vscode 打开 运行
5、安装axios  
npm install --save axios vue-axios

main.js  
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)


封装axios
------------
1.创建 utils/http.js 文件
2.首先引入 axios
import axios from 'axios'
3.定义baseUrl
const baseUrl = 'http://172.31.18.50:8080'
4.创建一个实例
const api = axios.create({
    baseURL: '', // 所有请求的公共地址部分
    timeout: 　3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
})
5.request请求拦截器
// 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
// interceptors axios的拦截器对象
api.interceptors.request.use(config => {
     // config 请求的所有信息
    // console.log(config);
    return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
}, err => {
    // 请求发生错误时的相关处理 抛出错误
   Promise.reject(err)
})
6.response响应拦截器
api.interceptors.response.use(res => {
    // 我们一般在这里处理，请求成功后的错误状态码 例如状态码是500，404，403
    // res 是所有相应的信息
    console.log(res)
   return Promise.resolve(res)
}, err => {
    // 服务器响应发生错误时的处理
    Promise.reject(err)
})
7.将模块暴露出去
export default api

8.全局引用 main.js
import api from '../utils/http' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上
------------------


9、安装element UI
npm i element-ui -S

main.js 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';


10、 el-button   测试是否可用
11、app.vue添加布局容器
<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-container>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </el-container>
</el-container>


拷样式
添加
.el-main {
  /* line-height: 160px; */
  height: calc(100vh - 120px);
}

12、aseide 添加 NavMenu 导航菜单
el-menu  el-submenu  el-menu-item-group  el-menu-item   index值 唯一的
添加路由
<router-link to="/user">用户列表</router-link> 
<router-view></router-view>
<router-view />

13、routes 路由规则   项目中url的集合
创建页面

14、 user.vue
mounted生命周期函数  添加接口 getUserList

el-table    // 列表

作用域插槽-- 实现的操作列的内容
slot-scope="scope"

el-pagination  // 分页


14、 用户删除功能
消息弹窗
this.$confirm
this.$message

15、

单选 多选
时间选择
选项卡
tree
栅格


搜索
16、dialog

1、创建弹窗组件坐在的vue文件
2、在user列表页面import 引入
3、components局部注册
4、template中使用组件（短横线/大驼峰）
5、绑定按钮事件，使用$refs 传值，传方法， 打开dialog