由于目前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_ENVproduction (打包环境) * process.env.NODE_ENVdevelopment (开发环境) * baseUrl: process.env.NODE_ENVproduction?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 idnav router-link to/Home/router-link | router-link to/aboutAbout/router-link| router-link to/userListUserList/router-link /div在项目中添加Element-UI依赖# 在项目根目录下运行以下命令即可添加 Element-UI依赖 npm i element-ui -S # 添加 axios 用于向后台发送请求不可缺少 npm i -save axios在新创建的 UserList.vue 文件中添加表格相关内容template div !-- 以下为搜索框 -- div classdemo-input-size el-input placeholder请输入用户名 v-modelsname /el-input el-input placeholder请输入昵称 v-modelsnickname /el-input el-input placeholder请输入年龄 v-modelsage /el-input el-input placeholder请输入地址 v-modelsaddr /el-input /div el-button typeprimary clicksearch() iconel-icon-search搜索/el-button !-- 以下为表头和数据 -- el-table :datadataList stripe border height570 stylewidth: 80%; margin-top: 25px; !-- 多选框 -- el-table-column typeselection width55 /el-table-column el-table-column propid label序号 width55 /el-table-column el-table-column propname label用户名 aligncenter width180 /el-table-column el-table-column propnickname aligncenter label昵称 /el-table-column el-table-column propsex aligncenter label性别 /el-table-column el-table-column propage label年龄 /el-table-column el-table-column propbirth label生日 /el-table-column el-table-column propaddr label地址 /el-table-column el-table-column label操作 width360 template slot-scopescope el-button sizemini clickhandleSelect(scope.$index,scope.row)查看/el-button el-dialog title查看用户 :visible.syncisShow center :append-to-bodytrue :lock-scrollfalse width40% UserInfo :useruser/UserInfo /el-dialog el-button sizemini clickhandleUpdate(scope.$index,scope.row)编辑/el-button el-dialog title编辑用户 :visible.syncisUpdate center :append-to-bodytrue :lock-scrollfalse width40% UserEdit :useruser /UserEdit /el-dialog el-button sizemini typedanger clickhandleDelete(scope.$index,scope.row)删除/el-button /template /el-table-column /el-table !-- 以下为分页 -- el-pagination prev-clickprevPage next-clicknextPage current-changecurrentPage background layoutprev, pager, next :page-counttotal /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; i100;i) { obj new Object(); obj.id (i1); obj.name tom(i1); obj.nickname 昵称(i1); obj.sex 性别(i1); obj.age (i1); obj.birth 2019-(i1); obj.addr 地址(i1); // 由于没有真实数据需要通过标识进行伪删除如果通过下标删除 会打乱数组结构从而删除会出现问题。有接口的情况下不会出现问题。 obj.isDel 0; this.list.push(obj); this.resList.push(obj); } // 初始化 展示前十条信息 for(var i0;i10;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 refform el-form-item label编号 label slotlabel编nbsp;nbsp;nbsp;号/label el-input v-modeluser.id readonly stylewidth: 60%;/ /el-form-item el-form-item label用户名 el-input v-modeluser.name readonly stylewidth: 60%;/ /el-form-item !-- 此处不可直接在label属性值中加入 空格符需借助 label 标签否则会把 空格符 显示出来 -- el-form-item label昵称 label slotlabel昵nbsp;nbsp;nbsp;称/label el-input v-modeluser.nickname readonly stylewidth: 60%;/ /el-form-item el-form-item label性别 label slotlabel性nbsp;nbsp;nbsp;别/label el-input v-modeluser.sex readonly stylewidth: 60%;/ /el-form-item el-form-item label年龄 label slotlabel年nbsp;nbsp;nbsp;龄/label el-input v-modeluser.age readonly stylewidth: 60%;/ /el-form-item el-form-item label地址 label slotlabel地nbsp;nbsp;nbsp;址/label el-input v-modeluser.addr readonly stylewidth: 60%;/ /el-form-item el-form-item label生日 label slotlabel生nbsp;nbsp;nbsp;日/label el-input v-modeluser.birth readonly stylewidth: 60%;/ /el-form-item !-- el-form-item el-button typeprimary clickaddUser添加/el-button el-button取消/el-button /el-form-item -- /el-form /template在父组件 UserList.vue 中script标签下引入子组件 UserEdit.vueimport UserEdit from ./UserEdit.vue; // 并在 export default 下添加 该组件 components: { UserEdit },在methods 中添加 编辑的方法handleUpdate(index,row){ // 此属性用于控制 dialog 弹框的显示与隐藏为true则显示在 dialog 标签中设置 this.isUpdatetrue; }点击编辑显示如下则说明父组件引用子组件成功四、父子组件传值父子组件的传值是比较重要的因为在我们平时是使用非常频繁的。1、父组件向子组件传值需要在全局变量中定义一个user 用于传递到子组件data() { return { isUpdate: false, isShow:false, list:[],// 初始化总数据【刷新重置】 resList:[],// 搜索结果数据[临时数据] dataList:[],// 列表展示数据 total:0, sname:, snickname:, saddr:, sage:, user:null } },修改 handleUpdate 方法把指定的对象数据传递到子组件handleUpdate(index,row){ // 调用时显示弹框组件 this.isUpdatetrue; // 进行对象深拷贝防止在子组件修改数据时父组件的数据也跟着修改 var obj this.dCopy(row); // 把 深拷贝返回的对象赋给 刚才定义的全局变量 user 用于传递给子组件 this.user obj; }子组件用 props 接收js代码如下export default{ // 用于接收父组件传过来的值【可为 字符串、对象、数组等】 // 此 user 对应 标签中 v-model中的user props:[user], data(){ return{} } }显示结果如下2、子组件向父组件传值当我们修改用户信息之后会提交信息到后台此时就会用到子向父传值在父组件中 子组件标签 UserEdit 中修改如下!-- toparentgetChild 此函数用于接收子组件传递过来的值 -- UserEdit :useruser toparentgetChild/UserEdit在 methods 中添加 getChild 方法getChild(cuser){ this.user cuser; for(var i0;ithis.list.length;i){ var obj this.list[i]; if(this.user.idobj.id){ this.list[i] this.dCopy(this.user); this.resList[i] this.dCopy(this.user); } } for(var i0;ithis.dataList.length;i){ if(this.dataList[i].idthis.user.id){ this.dataList[i]this.dCopy(this.user); } } // 设置 false 用于关闭弹框 this.isUpdatefalse; }此时子传父就完成了子组件修改信息提交之后父组件接收到信息后进行修改。本示例就讲到这里其他 关于 搜索、分页、查看、删除等功能相对比较简单此项目就不做详述
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_ENVproduction (打包环境) * process.env.NODE_ENVdevelopment (开发环境) * baseUrl: process.env.NODE_ENVproduction?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 idnav router-link to/Home/router-link | router-link to/aboutAbout/router-link| router-link to/userListUserList/router-link /div在项目中添加Element-UI依赖# 在项目根目录下运行以下命令即可添加 Element-UI依赖 npm i element-ui -S # 添加 axios 用于向后台发送请求不可缺少 npm i -save axios在新创建的 UserList.vue 文件中添加表格相关内容template div !-- 以下为搜索框 -- div classdemo-input-size el-input placeholder请输入用户名 v-modelsname /el-input el-input placeholder请输入昵称 v-modelsnickname /el-input el-input placeholder请输入年龄 v-modelsage /el-input el-input placeholder请输入地址 v-modelsaddr /el-input /div el-button typeprimary clicksearch() iconel-icon-search搜索/el-button !-- 以下为表头和数据 -- el-table :datadataList stripe border height570 stylewidth: 80%; margin-top: 25px; !-- 多选框 -- el-table-column typeselection width55 /el-table-column el-table-column propid label序号 width55 /el-table-column el-table-column propname label用户名 aligncenter width180 /el-table-column el-table-column propnickname aligncenter label昵称 /el-table-column el-table-column propsex aligncenter label性别 /el-table-column el-table-column propage label年龄 /el-table-column el-table-column propbirth label生日 /el-table-column el-table-column propaddr label地址 /el-table-column el-table-column label操作 width360 template slot-scopescope el-button sizemini clickhandleSelect(scope.$index,scope.row)查看/el-button el-dialog title查看用户 :visible.syncisShow center :append-to-bodytrue :lock-scrollfalse width40% UserInfo :useruser/UserInfo /el-dialog el-button sizemini clickhandleUpdate(scope.$index,scope.row)编辑/el-button el-dialog title编辑用户 :visible.syncisUpdate center :append-to-bodytrue :lock-scrollfalse width40% UserEdit :useruser /UserEdit /el-dialog el-button sizemini typedanger clickhandleDelete(scope.$index,scope.row)删除/el-button /template /el-table-column /el-table !-- 以下为分页 -- el-pagination prev-clickprevPage next-clicknextPage current-changecurrentPage background layoutprev, pager, next :page-counttotal /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; i100;i) { obj new Object(); obj.id (i1); obj.name tom(i1); obj.nickname 昵称(i1); obj.sex 性别(i1); obj.age (i1); obj.birth 2019-(i1); obj.addr 地址(i1); // 由于没有真实数据需要通过标识进行伪删除如果通过下标删除 会打乱数组结构从而删除会出现问题。有接口的情况下不会出现问题。 obj.isDel 0; this.list.push(obj); this.resList.push(obj); } // 初始化 展示前十条信息 for(var i0;i10;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 refform el-form-item label编号 label slotlabel编nbsp;nbsp;nbsp;号/label el-input v-modeluser.id readonly stylewidth: 60%;/ /el-form-item el-form-item label用户名 el-input v-modeluser.name readonly stylewidth: 60%;/ /el-form-item !-- 此处不可直接在label属性值中加入 空格符需借助 label 标签否则会把 空格符 显示出来 -- el-form-item label昵称 label slotlabel昵nbsp;nbsp;nbsp;称/label el-input v-modeluser.nickname readonly stylewidth: 60%;/ /el-form-item el-form-item label性别 label slotlabel性nbsp;nbsp;nbsp;别/label el-input v-modeluser.sex readonly stylewidth: 60%;/ /el-form-item el-form-item label年龄 label slotlabel年nbsp;nbsp;nbsp;龄/label el-input v-modeluser.age readonly stylewidth: 60%;/ /el-form-item el-form-item label地址 label slotlabel地nbsp;nbsp;nbsp;址/label el-input v-modeluser.addr readonly stylewidth: 60%;/ /el-form-item el-form-item label生日 label slotlabel生nbsp;nbsp;nbsp;日/label el-input v-modeluser.birth readonly stylewidth: 60%;/ /el-form-item !-- el-form-item el-button typeprimary clickaddUser添加/el-button el-button取消/el-button /el-form-item -- /el-form /template在父组件 UserList.vue 中script标签下引入子组件 UserEdit.vueimport UserEdit from ./UserEdit.vue; // 并在 export default 下添加 该组件 components: { UserEdit },在methods 中添加 编辑的方法handleUpdate(index,row){ // 此属性用于控制 dialog 弹框的显示与隐藏为true则显示在 dialog 标签中设置 this.isUpdatetrue; }点击编辑显示如下则说明父组件引用子组件成功四、父子组件传值父子组件的传值是比较重要的因为在我们平时是使用非常频繁的。1、父组件向子组件传值需要在全局变量中定义一个user 用于传递到子组件data() { return { isUpdate: false, isShow:false, list:[],// 初始化总数据【刷新重置】 resList:[],// 搜索结果数据[临时数据] dataList:[],// 列表展示数据 total:0, sname:, snickname:, saddr:, sage:, user:null } },修改 handleUpdate 方法把指定的对象数据传递到子组件handleUpdate(index,row){ // 调用时显示弹框组件 this.isUpdatetrue; // 进行对象深拷贝防止在子组件修改数据时父组件的数据也跟着修改 var obj this.dCopy(row); // 把 深拷贝返回的对象赋给 刚才定义的全局变量 user 用于传递给子组件 this.user obj; }子组件用 props 接收js代码如下export default{ // 用于接收父组件传过来的值【可为 字符串、对象、数组等】 // 此 user 对应 标签中 v-model中的user props:[user], data(){ return{} } }显示结果如下2、子组件向父组件传值当我们修改用户信息之后会提交信息到后台此时就会用到子向父传值在父组件中 子组件标签 UserEdit 中修改如下!-- toparentgetChild 此函数用于接收子组件传递过来的值 -- UserEdit :useruser toparentgetChild/UserEdit在 methods 中添加 getChild 方法getChild(cuser){ this.user cuser; for(var i0;ithis.list.length;i){ var obj this.list[i]; if(this.user.idobj.id){ this.list[i] this.dCopy(this.user); this.resList[i] this.dCopy(this.user); } } for(var i0;ithis.dataList.length;i){ if(this.dataList[i].idthis.user.id){ this.dataList[i]this.dCopy(this.user); } } // 设置 false 用于关闭弹框 this.isUpdatefalse; }此时子传父就完成了子组件修改信息提交之后父组件接收到信息后进行修改。本示例就讲到这里其他 关于 搜索、分页、查看、删除等功能相对比较简单此项目就不做详述
