一周上手vue开发
2就是element ui组件，基本常用的组件和样式都在这里直接复用就可以 网址直达：https://element.eleme.cn/#/zh-CN/component/select
我们用vue手脚架搭建的项目基本目录如下：方便大家查看 |-build //打包配置,存放打包的文件 |-config //项目环境配置 开发 生产 测试等 |-node_modules //项目包 |-public //一般用于存放静态文件，打包时会被直接复制到输出目录(./dist) |-src //项目源代码 | |-asserts //用于存放静态资源，打包时会经过 webpack 处理
使用 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全家桶还有很多要学习的东西。欢迎有感想的同学留言评论
浙公网安备 33010602011771号