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

由于目前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;
}
  • 此时,子传父就完成了,子组件修改信息,提交之后父组件接收到信息后进行修改。

本示例就讲到这里,其他 关于 搜索、分页、查看、删除等功能相对比较简单,此项目就不做详述!!!

 

 

 

 

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值