搜索到
8
篇与
的结果
-
element-ui中eslint配置模板参考 element-ui 框架源代码中，关于vue3项目的eslint配置包含了 vue，ts，jsx，的eslint格式检验，还有各种不同文件的overrides，做个记录方便以后参考，index.jsconst { defineConfig } = require('eslint-define-config') module.exports = defineConfig({ env: { es6: true, browser: true, node: true, }, plugins: ['@typescript-eslint', 'prettier', 'unicorn'], extends: [ 'eslint:recommended', 'plugin:import/recommended', 'plugin:eslint-comments/recommended', 'plugin:jsonc/recommended-with-jsonc', 'plugin:markdown/recommended', 'plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier', ], settings: { 'import/resolver': { node: { extensions: ['.js', '.mjs', '.ts', '.d.ts', '.tsx'] }, }, }, overrides: [ { files: ['*.json', '*.json5', '*.jsonc'], parser: 'jsonc-eslint-parser', }, { files: ['*.ts', '*.vue'], rules: { 'no-undef': 'off', }, }, { files: ['**/__tests__/**'], rules: { 'no-console': 'off', 'vue/one-component-per-file': 'off', }, }, { files: ['package.json'], parser: 'jsonc-eslint-parser', rules: { 'jsonc/sort-keys': [ 'error', { pathPattern: '^$', order: [ 'name', 'version', 'private', 'packageManager', 'description', 'type', 'keywords', 'homepage', 'bugs', 'license', 'author', 'contributors', 'funding', 'files', 'main', 'module', 'exports', 'unpkg', 'jsdelivr', 'browser', 'bin', 'man', 'directories', 'repository', 'publishConfig', 'scripts', 'peerDependencies', 'peerDependenciesMeta', 'optionalDependencies', 'dependencies', 'devDependencies', 'engines', 'config', 'overrides', 'pnpm', 'husky', 'lint-staged', 'eslintConfig', ], }, { pathPattern: '^(?:dev|peer|optional|bundled)?[Dd]ependencies$', order: { type: 'asc' }, }, ], }, }, { files: ['*.d.ts'], rules: { 'import/no-duplicates': 'off', }, }, { files: ['*.js'], rules: { '@typescript-eslint/no-var-requires': 'off', }, }, { files: ['*.vue'], parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', extraFileExtensions: ['.vue'], ecmaVersion: 'latest', ecmaFeatures: { jsx: true, }, }, rules: { 'no-undef': 'off', }, }, { files: ['**/*.md/*.js', '**/*.md/*.ts'], rules: { 'no-console': 'off', 'import/no-unresolved': 'off', '@typescript-eslint/no-unused-vars': 'off', }, }, ], rules: { // js/ts camelcase: ['error', { properties: 'never' }], 'no-console': ['warn', { allow: ['error'] }], 'no-debugger': 'warn', 'no-constant-condition': ['error', { checkLoops: false }], 'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'], 'no-return-await': 'error', 'no-var': 'error', 'no-empty': ['error', { allowEmptyCatch: true }], 'prefer-const': [ 'warn', { destructuring: 'all', ignoreReadBeforeAssign: true }, ], 'prefer-arrow-callback': [ 'error', { allowNamedFunctions: false, allowUnboundThis: true }, ], 'object-shorthand': [ 'error', 'always', { ignoreConstructors: false, avoidQuotes: true }, ], 'prefer-rest-params': 'error', 'prefer-spread': 'error', 'prefer-template': 'error', 'no-redeclare': 'off', '@typescript-eslint/no-redeclare': 'error', // best-practice 'array-callback-return': 'error', 'block-scoped-var': 'error', 'no-alert': 'warn', 'no-case-declarations': 'error', 'no-multi-str': 'error', 'no-with': 'error', 'no-void': 'error', 'sort-imports': [ 'warn', { ignoreCase: false, ignoreDeclarationSort: true, ignoreMemberSort: false, memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'], allowSeparatedGroups: false, }, ], // stylistic-issues 'prefer-exponentiation-operator': 'error', // ts '@typescript-eslint/explicit-module-boundary-types': 'off', '@typescript-eslint/no-explicit-any': 'off', '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', '@typescript-eslint/consistent-type-imports': [ 'error', { disallowTypeAnnotations: false }, ], '@typescript-eslint/ban-ts-comment': ['off', { 'ts-ignore': false }], // vue 'vue/no-v-html': 'off', 'vue/require-default-prop': 'off', 'vue/require-explicit-emits': 'off', 'vue/multi-word-component-names': 'off', 'vue/prefer-import-from-vue': 'off', 'vue/no-v-text-v-html-on-component': 'off', 'vue/html-self-closing': [ 'error', { html: { void: 'always', normal: 'always', component: 'always', }, svg: 'always', math: 'always', }, ], // prettier 'prettier/prettier': 'error', // import 'import/first': 'error', 'import/no-duplicates': 'error', 'import/order': [ 'error', { groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], pathGroups: [ { pattern: 'vue', group: 'external', position: 'before', }, { pattern: '@vue/**', group: 'external', position: 'before', }, { pattern: '@element-plus/**', group: 'internal', }, ], pathGroupsExcludedImportTypes: ['type'], }, ], 'import/no-unresolved': 'off', 'import/namespace': 'off', 'import/default': 'off', 'import/no-named-as-default': 'off', 'import/no-named-as-default-member': 'off', 'import/named': 'off', 'no-restricted-imports': [ 'error', { paths: [ { name: 'lodash', message: 'Use lodash-unified instead.' }, { name: 'lodash-es', message: 'Use lodash-unified instead.' }, ], patterns: [ { group: ['lodash/*', 'lodash-es/*'], message: 'Use lodash-unified instead.', }, ], }, ], // eslint-plugin-eslint-comments 'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }], // unicorn 'unicorn/custom-error-definition': 'error', 'unicorn/error-message': 'error', 'unicorn/escape-case': 'error', 'unicorn/import-index': 'error', 'unicorn/new-for-builtins': 'error', 'unicorn/no-array-method-this-argument': 'error', 'unicorn/no-array-push-push': 'error', 'unicorn/no-console-spaces': 'error', 'unicorn/no-for-loop': 'error', 'unicorn/no-hex-escape': 'error', 'unicorn/no-instanceof-array': 'error', 'unicorn/no-invalid-remove-event-listener': 'error', 'unicorn/no-new-array': 'error', 'unicorn/no-new-buffer': 'error', 'unicorn/no-unsafe-regex': 'off', 'unicorn/number-literal-case': 'error', 'unicorn/prefer-array-find': 'error', 'unicorn/prefer-array-flat-map': 'error', 'unicorn/prefer-array-index-of': 'error', 'unicorn/prefer-array-some': 'error', 'unicorn/prefer-date-now': 'error', 'unicorn/prefer-dom-node-dataset': 'error', 'unicorn/prefer-includes': 'error', 'unicorn/prefer-keyboard-event-key': 'error', 'unicorn/prefer-math-trunc': 'error', 'unicorn/prefer-modern-dom-apis': 'error', 'unicorn/prefer-negative-index': 'error', 'unicorn/prefer-number-properties': 'error', 'unicorn/prefer-optional-catch-binding': 'error', 'unicorn/prefer-prototype-methods': 'error', 'unicorn/prefer-query-selector': 'error', 'unicorn/prefer-reflect-apply': 'error', 'unicorn/prefer-string-slice': 'error', 'unicorn/prefer-string-starts-ends-with': 'error', 'unicorn/prefer-string-trim-start-end': 'error', 'unicorn/prefer-type-error': 'error', 'unicorn/throw-new-error': 'error', }, }) package.json{ "name": "@element-plus/eslint-config", "version": "0.0.1", "description": "ESLint Config", "license": "MIT", "files": [ "index.js" ], "main": "index.js", "publishConfig": { "access": "public" }, "peerDependencies": { "eslint": "^8.0.0" }, "dependencies": { "@typescript-eslint/eslint-plugin": "^5.30.0", "@typescript-eslint/parser": "^5.30.0", "eslint-config-prettier": "^8.5.0", "eslint-define-config": "^1.5.1", "eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsonc": "^2.3.0", "eslint-plugin-markdown": "^3.0.0", "eslint-plugin-prettier": "^4.1.0", "eslint-plugin-unicorn": "^43.0.2", "eslint-plugin-vue": "^9.1.1", "jsonc-eslint-parser": "^2.1.0", "prettier": "^2.7.1", "typescript": "^4.7.4", "yaml-eslint-parser": "^1.0.1" }, "devDependencies": { "eslint": "^8.18.0" } } -
vscode编写vue3项目代码提示缓慢问题处理 在使用vscode + volar开发vue3项目时，开发了一段时间，尤其是在新建了很多次vue文件后，编辑器就会出现代码自动补全或者错误提示缓慢，或者根本不能提示的问题，每次遇到这种情况都要通过重启vscode或者 reload window 来解决，非常的头疼。试了很多方式来解决，最后网上找到通过开启Volar Takeover *模式解决。Vue3官网 https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode 有关于 Volar Takeover 的详细介绍，为了优化性能，Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。要开启 Takeover 模式，你需要执行以下步骤来在你的项目的工作空间中禁用 VSCode 的内置 TS 语言服务：在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。输入 built，然后选择“Extensions：Show Built-in Extensions”。在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。点击“TypeScript and JavaScript Language Features”右下角的小齿轮设置图标，然后在下拉菜单中选择“Disable (Workspace)”。重新加载工作空间（重启vscode或者reload window）。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。
-
前端常用框架或库收集整理 前端常用框架或库收集整理React 常用组件react-use 常用的自定义 hooks 合集react-hook-form 最常用 react 表单处理hooks，用来做表单验证处理，提交等react-cool-img react图片懒加载react-cool-inview react元素块内容进入页面可视区域监听组件，类似于react-dnd 拖放效果组件react-sortable-tree 可以排序的树形组件@uiw/react-md-editor md 编辑器，可以自定义控件，如上传等shepherdjs 网站新手引导框架 也有react 组件 https://shepherdjs.dev/docs/react-files-uploading react 文件上传组件 https://www.npmjs.com/package/react-files-uploadingreact-images-uploading react 图片上传组件 https://www.npmjs.com/package/react-images-uploadingreact-intersection-observer react 图片和dom懒加载 https://github.com/thebuilder/react-intersection-observerreact-share 网站分享快速生成按钮和图表的组件NodeJscheerio 用jquery语法来解读提取html文本内容的爬虫内容分析库ora 命令行loading工具consola 命令行人机交互输入工具，可以异步执行多个输入，单选，多选，确认 操作commander 命令行工具，注册命令，指定命令的说明，可选参数，以及要执行的代码，一般配合上面的 consola 来实现命令行工具sharp 图片合成和处理工具，可以修改图片大小，滤镜，网图片上加文字，图片等UI 组件库ElementUI vue 框架使用最多的组件库Framework7 支持所有主流前端框架，三端都有组件库JS 绘图jsplumb 拓扑图绘制框架fabricjs canvas库，支持画图，绑定操作，事件等，让canvas变简单ECharts 不用多说，无人不知，无人不晓Cytoscape.js 主要用来画连线图，如关系图谱JS 动画Tween.js 一个简单的 JavaScript 补间（比如css3的ease-in）动画库Snap.svg 绘制svg的类库，超级简单方便的apiAnime.js 类似jquery和jquery-ui的动画库，直接操作domwaypoint.js jquery监听dom进入浏览器可是窗口区域插件parallax.js 视距差效果JS工具函数html-to-text 将html内容转换成纯文本去除富文本内容字符串格式处理工具，支持多层级处理驼峰，下划线，大驼峰等的转换 https://www.npmjs.com/package/humps音视频相关webm-muxer/mp4-muxer 音视频录制并生成视频工具库 https://www.npmjs.com/package/webm-muxerjs-audio-recorder https://www.npmjs.com/package/js-audio-recorder 音频录制，支持录制时的声波显示等，非常强大代码编辑器Ace editor Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。CodeMirror 是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。monaco editor monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中社区整理常用库10个按钮特效 http://www.adobeedu.com/%E8%BF%9910%E4%B8%AA%E6%8C%89%E9%92%AE%EF%BC%8C%E6%8A%8A-css-hover-%E7%9A%84%E5%88%9B%E6%84%8F%E5%8F%91%E6%8C%A5%E5%88%B0%E6%9E%81%E8%87%B4%E4%BA%86/HTML5+CSS3 最酷的 loading 效果收集 https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html
-
vue基于viewer实现的图片查看器 vue2-viewervue2-viewer 是一款强大的图像浏览插件，可以实现图像的放大预览，旋转，任意比例放大和缩小等功能vue2-viewer 是viewer.js vue的实现，效果以及样式完全移植自viewer.js关于viewer.js可以参考链接[http://fengyuanchen.github.io/viewer/]插件中所有的效果均大量地使用了css3的新特性替换了viewer.js中的js动画，所以vue2-viewer主要实用场景是现代浏览器中。使用文档安装npm install --save vue2-viewer在main.js中引入并使用插件import ImageViewer from 'vue2-viewer'; Vue.use(ImageViewer);插件会在全局注册vue-viewer组件使用组件vue2-viewer 提供两种使用模式，单图片模式和多图列表模式。单图片模式props参数说明类型必须thumb要显示的小图的链接stringtruefull点击放大后的大图链接stringtrue示例：<vue-viewer style="display: inline-block" :thumb="image" :full="image"> </vue-viewer> <script> export default { name: 'app', data () { return { msg: 'vue2-viewer-test', image: 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG?w=580&h=347&s=908FF35A050626E2428C001E030090D6', } } } </script>效果展示：多图片模式props参数说明类型必须thumb要显示的小图列表的链接数组arraytruefull点击放大后的大图的链接数组arraytruelist-ul-class默认小图的列表外层ul的自定义class 用于自定义列表的样式，包括ul内部的slot的内容的样式都可以通过这个方式自定义stringfalseScoped Slotname说明~列表中的每一个元素中除了默认图以外的内容示例：<vue-viewer multiple :thumb="imageList" list-ul-class="image-list" :full="imageList"> <!--在列表中加入右上角删除按钮--> <template slot-scope="target"> <span class="icon-remove" @click.stop="onRemove(target.index)" style="">×</span> </template> </vue-viewer> <script> export default { name: 'app', data () { return { msg: 'vue2-viewer-test', imageList: [ 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg', 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6', 'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058' ] } }, methods: { onRemove(index) { alert(index); } } } </script> <style> .image-list{ margin: 0; padding: 0 } .image-list li { display: inline-block; margin: 0 10px; list-style: none; position: relative; } .image-list li img { box-shadow: 0 0 5px #333; } .icon-remove{ width: 20px; height:20px; text-align: center; line-height: 20px; background:#f33; position:absolute; top:-10px; right:-10px; border-radius: 10px; cursor: pointer; color:#fff; } a { color: #42b983; } </style>效果展示：
-
基于es6 proxy的单向数据绑定 看了一些关于vue3.0的更新内容，主要是围绕性能方面的提升和对MVVM数据绑定的完全重写。3.0中不再使用 Object.defineProperty 而是原生ES6 Proxy，关于ProxyProxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。在vue2.x中，使用Object.defineProperty实现数据劫持。一般的做法如下：let obj = {}; // 遍历data的所有属性 let dataKeys = Object.keys(data); dataKeys.map(key => { // 为data的所有属性添加set方法 Object.defineProperty(data, key, { set: function(newVal) { // 修改v-text属性对应的data中的key的值 document.querySelector(el + " *[v-text=" + key + "]").textContent = newVal; } }); }); // 将处理好的data赋值给要返回的对象 obj.data = data; return obj;上面的代码中可以看出，主要有两个问题：要为对象的每一个属性添加数据劫持，一般结合Object.keys()遍历对象属性实现。如果对象的层级结构不是简单的层级结构，只能一直遍历处理。不能监听数组的变化，数组的push, pop, shift, unshift, splice, sort, reverse等方法不会触发set的侦听。我们在使用vue修改数组时能触发view的更新是因为vue内部做了变相的处理。针对Vue 3.0的这个更新，做了一个简单的单向数据绑定的例子，说明3.0中使用Proxy实现数据绑定的基本原理（只是简单的单向绑定，数据的更改会反映到视图上）<div id="app"> <h1 v-text="title"></h1> <p>当前时间：<span v-text="time"></span></p> </div>function ViewBind({ el = 'body', data = {}} = {}) { // 要返回的对象实例 let obj = {}; const proxy = new Proxy(data, { get(obj, property) { return obj[property] }, set(obj, property, newValue) { obj[property] = newValue; const bindEle = document.querySelector(el + " *[v-text=" + property + "]"); if (bindEle) { bindEle.textContent = newValue; } } }); obj.data = proxy; return obj; }; const app = new ViewBind({ el: '#app', data: { count: 0, title: '这是标题', time: +new Date() } }); setInterval(() => { // 定时修改页面上<span v-text="time">元素中的内容 app.data.time = +new Date(); app.data.count = app.data.count + 1; app.data.title = '这是标题' + app.data.count; }, 1000)上面的代码中通过ViewBind实例化了一个对象，定时修改对象的属性，视图上通过v-text绑定的内容就会自动更新，效果如下
-
在VUE中怎么全局引入sass文件 在使用vue开发SPA应用中，我们经常需要在一个或多个scss文件中定义公共变量或者mixin亦或是很多通用的function，而且不希望在每个vue文件中都去@import，针对这种情况，可以使用下面的方法添加全局引入的sass文件，使这些样式或者方法可以被打包到全局的样式文件中。添加依赖npm install sass-resources-loader --save-dev修改build/utils.js'use strict' const path = require('path') const config = require('../config') const ExtractTextPlugin = require('extract-text-webpack-plugin') exports.assetsPath = function (_path) { const assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } exports.cssLoaders = function (options) { options = options || {} const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // Extract CSS when that option is specified // (which is the case during production build) if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // 引入sass全局变量，mixin，function等 function resolveResouce(name) { return path.resolve(__dirname, '../src/assets/style/' + name); } function generateSassResourceLoader() { var loaders = [ cssLoader, // 'postcss-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { // it need a absolute path resources: [ resolveResouce('reset.scss'), resolveResouce('var.scss'), resolveResouce('common.scss') ] } } ]; if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader' }) } else { return ['vue-style-loader'].concat(loaders) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html // return部分加入上面的loader return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateSassResourceLoader(), scss: generateSassResourceLoader(), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } } // Generate loaders for standalone style files (outside of .vue) exports.styleLoaders = function (options) { const output = [] const loaders = exports.cssLoaders(options) for (const extension in loaders) { const loader = loaders[extension] output.push({ test: new RegExp('\\.' + extension + '$'), use: loader }) } return output }
-
在vue项目中使用jquery和jquery插件 在vue项目中使用jquery和jquery插件Vue之所以受欢迎，主要就在于它的轻量和灵活，我们可以用vue做SPA，也可以用它做多页应用，一个页面对应一个VUE实例。而且因为他的轻量，低侵入性，所以我们可以很方便地和其他框架或者库搭配使用，那么我们怎么在基于vue的SPA应用中搭配jquery使用呢？PS:一般我们是不建议直接用jquery操作DOM节点的，因为这有悖于VUE的核心思想（模型视图双向绑定），但是，某些情况下我们为了实现当前VUE社区没实现的，以前jquery实现了的炫酷的效果的时候，也不妨采用jquery和jquery插件来实现引入jquery引入jquery很简单，只需一下两步：使用npm安装jquery依赖，或者把jquery下载到我们的本地修改项目目录build下的webpack.base.conf.js配置文件// 在开头引入webpack，后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.join(__dirname, '../node_modules')], alias: { 'src': path.resolve(__dirname, '../src'), '@': resolve('src'), // webpack 使用 jQuery，如果是自行下载的 // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'), // 如果使用NPM安装的jQuery 'jquery': 'jquery' } }, // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], // 其他代码... }上面的代码中，alias配置项等同于seajs中的alias配置，给一个路径起一个别名。比如说配置中的 @ 符号就指向到了我们的src目录，以后在requre或者import时就可以通过这个别名指向我们需要访问的目录或者文件了。plugins配置项简单理解就是把下面的资源作为插件的形式导入到项目中，导入后我们就可以通过$或者jQuery访问到jquery库了。引入jquery 插件通过上面的配置，jquery就整合到我们的项目中了，不管在什么位置都可以直接使用了，如果要使用jquery的插件，只需要在我们要使用的组件中加载对应的插件资源就可以了（当然，要加载的资源必须是es6或者AMD，CMD模块），比如，我们经常使用的toastr提示插件// 使用toastr <script> import 'assets/libs/toastr/toastr.min.css'; import toastr from 'assets/libs/toastr/toastr.min'; export default { data() { return {} }, mounted() { toastr.success('Hello World'); } } </script>
-
修改iview的标签为i-的形式而不是驼峰的形式 前言iview组件库中，通过Vue.use注册了iview到项目中后，在组件内调用iview组件时默认都是通过CamelCase的方式引用iview组件的，HTML本身是大小写不敏感的，vue官网也推荐在template中使用kebab-case标签，iview官网也提供了修改的方法，具体操作如下：首先通过 npm 安装 iview-loadernpm install iview-loader --save-dev配置 webpack（build目录下的webpack.base.conf.js文件），改写平时 vue-loader 的配置，形如：module: { rules: [ { test: /\.vue$/, use: [ { loader: 'vue-loader', options: { } }, { loader: 'iview-loader', options: { prefix: false } } ] } ] }参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 、完整的标签名如下：{ 'i-affix': 'Affix', 'i-alert': 'Alert', 'i-auto-complete': 'AutoComplete', 'i-avatar': 'Avatar', 'i-back-top': 'BackTop', 'i-badge': 'Badge', 'i-breadcrumb': 'Breadcrumb', 'i-breadcrumb-item': 'BreadcrumbItem', 'i-button': 'Button', 'i-button-group': 'ButtonGroup', 'i-card': 'Card', 'i-carousel': 'Carousel', 'i-carousel-item': 'CarouselItem', 'i-cascader': 'Cascader', 'i-checkbox': 'Checkbox', 'i-checkbox-group': 'CheckboxGroup', 'i-circle': 'i-circle', 'i-col': 'Col', 'i-collapse': 'Collapse', 'i-color-picker': 'ColorPicker', 'i-date-picker': 'DatePicker', 'i-dropdown': 'Dropdown', 'i-dropdown-item': 'DropdownItem', 'i-dropdown-menu': 'DropdownMenu', 'i-form': 'Form', 'i-form-item': 'FormItem', 'i-icon': 'Icon', 'i-input': 'Input', 'i-input-number': 'InputNumber', 'i-menu': 'Menu', 'i-menu-group': 'MenuGroup', 'i-menu-item': 'MenuItem', 'i-submenu': 'Submenu', 'i-modal': 'Modal', 'i-option': 'Option', 'i-option-group': 'OptionGroup', 'i-page': 'Page', 'i-panel': 'Panel', 'i-poptip': 'Poptip', 'i-progress': 'Progress', 'i-radio': 'Radio', 'i-radio-group': 'RadioGroup', 'i-rate': 'Rate', 'i-row': 'Row', 'i-select': 'Select', 'i-slider': 'Slider', 'i-spin': 'Spin', 'i-step': 'Step', 'i-steps': 'Steps', 'i-switch': 'i-switch', 'i-table': 'Table', 'i-tabs': 'Tabs', 'i-tab-pane': 'TabPane', 'i-tag': 'Tag', 'i-timeline': 'Timeline', 'i-timeline-item': 'TimelineItem', 'i-time-picker': 'TimePicker', 'i-tooltip': 'Tooltip', 'i-transfer': 'Transfer', 'i-tree': 'Tree', 'i-upload': 'Upload' }
