后台管理系统

  说明：使用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目录放到服务器上，配置端口。