iView

2019-4-10 10:56:20 星期三 学习iview时需要搭建一套node环境, 这里记录下来 1. 下载安装 nodejs //自带了 npm包管理器 2. 设置npm的全局配置: 全局包默认安装路径, 全局缓存路径 3. npm全局安装 vue-cli 3 // 可以创建默认的项目目录和文件, 比如包目录node_modules, 插件目录plugins, 源代码目录src, 以及package.json等省的手动创建了 4. npm全局安装 vue cli server //他也属于vue-cli, 是用来创建服务器的, 可以通过在本地浏览器访问localhost:8080来执行本地的js/HTML代码 5. 通过vue-cli 创建项目的通用目录(最好是在windows自带的cmd命令窗口中执行命令): vue create helloworld //vue-cli的命令是vue, 这个命令会在当前文件夹中创建一个文件夹helloworld并创建出一些子文件夹和文件, 创建之前会有一些交互, 让你选择配置项, 使用默认的配置就好了 6. npm install iview --save //进入上一步创建好的 helloworld 文件夹, 并执行这个命令, 把iveiw安装到本地的node_modules中 7. vue add vue-cli-plugin

1.需求：iview的table组件提供了自定义列模板的方式，使用slot-scop，解构出我们需要的数据项，极大方便了我们的开发，现在我们用vue3.x的v-slot来升级这种自定义列模板的写法。 2.子组件,slot上命名每一项的数据的name，并定义属性传入对应的数据项 < template > < ul > < li v - for = "item in data" > < slot : name = "item.slot" : row = "item" > < / slot > < / li > < / ul > < / template > < script > import { ref } from 'vue' export default { props : { data : { type : Array , default : ( ) => [ ] } } , } < / script > 3.父组件，根据v-slot:xxx来获取xxx项的插槽并解构对应属性获取该项数据 < template > < div > < test4 : data = "data1" > < template v - slot : name1 = "{row}" > < span > { { row . name } } < / span > < / template > < /

如何在Idea上创建一个vue项目： 打开Idea，新建项目，选择Static Web，然后选择Static Web并创建。在创建完web项目后，需要安装vue脚手架工具。 首先安装npm的淘宝镜像，打开Idea的Terminal，输入 npm i -g cnpm --registry=https://registry.npm.taobao.org 等待下载完成后，继续输入 npm i -g vue-cli 来完成vue脚手架的安装，同时可以使用vue -V来测试脚手架是否安装成功。 脚手架安装成功后，输入 vue init webpack iviewstudy(iviewstudy为包名) 创建完包后，输入 cd iviewstudy 来进入刚刚创建好了包的路径下， 输入 npm install 来导入vue所需要的jar包 输入npm run dev 就可以运行项目了 默认端口一般是8080，即在浏览器中输入 http://localhost:8080/ 即可以访问页面了。 同时，再用Idea创建一个SpringBoot项目，来当作vue项目的后台，并且来实现一个简单的登录注册界面。 首先，我们在vue项目中导入iview，输入指令 npm install iview --save 就能将iview组件自动导入项目中，同时，在main.js中配置，就可以使用了。

Vue+iView通过a标签 绑定事件 导出文件 使用a标签绑定事件: <a @click.prevent="downloadItem(downUrl)" :href="downUrl" >下载模板</a> 定义下载方法会使用到axios: import Axios from ' axios ' methods: { downloadItem (url) { Axios. get (url, { responseType: ' blob ' }) .then(({ data }) => { // 为了简单起见这里blob的mime类型 固定写死了 let blob = new Blob([data], { type: ' application/vnd.ms-excel ' }) let link = document.createElement( ' a ' ) link.href = window.URL.createObjectURL(blob) link.download = url.split( ' / ' ).pop() link.click() . catch (error => { console.error(error) }) }) } } Vue+iView通过a标签 属性 导出文件 a标签绑定属性 <a href= " url " download=

最近做项目用到vue+iview Switch 开关，遇到两个问题 问题1：直接引用开关组件 组件在页面中显示不出来 如： <Switch v-model="switch1" @on-change="change" /> 解决： < i-switch v-model= "switch1" @ on-change= "change" /> 这样就可以了 问题2：从后台获取数据回显的时候报错 如： Value should be trueValue or falseValue 解决： <template> <i- switch v-model="data.switchShow" size="large" true -value="true" false -value="false"> <span slot="open">开启</span> <span slot="close">禁用</span> </i-switch> </template> <script> export default { data() { return { data: { switchShow: false , }, } }, mounted() { axs.get('').then(res => { this.data= { //重新赋值switchShow属性 因为请求之后 switchShow属性会被清空，

内容简介 # e3 D, S7 ]8 k; g+ d. T2 M& X Vue作为前端框架的佼佼者，已经受到广大开发者的青睐，因为Vue的简单易用，使得更多后端开发者，或者非开发人员都能上手一二。本课程通过对100多位开发者调查反馈，用心整理了课程大纲，确保每一节课都会在清晰讲解主要主干知识的同时，穿插Vue基础和ES6/7/8等知识，同时还会介绍一些本人在多个项目开发中总结的经验。 ) m$ {* p1 B. l- G7 p; E' F$ Z 本课程面对人群： ?* m; V' ` Q0 e2 R5 P. m1 } 对Vue最基础的知识有一定了解的开发者 对ES6+语法不了解但是想学习一些的开发者 有计算机使用基础的非开发人员 : r2 e# M- L6 B! |3 C- [ 想要开发Vue完整项目的人员 6 v; P/ j6 t6 Z 8 l7 W/ _4 n' e" C! ~. b 课程大纲： , v2 H# u% W& U' j1 z0 [! c 1. Vue技术栈开发实战-使用vue-cli3创建项目 使用Vue UI创建、管理项目 0 W8 u* A0 g% { 项目结构目录整理 初始文件添加 ( `, p2 G; u7 j7 f 基本配置详解 使用代理解决跨域 $ Y1 O$ n/ H" h W0 s 2. Vue技术栈开发实战-路由基础篇 ) ~% [ l: e;

Layui 分为单页版和iframe版 单页版 　　　　通过将单页代码输出到div，不如要完整的html代码。 　　　　刷新页面后，依然能够记录上一次的页面。 　　　　此种方式不易于调试前端代码。 Iframe版 通过iframe的方式将加载另一个页面。需要完整的html代码，包括js代码。 属性页面后，不能够记录上一次的页面。 此方式需要耗费更多的网络宽带。 国内用户最多，简单易用。能够掌控。开发效率较低。 　　Bug较多。 iView 基于Vue的框架，能够实现数据的双向绑定。 需要掌握Vue相关的知识，使用难度较高，可能无法掌控。 界面美观度最高 ElementUI 基于Vue的框架，能够实现数据的双向绑定。 来源： oschina 链接： https://my.oschina.net/u/4261110/blog/4758422

1 iview的router控制需求 最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来. 每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同,故以下先列出本文所述项目对标签页的控制要求(如有不同需求,本文当也可提供一些思路): 对于同名(name)的路由标签页,不能打开多个.譬如说从商品列表中打开商品展示标签页,如果已经有在打开的商品编辑页面,则替换之.新打开的,未保存,已保存的标签页,同时只能存在一个(即不同params相同name的route只能有一个); 替换掉一个新的页面时,通过切换的方式切换回来(先切到其他标签页再切换回来),仍是原来页面的内容(即实际记录的params在替换后应变化).类似的情况,还应包含单据从未保存到已保存,以及保存并新增功能; 2 基于vue的router控制 iview是基于vue的框架,故vue本身自带的router控制方法是必然可行的. vue变更路由的常用方式参考以下(该方法在官方api中有更详细的介绍): //变更当前路由(有历史记录,建议使用此方式) this.$router.push({ name:'routerName', params:routerParam }) //变更当前路由(无历史记录) this.$router.replace({ name:

1.Google >1.Google >https://github.com/google >2.Google Samples https://github.com/googlesamples >3.Google Codelabs >https://github.com/googlecodelabs >4.GoogleChrome >https://github.com/GoogleChrome >5.Google Creative Lab >https://github.com/googlecreativelab >6.Google Internationalization 人人皆可使用的Google开源字体 >https://github.com/googlei18n >7.tensorflow https://github.com/tensorflow 2.Facebook >1.Facebook >https://github.com/facebook >2.Facebook Samples >https://github.com/fbsamples >3.facebookresearch >https://github.com/facebookresearch >4.Facebook Incubator >https://github.com

react的jsx语法很好用，但是vue的jsx语法就不是很好用了。 vue的jsx语法不能实现双向数据绑定以及各种比如v-for指令，只能自己用代码用另一种方式实现出来。着实是费了一些功夫，现在来说一下我使用vue的jsx语法过程中用到的东西吧，当个记录，也方便以后查看。 因为我的项目用得是iview的框架，所以这里用的是iview的table组件+vue2.0+jsx 传送门 ：iview: https://www.iviewui.com/components/table 　　　　vue的jsx语法： https://cn.vuejs.org/v2/guide/render-function.html#ad 以下是代码： 　　 1 // 以下是table 2 <div style="width:100%;"> 3 <i-table border :columns="columns2" :data="data2" style="width:100%;"></i-table> 4 </div> 5 6 7 // 以下是data数据 8 9 export default { 10 data(){ 11 return { 12 columns2: [ 13 { 14 title: "编号" , 15 key: "num" , 16 align: "center" , 17 width: