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 相关文章推荐
jquery 延迟执行实例介绍
Aug 20 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
JS将unicode码转中文方法
May 08 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
js实现百度淘宝搜索功能
Feb 17 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JavaScript常用事件介绍
2019/01/21 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
python接入支付宝的实例操作
2020/07/20 Python
Python random模块的使用示例
2020/10/10 Python
如何基于Python按行合并两个txt
2020/11/03 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
美国零售商店:Blue&Cream
2017/04/07 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
廉政教育心得体会
2014/01/01 职场文书
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
大学生毕业个人总结
2015/02/15 职场文书
学术会议通知
2015/04/15 职场文书