说明:使用Vue+Element UI做的小练习,其中依赖都是使用npm进行安装的。需要先安装node.js和cnpm。
一.全局安装cnpm
安装vue-cli
二.使用 vue-cli 搭建项目
- 使用vue-cli创建项目:
注:项目的名字不能是驼峰的形式
- 使用VScode打开项目
- 项目目录
- 运行
三.主要知识点
安装Element UI
- 安装依赖
- 在main.js中添加
OK,在 .vue 组件中就可以使用了。
Quill 富文本编辑器
- 安装依赖
- 在main.js中引入
- 在 .vue 文件中使用编辑器
模板部分:
设置一些配置项:
主要数据:
主要方法,具体可根据情况写相应的处理逻辑:
MarkDown编辑器
- 安装依赖
- 引入
- 在 .vue 文件中使用
模板部分:
设置编辑器的配置选项:
主要方法:
sChart图表
- 安装依赖
- 引入
- 使用方法
在模板中,使用<schart>标签,通过type属性指定是 饼状图(bar)、折线图(line)、饼状图(pie)、环形图(ring)
图表的配置选项:
表格数据项的批量删除
主要方法:
Excel的导入导出
注:需安装三个依赖包和两个js文件
- 安装依赖
相当于安装了两个依赖包
*
*
- 在src目录下建立文件夹excel,用来存放所需js文件Blob.js和Export2Excel.js(具体文件存放位置可根据个人偏好设置,注意更改相应的src路径即可)
注意Export2Excel.js文件中的路径(根据自己的文件所在位置设置)
- 导入Excel
- 导出Excel
cropperjs在Vue中的使用--图片裁剪
- 安装依赖
- 引入
- 在 .vue 文件中使用
- 主要方法:
Vue中使用 阿里巴巴矢量图标库
- 找到阿里巴巴适量图标库官网
- 在搜索框中搜索自己需要的图标,点击“添加入库”
- 点击右上角的“购物车”
- 选择“添加至项目”
- 可以加入已有的项目中,也可新建项目
选好后,点击“确定"
- 可以设置“Font class”,然后点击“下载至本地”
- 将下载的iconfont.css和iconfont.ttf放到项目assets文件夹下的iconfont文件夹下。
- 修改iconfont.css文件中的路径
- 在 main.js 中引入
- 在 .vue 文件中使用
全屏 和 退出全屏
注:
当在 全屏模式 下,不能监听 “ESC”按键,但当用户点击“ESC”时也可以退出,可以通过以下方法监听点击“ESC”键,实现状态的改变。
Vue中使用Svg图片
svg:可缩放矢量图形,可以被无限缩放而没有损失。
- 使用 svg-sprote-loader 对svg文件进行处理
- 在“src/components”目录下创建文件“svgIcon.vue”
- svgIcon.vue
- 在src目录下创建 icons 文件夹,在icons文件夹下创建svg目录,用于存放 .svg 文件,在icons文件夹下创建index.js作为入口文件。
- index.js
- 在 main.js 文件中引入
- 在 src 目录下创建文件 vue.config.js ,设置配置
- 在 .vue 文件中使用
四 .总结一下
遇到的问题和解决方法
1.默认@指向“/src”。
2.当在style标签中使用 scoped 属性时,它的css只作用于当前组件中的元素。
3.热重载:
默认情况下是启动的。启动热重载后,当你修改 .vue 文件时,该组件的所有实例将在 不刷新页面 的情况下被替换。
4.使用v-for遍历时需要加上唯一的key
vue组件默认是复用的,为组件加上唯一的key可以标识组件的唯一性,key的作用是为了高效的更新虚拟DOM。当当前渲染的DOM结构发生变化时,则能单独的响应该元素而不触发所有元素的渲染。
5.遍历数组实现图片的显示
当你的数据是这样的:
我们可能会想到这样使用实现图片的显示:
但是,这样并不能显示图片。
注:不能写成“<img src=’{{item.url}}’/>”,双花括号{{...}}只能用于普通文本值的绑定,不能用在属性的绑定中。
“<img src=’../assets/carousel/React.png’/>”这样的方式显示在.vue文件中是没有问题的,但是页面总不能写死,还是要通过遍历的方式动态绑定,当通过遍历的方式动态绑定属性时,若是普通的属性是没有问题的,如下(ok的):
但是当绑定像<img>的src属性时,这样写行不通。
正确方法:
方法一:图片的路径使用require()进行引入
当Vue-loader编译单文件组件中的模板时,它会将所有遇到的资源URL转换为webpack模块请求。在vue中请求模块的方式是使用require()引入。
数据:
方法二:使用import引入图片路径
先引入:
数据:
在属性中进行绑定值:
6.关于Element UI导航的样式设置
在导航标签中设置Element UI自带的属性设置background-color、text-color、active-text-color
写相应的css文件:
7.深度作用选择器
当希望 scoped 属性作用的样式中选择器作用的更深,可以使用 >>> 操作符。
有些预处理器(如Sass等)无法正确解析“>>>”,此时可以使用 “/deep/” 操作符,它是“>>>” 的别名,使用效果相同。
8.全局设置css
:root是一个伪类,表示文档根元素,非IE及ie8及以上浏览器都支持,在:root中声明相当于全局属性,都可以使用var()来引用
项目 npm run build 下,将dist目录放到服务器上,配置端口。