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 中添加 路由标签
- 在项目中添加Element-UI依赖
# 在项目根目录下，运行以下命令，即可添加 Element-UI依赖
npm i element-ui -S
# 添加 axios 用于向后台发送请求，不可缺少
npm i -save axios- 在新创建的 UserList.vue 文件中添加表格相关内容
搜索
查看
编辑
删除
- 只有页面还不行，由于我们是纯前端的项目，没有后台的接口。所以需要手动添加模拟数据，在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 目录下，由于后面要讲到父子组件的传值，所以就直接写入用户的属性内容如下
- 在父组件 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 中修改如下
- 在 methods 中添加 getChild 方法
getChild(cuser){
this.user = cuser;
for(var i=0;i- 此时，子传父就完成了，子组件修改信息，提交之后父组件接收到信息后进行修改。
本示例就讲到这里，其他 关于 搜索、分页、查看、删除等功能相对比较简单，此项目就不做详述！！！