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的开发个代阴影的对话框效果代码
Jul 28 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jquery滚动特效集锦
Jun 03 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
在vue中使用setInterval的方法示例
Apr 16 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
用JS创建一个录屏功能
Nov 11 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+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
javascript 闭包
2011/09/15 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
Python栈类实例分析
2015/06/15 Python
python实现多线程的两种方式
2016/05/22 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
网上书店创业计划书
2014/01/12 职场文书
大学生活自我评价
2014/04/09 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
保护环境的宣传语
2015/07/13 职场文书
开工典礼致辞
2015/07/29 职场文书
会议室使用管理制度
2015/08/06 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis