Vue-Bootstrap-Table 项目教程

最新推荐文章于 2024-08-16 08:20:46 发布

史霁蔷Primrose

最新推荐文章于 2024-08-16 08:20:46 发布

阅读量275

点赞数 5

本文链接：https://blog.csdn.net/gitblog_01019/article/details/141236311

版权

Vue-Bootstrap-Table 项目教程

vue-bootstrap-table项目地址:https://gitcode.com/gh_mirrors/vu/vue-bootstrap-table

1. 项目的目录结构及介绍

vue-bootstrap-table/
├── dist/
│   ├── vue-bootstrap-table.js
│   └── vue-bootstrap-table.min.js
├── examples/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   └── VueBootstrapTable.vue
│   ├── main.js
│   └── ...
├── .babelrc
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.html
├── package.json
├── webpack.build.js
├── webpack.build.min.js
└── webpack.config.js

目录结构介绍

dist/: 包含编译后的 JavaScript 文件，包括压缩和未压缩版本。
examples/: 包含项目的示例文件，用于展示组件的使用方法。
src/: 包含项目的源代码，包括组件和主入口文件。
- components/: 包含 Vue 组件文件。
- main.js: 项目的主入口文件。
.babelrc: Babel 配置文件。
.gitignore: Git 忽略文件配置。
CHANGELOG.md: 项目更新日志。
LICENSE: 项目许可证。
README.md: 项目说明文档。
index.html: 项目的主 HTML 文件。
package.json: 项目的依赖和脚本配置。
webpack.build.js: Webpack 构建配置文件。
webpack.build.min.js: Webpack 压缩构建配置文件。
webpack.config.js: Webpack 通用配置文件。

2. 项目的启动文件介绍

主入口文件

项目的主入口文件是 src/main.js，它负责初始化 Vue 实例并注册组件。

import Vue from 'vue';
import VueBootstrapTable from './components/VueBootstrapTable.vue';

new Vue({
  el: '#app',
  components: {
    VueBootstrapTable
  },
  data: {
    columns: [
      { title: "id" },
      { title: "name", visible: true, editable: true },
      { title: "age", visible: true, editable: true },
      { title: "country", visible: true, editable: true }
    ],
    values: [
      { id: 1, name: "John", country: "UK", age: 25 },
      { id: 2, name: "Mary", country: "France", age: 30 },
      { id: 3, name: "Ana", country: "Portugal", age: 20 }
    ]
  }
});

HTML 文件

项目的 HTML 文件是 index.html，它包含了 Vue 实例的挂载点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Bootstrap Table</title>
</head>
<body>
  <div id="app">
    <vue-bootstrap-table :columns="columns" :values="values" :show-filter="true" :show-column-picker="true" :sortable="true" :multi-column-sortable=true :paginated="true" :filter-case-sensitive=false>
    </vue-bootstrap-table>
  </div>
  <script src="dist/vue-bootstrap-table.js"></script>
</body>
</html>

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖和脚本配置。

{
  "name": "vue-bootstrap-table",
  "version": "1.1.8",
  "description": "A sortable and searchable table as a Vue component using bootstrap styling",
  "main": "dist/vue-bootstrap-table.js",
  "scripts": {
    "build": "webpack --config webpack.build.js",
    "build-min": "webpack --config webpack.build.min.js"
  },
  "dependencies": {
    "vue": "^1.0.26"
  },
  "devDependencies": {
    "babel

vue-bootstrap-table项目地址:https://gitcode.com/gh_mirrors/vu/vue-bootstrap-table

史霁蔷Primrose

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-Bootstrap-Table 项目教程

Vue-Bootstrap-Table 项目教程 vue-bootstrap-table项目地址:https://gitcode.com/gh_mirrors/vu/vue-bootstrap-table 1. 项目的目录结构及介绍vue-bootstrap-table/├── dist/│ ├── vue-bootstrap-table.js│ └── vue-bootstra...
复制链接

扫一扫