2021-10-10

最新推荐文章于 2024-05-14 15:21:38 发布

urnotbbq

最新推荐文章于 2024-05-14 15:21:38 发布

阅读量2.2k

点赞数 12

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45984446/article/details/120690500

版权

2021SC@SDUSC

智能研究中心快递柜学习笔记2

VUE介绍

vue是一个友好的、多用途并且高性能的渐进式JavaScript框架，可维护和可测试性较强。vue是响应式的，数据变更时，vue会帮助变更网页中用到该数据的地方。vue还有一个命令行工具，可以简单快速的初始化一个工程。Vue 被设计为可以自底向上逐层应用，核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

NPM安装方法

用Vue.js构建大型应用的时候使用NPM安装方法，NPM能很好的和Webpack或者Browserify模块打包器配合使用。需要：node.js环境、vue-cli 脚手架构建工具、cnpm npm的淘宝镜像。

项目结构

build	项目构建(webpack)相关代码，最终发布的代码存放位置
config	配置路径、端口号等一些信息
node_modules	npm 加载的项目依赖模块
src	开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件： assets:一些图片 components:目录里放的是一个组件文件 App.vue：项目入口文件，可以将组件写这里而不使用components目录 main.js ：项目的核心文件
static	静态资源目录，如图片、字体等
test	初始测试目录
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件，可以添加一些 meta 信息或统计代码
package.json	项目配置文件
README.md	项目的说明文档

主要内容在src目录中。

安装项目需要的依赖包资源，在项目目录中，运行命令 npm run dev，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

Ant Design of Vue介绍

是ant design的vue实现，开发和服务于企业级后台产品。

dist文件，dist = distribution意为发布，前端发布项目时生成的一个文件夹，在某些框架中，因为开发和发布是的内容或者代码形式是不一样的，这时候就需要一个存放最终发布版本的代码，这就是dist文件夹的用处。dist是编译后或者压缩后的代码，终发布版本的代码。

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。

public属于用于存放公共js文件夹，在index.html中用script标签引入。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

必需的 type 属性规定脚本的 MIME 类型。

JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

例：在 HTML 页面中插入一段 JavaScript：

<script type="text/javascript">

document.write("Hello World!")

</script>

src放置源码

cdn公共静态资源下的babel-polyfill解决低版本浏览器不兼容问题

babel-polyfill用正确的姿势安装之后，引用方式有三种：

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports = {

　　entry: ["babel-polyfill", "./app/js"]

};

第三种方法适用于使用webpack构建，加入到webpack配置文件(webpack.config.js)entry项中重新执行构建命令，在低版本的浏览器中就可以正常打开页面了。

tinymce是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。

TinyMCE的优势：

开源可商用，基于LGPL2.1

插件丰富，自带插件基本涵盖日常所需功能

接口丰富，可扩展性强，有能力可以无限拓展功能

界面好看，符合现代审美

提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）

对标准支持优秀（自v5开始）

多语言支持，官网可下载几十种语言。

下图为开启全部功能的截图

功能很多，跟word很类似，基本的功能需求都能满足，除此之外还可以变换彩色图标

vue项目集成TinyMCE编辑器

安装tinymce

安装tinymce-vue

npm install tinymce -S

npm install @tinymce/tinymce-vue -S

这两个组件安装完之后，在public目录下新建文件夹tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的tinymce文件夹内

配置中文语言，官网中文语言包 zh_CN.js

在刚才创建的tinymce文件夹内再新建langs文件夹，用来存放中文语言包

如图的content.min.css和skin.min.css是创建富文本的时候引入的css，主要是一些类选择器的定义

.mce-content-body .mce-resize-helper {
  background: #555;
  background: rgba(0, 0, 0, 0.75);
  border: 1px;
  border-radius: 3px;
  color: white;
  display: none;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 14px;
  margin: 5px 10px;
  padding: 5px;
  position: absolute;
  white-space: nowrap;
  z-index: 10001;
}

节选自 content.min.css

.tox *:not(svg) {
  background: transparent;
  border: 0;
  box-sizing: content-box;
  color: #222f3e;
  cursor: auto;
  direction: ltr;
  float: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  height: auto;
  line-height: normal;
  margin: 0;
  max-width: none;
  outline: 0;
  padding: 0;
  position: static;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  vertical-align: initial;
  white-space: normal;
  width: auto;
}

.tox .tox-spinner > div {
  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
  background-color: rgba(34, 47, 62, 0.6);
  border-radius: 100%;
  height: 8px;
  width: 8px;
}
.tox .tox-spinner > div:nth-child(1) {
  animation-delay: -0.32s;
}

节选自skin.min.css

可以看到组合器的应用，类选择器的“>”表示应用到类的子代

其他的还有：

空格后代

> 子代

+ 相邻兄弟

~ 通用兄弟