vue pages 多入口项目 + chainWebpack 全局引用缩写说明


Posted in Javascript onSeptember 21, 2020

项目结构

├── node_modules # 项目依赖包目录
├── build # 项目 webpack 功能目录
├── config # 项目配置项文件夹
├── src # 前端资源目录
│ ├── images # 图片目录
│ ├── components # 公共组件目录
│ ├── pages # 页面目录
│ │ ├── page1 # page1 目录
│ │ │ ├── components # page1 组件目录
│ │ │ ├── router # page1 路由目录
│ │ │ ├── views # page1 页面目录
│ │ │ ├── page1.html # page1 html 模板
│ │ │ ├── page1.vue # page1 vue 配置文件
│ │ │ └── page1.js # page1 入口文件
│ │ ├── page2 # page2 目录
│ │ └── index # index 目录
│ ├── common # 公共方法目录
│ └── store # 状态管理 store 目录
├── .gitignore # git 忽略文件
├── .env # 全局环境配置文件
├── .env.dev # 开发环境配置文件
├── .postcssrc.js # postcss 配置文件
├── babel.config.js # babel 配置文件
├── package.json # 包管理文件
├── vue.config.js # CLI 配置文件
└── yarn.lock # yarn 依赖信息文件

vue config.js 配置

pages: {
  page1: {
   entry: "src/pages/page1/main.js",
   template: "public/index.html",
   filename: "index.html",
   title: "page1",
   chunks: ["chunk-vendors", "chunk-common", "page1"]
  },
  page2: {
   entry: "src/pages/page1/main.js",
   template: "public/index.html",
   filename: "page2.html",
   title: "page2",
   chunks: ["chunk-vendors", "chunk-common", "page2"]
  },
 },

需要默认打开某个项目时只需要 filename 设置为 index.html 即可,否则需要 通过详细 url 进入对应项目

*如果有其他技术方案欢迎留言指正*

chainWebpack 全局引用缩写

chainWebpack: config => {
  config.resolve.alias
   .set("@", resolve("src")) // key,value自行定义,比如.set('@@', resolve('src/components'))
   .set("_c", resolve("src/components"))
   .set("_js", resolve("src/assets/js"));
 },

补充知识:vue-quill-editor的使用及个性化定制

最近在用vue + element ui写一个小应用要用到富文本编辑器,以前做项目都一直都用ueditor,但是看了一下它与vue的兼容性并不好,又对比了几个后,选择了vue-quill-editor。

vue-quill-editor基于Quill、适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用,正是我想要的☻。这里只介绍基本的安装和部分简单的定制。我翻了很多别人写的东西对我的项目都无效,最后自己折腾出来在这记录备忘。

一、安装

1.安装模块

npm install vue-quill-editor ?save

2.vue组件

<template>
 <div class="edit_container">
 <quill-editor
  v-model="content"
  ref="myQuillEditor"
  :options="editorOption"
  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
  @change="onEditorChange($event)">
 </quill-editor>
 </div>
</template>
 
<script>
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 import { quillEditor } from 'vue-quill-editor';
 
 export default {
 name: "addJournal",
 components: {
  quillEditor
 },
 data() {
  return {
  content: ``,
  editorOption: {},
  };
 },
 methods: {
  onEditorReady(editor) {}, // 准备编辑器
  onEditorBlur(){}, // 失去焦点事件
  onEditorFocus(){}, // 获得焦点事件
  onEditorChange(){}, // 内容改变事件
 },
 computed: {
  editor() {
  return this.$refs.myQuillEditor.quill;
  },
 },
 }
</script>

至此,vue-quill-editor就安装完成了,效果图如下:

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

二、定(zhe)制(teng)

这里只简单介绍两类操作: 样式修改和自定义工具栏。

1.样式修改

a) 修改vue-quill-editor编辑框高度

这个其实很简单了,只要在vue组件的<style>标签里增加一个样式即可

.quill-editor{
 height: 400px;
}

在调整了编辑框的高度后,如果编辑内容的高度超过了编辑框的高度,编辑框会出现滚动条(不手动调整此高度话会一直往下扩展)。

b) 修改工具栏对齐方式

这里需要注意,使用webstorm创建的vue组件中,styte标签的默认会加上scoped属性, 也就是说,只对当前模块的元素有效,而工具栏是从外部引入的,因此下面的样式要写在无scoped属性的style标签里才会有效。

.ql-toolbar.ql-snow{
 text-align: left;
}

修改完后的样式如下

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

2.定制工具栏按钮

以字体大小调节为例,这是默认的调节按钮,我们想改成多个像素大小的下拉选框。

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

step1: 在vue组件中引入quill模块,修改whitelist, 并注册样式

import * as Quill from 'quill';
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];//false表示默认值
Quill.register(fontSizeStyle, true);

step2: 修改quill-editor的option属性值

editorOption: {
 modules: {
 toolbar: [["bold", "italic", "underline", "strike"], ["blockquote", "code-block"], [{header: 1}, {header: 2}], [{list: "ordered"}, {list: "bullet"}], [{script: "sub"}, {script: "super"}], [{indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}],
  [{size: fontSizeStyle.whitelist}], [{header: [1, 2, 3, 4, 5, 6, !1]}], [{color: []}, {background: []}], [{font: []}], [{align: []}], ["clean"], ["link", "image", "video"]],
 },
}

这个modules里面的值是参照vue-quill-editor模块里的vue-quill-editor.js里的modules值设置的,只需要将你要修改的工具栏按钮的值替换成step1里设置的whitelist值即可。

step3: 增加定制选项的css样式

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
 content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
 content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
 content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
 content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
 content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
 content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
 content: '36px';
}

此样式的选择器可以从quill.snow.css.js中找到,我们要做的只是修改它的data-value值。

修改后的工具栏:

vue pages 多入口项目 + chainWebpack 全局引用缩写说明

以上这篇vue pages 多入口项目 + chainWebpack 全局引用缩写说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JS简单实现表格排序功能示例
Dec 20 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 #Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 #Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 #Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 #Javascript
微信小程序实现翻牌抽奖动画
Sep 21 #Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 #Javascript
微信小程序实现转盘抽奖
Sep 21 #Javascript
You might like
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php中final关键字用法分析
2016/12/07 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
AngularJS中的模块详解
2015/01/29 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
超级实用的8个Python列表技巧
2020/08/24 Python
幼儿园优秀教师事迹
2014/02/13 职场文书
cf收人广告词大全
2014/03/14 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
体育活动总结
2015/02/04 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
小学班主任工作随笔
2015/08/15 职场文书