一周上手vue项目开发

vue项目问题总结；
1建议在做vue项目中 先学习一下vue基本语法，生命周期 网址：https://cn.vuejs.org/v2/guide/

2就是element ui组件，基本常用的组件和样式都在这里直接复用就可以
网址直达：https://element.eleme.cn/#/zh-CN/component/select

我们用vue手脚架搭建的项目基本目录如下：方便大家查看
|-build //打包配置,存放打包的文件
|-config //项目环境配置 开发 生产 测试等
|-node_modules //项目包
|-public //一般用于存放静态文件，打包时会被直接复制到输出目录(./dist)
|-src //项目源代码
| |-asserts //用于存放静态资源，打包时会经过 webpack 处理
| |-caches //缓存
| |-components //组件 存放 Vue 组件，一般是该项目公用的无状态组件
| |-entries //入口
| |-pages //页面视图
| |-routes //路由 配置路由的地方
| |-services //服务 存放服务文件，一般是网络请求等
| |-utils //辅助工具 工具类库
| |-theme.styl //主题样式文件
|-static //存放静态资源的地方 一般是通用样式
|-test //测试
|-.babelrc //vue-cli脚手架工具根目录的babelrc配置文件
|-package.json //包管理代码
|-.eslintrc.js //代码检测配置
|-.postcssrc.js ///添加浏览器私缀
|-index.html //静态文件，打包时会被直接复制到输出目录中
|-.gitignore //Git忽略文件
|-.eslintignore //代码检测忽略文件

使用 npm install 或者 cnpm命令进行安装
使用 npm run Dev 运行即可

​ 我使用的是idea的vue插件

使用element ui 技巧：找到对应想要的组件，直接看相关的事件和属性

因为我们要做的是交互， 经常用到组件的（点击）事件或者其他时间，

获取其中的属性 进行后端请求。

现在来看一个基本的需求，从前端发一个请求，后端获取数据，在通过遍历展示到页面。

本次项目使用的组件是axios发送请求

这是对axios进行了一下简单封装。然后一个vue有一个文件对应的js,

js封装后端的请求；

最后就是在vue页面引入js 对应的方法

以listNumCardList为例

在methods中添加对应方法

listNumCardList({//参数
  'startDate': this.form.startDate,
  'endDate': this.form.endDate,
  "orderType":this.lxvalue,
  "orderStatus":this.orderStatus,
  "eparchyCode":this.eparchyCode,
  "pagination_iPage":this.pagination_iPage,
  "orderValue":this.orderValue
}).then(res=>{、/返回结果
  console.info(res);
  if (res != null && res.orderList != null) {
    this.orderdata = res.orderList.dataList;// <script>标签中的值下图所示
    this.loading=false;
  }
}).catch(error=>{//错误信息
  console.info(error)
})

这里有个思路；

就是后端返回的值 通过赋值给data()中的属性值，完了最后在页面遍历。反之亦然，请求后端也是通过data()中的属性值进行传参。

页面 使用 v-for语句进行遍历

最后出现的列表

需求2： 列表中的某一条数据，进行编辑或者其他操作；中途需要参数传递；

val 接收参数就可以 val就是staff.staffId了

需求三是：从一个页面跳转到另一个页面，需要传递参数:

这里先看一个组件：router

首先在main.js中引入组件

import router from './router'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

然后写一个配置js

引入对应组件

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'
Vue.use(Router)

/**
 * Note: 路由配置项
 *
 * hidden: true                   // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
 * alwaysShow: true               // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
 *                                // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
 *                                // 若你想不管路由下面的 children 声明的个数都显示你的根路由
 *                                // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
 * redirect: noRedirect           // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
 * name:'router-name'             // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
 * meta : {
 *   roles: ['admin','editor']    // 设置该路由进入的权限，支持多个权限叠加
 *   title: 'title'               // 设置该路由在侧边栏和面包屑中展示的名字
 *   icon: 'svg-name'             // 设置该路由的图标，对应路径src/icons/svg
 *   breadcrumb: false            // 如果设置为false，则不会在breadcrumb面包屑中显示
 *  }
 *
 *  ===================================================================================================
 * {
 *   path: '/sys',
 *   component: Layout,
 *  redirect: '/sys/user', // 点击该一级目录时，默认跳转的子路由
 *   alwaysShow: true, // will always show the root menu
 *  hidden:false, // 设置为 true 时不会出现在左树菜单
 *   name: 'Sys', // 设置该路由的名称
 *   meta: {
 *     title: '系统管理',
 *    icon: 'lock'
 *   },
 *  children: [
 *    {
 *      path: 'user',
 *      component: () => import('@/views/system/role/index'),
 *      name: 'User',
 *      meta: {
 *        title: '用户管理'
 *      }
 *    },
 *    {
 *      path: 'role',
 *      component: () => import('@/views/system/role/index'),
 *      name: 'Role',
 *      meta: {
 *        title: '角色管理'
 *      }
 *    }
 *  ]
 * }
 * ===================================================================================================
 */

这里有两种路由

动态路由的相关配置主要是负责页面菜单来回切换；

我只有一个单页面跳转

所以配置了静态路由

export const constantRoutes = [
 
  {
    path: '/changeDettilNew',
    component: (resolve) => require(['@/views/dc/numcard/changeDettilNew'], resolve),
    hidden: true
  }
 
].concat(dynamicRouter)

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({y: 0}),
  routes: constantRoutes
});

@/views/dc/numcard/changeDettilNew就是vue文件路径了

然后设置跳转点击事件 @click=“goMethod(order.orderId)”

goMethod(val){
  this.$router.push({ path: '/changeDettilNew',query: {orderId: val} })
}，

如上图所示已经成功了

以上技巧已经可以满足一个基本页面开发了

但是vue全家桶还有很多要学习的东西。欢迎有感想的同学留言评论