当前位置：首页 > news >正文

VUE脚手架搭建+Element 组件库table

news 2026/7/28 18:43:19

由于目前vue的使用率挺高的，所以就基于前后端分离的思想搭建一个vue脚手架项目，并实现一个简单的表格功能。其中包含的技术点有vue脚手架的搭建、父子组件引用、父子组件之间的传参以及整合Element UI 组件库等。

一、vue 脚手架搭建

先安装 node [ 脚手架项目需要用到 node 中的 npm ]，不会的可以进行百度，此处不做讲解。
安装全局 vue-cli ，在命令行执行以下命令

npm install -g @vue-cli # 或者用以下命令，但需要安装 cnpm cnpm install -g @vue-cli

安装完成之后可以通过-v来检查vue的版本

# 注意是 大写的 V vue -V

安装 vue-cli 成功后，进入到想要放置项目的文件夹，执行以下命令创建项目

# test-vue 是我的项目名 vue create test-vue

我们通过上下键选择最后，自定义配置

自定义配置，选项如下截图【Linter/Formatter 最好不选，这是代码质量检查工具，即使代码没错只是格式不规范也会报错，个人觉得比较麻烦】

按上下键切换选项，按空格键选择或取消，根据自己的要求选择，完成之后回车

选择 CSS预编译器，我选择less，这几个是动态样式语言，根据个人习惯选择

回车进入代码检测工具的选择，这个在开始的时候最好不要选，本人是因为误选，就选择标准的配置

选择语法检查的方式，一个是保存时检测，一个是提交时检测，此处选择保存时检测。

把Babel, PostCSS, ESLint, etc.?配置文件放在哪里，我选择 package.json 中，便于管理

是否记录这些配置，以便下次使用，由于我之前误选一个语法检查的工具，此处就不保存了

回车开始下载依赖模块

下载完成之后会提示运行脚手架的命令，如下图所示

我们依次使用上面的两个命令，来启动脚手架项目，启动完成如下所示

如此，项目搭建完成，可以通过上面两个链接访问项目首页。

项目目录结构如下，具体目录的作用此处不做讲解。

项目默认端口为8080，如果项目改变默认端口，可以在项目根目录创建 vue.config.js ，配置端口号重启即可，内容如下

module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/', */ // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 // lintOnSave: true, // use the full build with in-browser compiler? // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only //compiler: false, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () => {}, configureWebpack: () => {}, //如果想要引入babel-polyfill可以这样写 // configureWebpack: (config) => { // config.entry = ["babel-polyfill", "./src/main.js"] // }, // vue-loader 配置项 // https://vue-loader.vuejs.org/en/options.html //vueLoader: {}, // 生产环境是否生成 sourceMap 文件 // productionSourceMap: true, // css相关配置 //css: { // 是否使用css分离插件 ExtractTextPlugin // extract: true, // 开启 CSS source maps? // sourceMap: false, // css预设器配置项 // loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. // modules: false // }, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores //parallel: require('os').cpus().length > 1, // 是否启用dll // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode // dll: false, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa // pwa: {}, // webpack-dev-server 相关配置 devServer: { open: process.platform === 'darwin', port: 9099, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => {} }, // 第三方插件配置 pluginOptions: { // ... } }

二、脚手架项目整合Element UI table组件

App.vue 作为项目的容器，所有的页面均需要放在此容器中才能得以展示在页面让我们看到。在初始化项目之后，App.vue 中默认有两个通过路由跳转的标签，为了不影响原有的文件，我们新建一个 UserList.vue 文件放置在 views 文件夹下。
在 router.js 中添加新的路由规则，用于跳转到我们新创建的页面【 /userList 】

import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import('./views/About.vue') }, { path: '/userList', name: 'userList', component: () => import('./views/UserList.vue') } ] })

在 App.vue 中添加路由标签

<div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>| <router-link to="/userList">UserList</router-link> </div>

在项目中添加Element-UI依赖

# 在项目根目录下，运行以下命令，即可添加 Element-UI依赖 npm i element-ui -S # 添加 axios 用于向后台发送请求，不可缺少 npm i -save axios

在新创建的 UserList.vue 文件中添加表格相关内容

<template> <div> <!-- 以下为搜索框 --> <div class="demo-input-size"> <el-input placeholder="请输入用户名" v-model="sname"> </el-input> <el-input placeholder="请输入昵称" v-model="snickname"> </el-input> <el-input placeholder="请输入年龄" v-model="sage"> </el-input> <el-input placeholder="请输入地址" v-model="saddr"> </el-input> </div> <el-button type="primary" @click="search()" icon="el-icon-search">搜索</el-button> <!-- 以下为表头和数据 --> <el-table :data="dataList" stripe border height="570" style="width: 80%; margin-top: 25px;"> <!-- 多选框 --> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="id" label="序号" width="55"> </el-table-column> <el-table-column prop="name" label="用户名" align="center" width="180"> </el-table-column> <el-table-column prop="nickname" align="center" label="昵称"> </el-table-column> <el-table-column prop="sex" align="center" label="性别"> </el-table-column> <el-table-column prop="age" label="年龄"> </el-table-column> <el-table-column prop="birth" label="生日"> </el-table-column> <el-table-column prop="addr" label="地址"> </el-table-column> <el-table-column label="操作" width="360"> <template slot-scope="scope"> <el-button size="mini" @click="handleSelect(scope.$index,scope.row)">查看</el-button> <el-dialog title="查看用户" :visible.sync="isShow" center :append-to-body='true' :lock-scroll="false" width="40%"> <UserInfo :user="user"></UserInfo> </el-dialog> <el-button size="mini" @click="handleUpdate(scope.$index,scope.row)">编辑</el-button> <el-dialog title="编辑用户" :visible.sync="isUpdate" center :append-to-body='true' :lock-scroll="false" width="40%"> <UserEdit :user="user" ></UserEdit> </el-dialog> <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 以下为分页 --> <el-pagination @prev-click="prevPage" @next-click="nextPage" @current-change="currentPage" background layout="prev, pager, next" :page-count="total"> </el-pagination> </div> </template>

只有页面还不行，由于我们是纯前端的项目，没有后台的接口。所以需要手动添加模拟数据，在script 标签中添加以下内容

export default { data() { return { isUpdate: false,//默认弹框隐藏 list:[],// 初始化总数据【刷新重置】 resList:[],// 搜索结果数据[临时数据] dataList:[],// 列表展示数据 total:0, // 以下为搜索字段 sname:'', snickname:'', saddr:'', sage:'', } }, methods:{ getList(){ var obj= null; for (var i = 0; i<100;i++) { obj = new Object(); obj.id = (i+1); obj.name = 'tom'+(i+1); obj.nickname = '昵称'+(i+1); obj.sex = '性别'+(i+1); obj.age = (i+1); obj.birth = '2019-'+(i+1); obj.addr = '地址'+(i+1); // 由于没有真实数据，需要通过标识进行伪删除，如果通过下标删除 会打乱数组结构，从而删除会出现问题。（有接口的情况下不会出现问题）。 obj.isDel = 0; this.list.push(obj); this.resList.push(obj); } // 初始化 展示前十条信息 for(var i=0;i<10;i++){ this.dataList[i] = this.resList[i]; } this.total = Math.ceil(this.resList.length/10); } }, mounted:function(){ this.getList(); } }

到此处，整个合的table已经完成，页面展示如下

三、父子组件引用

接下来我们来实现父组件 UserList.vue 中引用子组件 UserEdit.vue。

新建子组件 UserEdit.vue 放置在 views 目录下，由于后面要讲到父子组件的传值，所以就直接写入用户的属性内容如下

<template> <el-form ref='form' > <el-form-item label='编号'> <label slot="label">编&nbsp;&nbsp;&nbsp;号</label> <el-input v-model='user.id' readonly style="width: 60%;"/> </el-form-item> <el-form-item label='用户名'> <el-input v-model='user.name' readonly style="width: 60%;"/> </el-form-item> <!-- 此处不可直接在label属性值中加入 空格符（需借助 label 标签），否则会把 空格符 显示出来 --> <el-form-item label="昵称"> <label slot="label">昵&nbsp;&nbsp;&nbsp;称</label> <el-input v-model='user.nickname' readonly style="width: 60%;"/> </el-form-item> <el-form-item label='性别'> <label slot="label">性&nbsp;&nbsp;&nbsp;别</label> <el-input v-model='user.sex' readonly style="width: 60%;"/> </el-form-item> <el-form-item label='年龄'> <label slot="label">年&nbsp;&nbsp;&nbsp;龄</label> <el-input v-model='user.age' readonly style="width: 60%;"/> </el-form-item> <el-form-item label='地址'> <label slot="label">地&nbsp;&nbsp;&nbsp;址</label> <el-input v-model='user.addr' readonly style="width: 60%;"/> </el-form-item> <el-form-item label='生日'> <label slot="label">生&nbsp;&nbsp;&nbsp;日</label> <el-input v-model='user.birth' readonly style="width: 60%;"/> </el-form-item> <!-- <el-form-item> <el-button type='primary' @click='addUser'>添加</el-button> <el-button>取消</el-button> </el-form-item> --> </el-form> </template>

在父组件 UserList.vue 中script标签下引入子组件 UserEdit.vue

import UserEdit from './UserEdit.vue'; // 并在 export default 下添加 该组件 components: { UserEdit },

在methods 中添加编辑的方法

handleUpdate(index,row){ // 此属性用于控制 dialog 弹框的显示与隐藏，为true则显示，在 dialog 标签中设置 this.isUpdate=true; }

点击编辑显示如下，则说明父组件引用子组件成功

四、父子组件传值

父子组件的传值是比较重要的因为在我们平时是使用非常频繁的。

1、父组件向子组件传值

需要在全局变量中定义一个user 用于传递到子组件

data() { return { isUpdate: false, isShow:false, list:[],// 初始化总数据【刷新重置】 resList:[],// 搜索结果数据[临时数据] dataList:[],// 列表展示数据 total:0, sname:'', snickname:'', saddr:'', sage:'', user:null } },

修改 handleUpdate 方法把指定的对象数据传递到子组件

handleUpdate(index,row){ // 调用时，显示弹框组件 this.isUpdate=true; // 进行对象深拷贝，防止在子组件修改数据时父组件的数据也跟着修改 var obj = this.dCopy(row); // 把 深拷贝返回的对象赋给 刚才定义的全局变量 user 用于传递给子组件 this.user = obj; }

子组件用 props 接收，js代码如下

export default{ // 用于接收父组件传过来的值【可为 字符串、对象、数组等】 // 此 user 对应 标签中 v-model中的user props:["user"], data(){ return{} } }

显示结果如下

2、子组件向父组件传值

当我们修改用户信息之后会提交信息到后台，此时就会用到子向父传值

在父组件中子组件标签 UserEdit 中修改如下

<!-- @toparent="getChild" 此函数用于接收子组件传递过来的值 --> <UserEdit :user="user" @toparent="getChild"></UserEdit>

在 methods 中添加 getChild 方法

getChild(cuser){ this.user = cuser; for(var i=0;i<this.list.length;i++){ var obj = this.list[i]; if(this.user.id==obj.id){ this.list[i] = this.dCopy(this.user); this.resList[i] = this.dCopy(this.user); } } for(var i=0;i<this.dataList.length;i++){ if(this.dataList[i].id==this.user.id){ this.dataList[i]=this.dCopy(this.user); } } // 设置 false 用于关闭弹框 this.isUpdate=false; }