Vue

发表 | 更新
| 字数 1380

摘要：前端模版。

目录

[TOC]

Vue

Vue 项目实例

  1. src/view/ums/admin/index.vue，获取模型并双向绑定到 <template> 中的 element-ui :data="list"；
  2. src/api/login.js api接口 request url；
  3. src/utils/request.js Axios接口拦截器拦截 request 请求；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 1. src/view/ums/admin/index.vue
<template>
  <div class="app-container">
      <div class="table-container">
          <el-table ref="adminTable"
                    :data="list"
                    style="width: 100%;"
                    v-loading="listLoading" border>
            <el-table-column label="编号" width="100" align="center">
              <template slot-scope="scope"></template>
            </el-table-column>
       </div>
       <el-dialog
      :title="isEdit?'编辑用户':'添加用户'"
      :visible.sync="dialogVisible">
      <el-form :model="admin"
               ref="adminForm">
        <el-form-item label="帐号：">
          <el-input v-model="admin.username" style="width: 250px"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
   ...
</template>

<script>
export default {
    name: 'adminList',
    data() {
      return {
        listQuery: Object.assign({}, defaultListQuery),
        list: null,
        total: null,
        dialogVisible: false,
        admin: Object.assign({}, defaultAdmin),
        isEdit: false,
      }
    },
   methods: {
     getList() {
        this.listLoading = true;
        fetchList(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data.list;
          this.total = response.data.total;
        });
      }
   }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// 2. src/api/login.js api接口
export function fetchList(params) {
  return request({
    url: '/admin/list',
    method: 'get',
    params: params
  })
}

// 3. src/utils/request.js Axios接口拦截器拦截请求
// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  if (store.getters.token) {
    config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 3 * 1000
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error)// for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 3 * 1000
    })
    return Promise.reject(error)
  }
)

项目结构

  • Vue 3 项目由多个文件和文件夹组成，核心文件包括 index.html、main.js 和 App.vue。
  • Vue 组件是应用的基本构建块，使用单文件组件（.vue 文件）定义。
  • Vue Router 用于管理路由，Vuex 用于状态管理。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── assets/         # 静态资源（如图片、字体等）
│   ├── components/     # 可复用的 Vue 组件
│   ├── views/          # 页面级组件，存放视图组件，通常对应路由，每个视图都是一个独立的 .vue 文件。
│   ├── App.vue         # 根组件，整个应用的入口组件。
│   ├── main.js         # 项目/应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。
│   ├── router.js       # 路由配置
│   ├── store.js        # Vuex 状态管理配置
│   └── ...             # 其他配置和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

Vue 组件的基本结构

Vue 组件是 Vue 应用的核心构建块，每个组件都是一个独立的 .vue 文件。

通常包含以下部分：

  1. 模板（<template>）：
    • 使用 HTML 和 Vue 模板语法定义组件的 UI。
    • 支持插值（``）、指令（如 v-if、v-for）和事件绑定（如 @click）。
  2. 脚本（<script>）：
    • 定义组件的逻辑，包括数据、方法、生命周期钩子等。
    • 使用 export default 导出组件选项。
  3. 样式（<style>）：
    • 定义组件的样式。
    • 使用 scoped 属性可以将样式限制在当前组件内。

Vite 构建工具

Webpack 传统构建工具

模板语法

Vue.js 为两个最为常用的指令提供了特别的缩写：

  • v-bind 缩写：指定HTML 属性中的值。
  • v-on 缩写：用于监听 DOM 事件。
    • 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
    • 如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。举例，在以下情况下有用：
      • 单击“提交”按钮，阻止其提交表单；
      • 单击链接，防止链接跟随 URL。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

<!-- 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->
<form v-on:submit.prevent="onSubmit"></form>

声明响应式状态

Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。

Vue Router

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

Element-UI

0%