首页
更多应用
Search
1
修改iview的标签为i-的形式而不是驼峰的形式
2,791 阅读
2
PHP微信和企业微信签名
2,522 阅读
3
在VUE中怎么全局引入sass文件
2,223 阅读
4
vscode硬件占用较高解决方案
2,017 阅读
5
解决Macos下storm系列IDE卡顿的问题
1,975 阅读
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
登录
/
注册
Search
标签搜索
react
js
vue
vscode
nodejs
项目
代码
webpack
工具
nginx
小程序
css
fastmock
eslint
npm
http
vue-cli3
git
浏览器
const
fastmock技术社区
累计撰写
102
篇文章
累计收到
26
条评论
首页
栏目
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
页面
更多应用
搜索到
11
篇与
的结果
2024-10-28
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" } }
2024年10月28日
5 阅读
0 评论
0 点赞
2024-06-06
vue3 必要tsconfig配置
{ "compilerOptions": { // Most non-library projects don't need to emit declarations. // So we add this option by default to make the config more friendly to most users. "noEmit": true, // When type-checking with solution-style tsconfigs, though with `noEmit: true`, there won't // be any `.d.ts` files emitted, but tsc still writes a `.tsbuildinfo` file to the `outDir` // for each project. If we don't explicitly set the `outDir`, it will be in the same folder // as the `tsconfig.json` file, which would look messy. // Setting it to `./dist/` isn't ideal either, because it would pollute the `dist` folder. // So we set it to a hidden folder in `node_modules` to avoid polluting the project root. // FIXME: // This caused a regression: https://github.com/vuejs/tsconfig/issues/27 // Need to find a better solution. // "outDir": "./node_modules/.cache/vue-tsbuildinfo", // As long as you are using a build tool, we recommend you to author and ship in ES modules. // Even if you are targeting Node.js, because // - `CommonJS` is too outdated // - the ecosystem hasn't fully caught up with `Node16`/`NodeNext` // This recommendation includes environments like Vitest, Vite Config File, Vite SSR, etc. "module": "ESNext", // We expect users to use bundlers. // So here we enable some resolution features that are only available in bundlers. "moduleResolution": "bundler", "resolveJsonModule": true, // `allowImportingTsExtensions` can only be used when `noEmit` or `emitDeclarationOnly` is set. // But `noEmit` may cause problems with solution-style tsconfigs: // <https://github.com/microsoft/TypeScript/issues/49844> // And `emitDeclarationOnly` is not always wanted. // Considering it's not likely to be commonly used in Vue codebases, we don't enable it here. // Required in Vue projects,缺少这两个配置,import vue文件时会报错 因为vue文件本身没有正常导出对象 "jsx": "preserve", "jsxImportSource": "vue", // `"noImplicitThis": true` is part of `strict` // Added again here in case some users decide to disable `strict`. // This enables stricter inference for data properties on `this`. "noImplicitThis": true, "strict": true, // <https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#verbatimmodulesyntax> // Any imports or exports without a type modifier are left around. This is important for `<script setup>`. // Anything that uses the type modifier is dropped entirely. "verbatimModuleSyntax": true, // A few notes: // - Vue 3 supports ES2016+ // - For Vite, the actual compilation target is determined by the // `build.target` option in the Vite config. // So don't change the `target` field here. It has to be // at least `ES2020` for dynamic `import()`s and `import.meta` to work correctly. // - If you are not using Vite, feel free to overwrite the `target` field. "target": "ESNext", // For spec compilance. // `true` by default if the `target` is `ES2020` or higher. // Explicitly set it to `true` here in case some users want to overwrite the `target`. "useDefineForClassFields": true, // Recommended "esModuleInterop": true, "forceConsistentCasingInFileNames": true, // See <https://github.com/vuejs/vue-cli/pull/5688> "skipLibCheck": true, } }
2024年06月06日
71 阅读
0 评论
0 点赞
前端性能优化之webpack打包优化
前端工程化彻底盛行的今天,我们已经习惯使用打包工具来帮助我们打包代码到最终能在浏览器运行的js或者css代码,这样我们就可以在编写代码时放心地使用所有的高级语法,其中最让前端coder感到爽快的就是 import export,我们不再需要像以前一样在html里面放很多很多script。或者使用amd。cmd,requirejs工具来写模块引用的代码,这些方便,也让我们很容易忽略一个问题,就是打包的产物的大小,当一个项目足够大时,我们的js甚至可以达到几MB到几十MB,所以,今天就来总结下关于减小构建产物体积,来达到减少首屏加载时间的内容webpack 官方自带的优化策略 https://www.webpackjs.com/configuration/optimization/这里以react项目为例,列举需要优化的构建项一、使用代码拆分,让我们的页面代码构建到单独的js,首次访问页面的时候才加载这块jsmodule.exports = { optimization: { { usedExports: true, concatenateModules: false, chunkIds: 'deterministic', runtimeChunk: true, // 将运行时依赖单独打包-运行时依赖如我们使用的async await语法所需的降级兼容代码 设置为 'single' 则所有的runtime依赖打包到一个文件 // 使用代码拆分 参考文档 https://www.51cto.com/article/689344.html splitChunks: { chunks: 'async', // webpack 打包chunk分为 entry chunk 和async chunk两种,配置文件中的entry配置的主包是默认拆分的,多个入口,多个 main chunk。async chunk就是使用import('./xxx.js') 一步模块加载方法加载的模块。那么 chunks选项就是指定这两种chunk哪些需要分包的,`initial` 只分包主包, async 只分包异步加载的包。all 分包上面两种包,这里要注意的就是all有时候会理解成“所有”就会以为所有使用了import './xxx.js'引入的包都会被分包 minSize: 20, // 超过了这个大小的包才会被拆分 minRemainingSize: 0, minChunks: 1, // 被引用次数大于这个数的包才会被拆分,这里要注意的是,被引用是只命中entry chunk 和 async chunk 的引用者才算 maxAsyncRequests: 30, maxInitialRequests: 30, enforceSizeThreshold: 100, // 超过这个大小的包,不管有没有命中上面的配置,都分包 // 对指定规则的文件使用特定的分包策略 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 匹配文件路径 type:/\.json$/, // 匹配文件类型 idHint:'vendors',// 用于设置 Chunk ID,它还会被追加到最终产物文件名中,例如 idHint = 'vendors' 时,输出产物文件名形如 vendors-xxx-xxx.js minChunks: 1, minSize: 0, priority: 2 // 设置优先级,如果文件命中多个groups策略,优先使用这个配置数字较大的规则组 } } } } } }接下来,在react路由里,将组件引入代码 import Xxxx from '@src/routes/Xxxx' 修改为如下引用方式//该组件是动态加载的 千万注意,因为组件是动态加载的,那么。就有可能出现加载失败或者加载错误的情况,所以需要使用 Suspense 组件来包裹,组件还未加载,显示fallback中的内容,组件加载完成,显示组件,加载失败会throw一个error,防止页面崩溃 const Home = React.lazy(() => import('./Home')); function Layout() { return ( // 显示 <Spinner> 组件直至 Home 加载完成 <React.Suspense fallback={<Spinner />}> <div> <Home /> </div> </React.Suspense> ); }上面的分包策略的理解注释中的内容提到了分包的条件和规则,那么,为了尽可能减小我们的主包的大小,我们就要尽可能减少在我们的 entry 选项中指定的入口文件中对其他模块的引用,或者使用异步模块引用的方式,常见的几个优化项目为优化使用到的工具的引用,将必要的工具引用单独提到一个文件中,避免打包其他没用到的代码到主包有些应用初始化相关但是跟主应用无关的代码,使用异步模块加载,如下// app.ts (async () => { const {default: AppInit} = await import('./app-init'); aegis = AppInit.tam(); AppInit.dataInsight(); AppInit.chunkError(); })();如果在入口文件中有react或者vue路由使用的组件,使用react或vue提供的异步路由方法引入使用二、将三方库通过CDN引入而不打包到我们的代码包默认情况下,我们一般都会将我们所需要的依赖,例如react,moment,axios等三方包通过npm或yarn安装到本地,然后直接import进来使用,这种方式势必就会将这些第三方包打包到我们自己的js中,且因为这些库本身体积就较大,所以会导致我们打包出来的js非常大,而且,当我们使用了chunk切分后,各个chunk都会单独打包进去这些依赖内容。针对这种情况,webpack提供了 externals 选项来让我们可以从外部获取这些扩展依赖,首先,我们需要通过script标签的形式来引入我们需要使用的三方库,有两种方式,一种是手动在 html-webpack-plugin 的html模板文件或者content内容中加入script标签,第二种是使用html-webpack-tags-plugin插件,通过配置的方式往html内容中动态插入script标签,这里推荐后者,原因是方便写判断逻辑,而不是在html中通过ejs模板语法来写判断逻辑然后,配置externals选项告诉webpack当我们使用import语句导入模块时,实际使用的是是什么内容(一般三方库都会导出一个包含了所有他包含内容的全局变量)const assetsPath = 'https://static.xxx.com/js'; module.exports = { externals: isDev ? {} : { // 排除不打包 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter', 'react-router-dom': 'ReactRouterDOM', 'axios': 'axios', 'moment': 'moment', 'moment-timezone': 'moment', 'lodash': '_', }, plugins: [ ...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), new webpack.DefinePlugin(envKeys), // 开发环境不使用这种方式,因为会影响本地开发的热更新 new HtmlWebpackTagsPlugin({ tags: isDev ? [] : [ { type: 'js', path: '/react-16.11.0.production.min.js', attributes: { defer: 'defer' }, // defer: load完成后不立即执行,等带页面DOMLoaded事件执行前执行,等价于把script放到所有dom之后 publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-dom-16.11.0.production.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-router-5.2.1.min.js ', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-router-dom-5.2.1.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/axios-0.26.0.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/moment.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/lodash-4.17.21.min.js ', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/moment-timezone-with-data-10-year-range.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: true, }, ], }), new CopyWebpackPlugin({ patterns: [ { from: 'public', globOptions: { ignore: ['**/index.html'], }, to: 'dist', }, ], }), ].concat(!isDev ? [new BundleAnalyzerPlugin({analyzerPort: 8889, analyzerMode: 'static'})] : []), }
2023年12月14日
137 阅读
0 评论
0 点赞
2023-09-12
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 文件时自动启用。
2023年09月12日
459 阅读
0 评论
0 点赞
2022-11-30
前端常用框架或库收集整理
前端常用框架或库收集整理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
2022年11月30日
384 阅读
0 评论
0 点赞
2020-01-09
vue-cli构建的项目 CDN引入框架文件的问题
vue-cli2.x中用法1、 index.html中引入相关的js<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>2、 修改build/webpack.base.conf.js文件,通过externals选项加载外部扩展,引入依赖库,不需要webpack处理module.exports = { ... externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的,右侧是开发依赖库的作者定义的,是固定值,不同的库的这个值需要到相应的库的开发文档中获取,其实这个值最终就是绑定到window对象上的全局变量。 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } ... }通过上面的配置后使用就还是跟以前一样使用就行了,vue-cli3.x 使用方法1、同上面的步骤1.2、在vue.config.js configureWebpack选项中通过externals选项加载外部扩展,引入依赖库,不需要webpack处理// ... module.exports = { // ... configureWebpack: { // webpack配置,值位对象时会合并配置,为方法时会改写配置 // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ], externals: { 'vue': 'Vue', // 左侧vue是我们自己引入时候要用的,右侧是开发依赖库的主人定义的不能修改 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios', // 'element-ui': 'ELEMENT' } }, // ... };在使用的过程中遇到了一个问题,就是通过cdn引入压缩的vue文件,启动项目后,google浏览器vue开发插件无法工作,也是纠结了很久才找到是这个原因导致的。把上面的vue的cdn地址改成//cdn.bootcss.com/vue/2.5.2/vue.js就行了。那么问题就来了,我不可能在生产环境使用未被压缩的库文件吧?上面的问题就引出了另一个问题。”怎么在vue的html文件里根据不同的环境加载不同的文件?“稍微注意点我们就会发现在vue-cli生成的项目,index.html里面有这样一句代码<link rel="icon" href="<%= BASE_URL %>favicon.ico">代码里面动态输出了一个变量,我猜测这个语法是ejs模板语法,所以我大胆地尝试了一下<% if(1 === 1) { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %>发现能正常加载输出script标签并加载vue文件。这是因为vue-cli-service内部使用html-webpack-plugin处理的html文件,而html-webpack-plugin内部使用了ejs模板。来到node_modules 的 html-webpack-plugin,在index.js里就能看到他的逻辑了class HtmlWebpackPlugin { constructor (options) { // Default options this.options = _.extend({ template: path.join(__dirname, 'default_index.ejs'), templateParameters: templateParametersGenerator, filename: 'index.html', hash: false, inject: true, compile: true, favicon: false, minify: false, cache: true, showErrors: true, chunks: 'all', excludeChunks: [], chunksSortMode: 'auto', meta: {}, title: 'Webpack App', xhtml: false }, options); } }上面的代码肯定不陌生,就是我们在写插件或者库的时候接收对象类型参数时,用来做传入参数和默认值的合并用的。上面有个template参数,用来指定编译时的模板文件,根据他的默认值就能看出是用了ejs模板引擎了。default_index.ejs内容如下:// html-webpack-plugin/default_index.ejs <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html>有了上面的理解,我们需要做的就是把1===1换成我们想要的逻辑就行了,就是获取环境变量来来判断是生产环境还是开发环境。既然是webpack处理的html文件,那么在上下文中就肯定能访问到webpack在运行时的node环境变量process.env最终index.html代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>我是标题</title> <% if(process.env.VUE_APP_NODE_ENV === 'development') { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script> <% } else { %> <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <% } %> <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <noscript> <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script src="/map/map_loader.js"></script> <!-- built files will be auto injected --> </body> </html>通过上面的调整,就能同时使用cdn引入库文件而不影响我们原来的调试了
2020年01月09日
581 阅读
0 评论
0 点赞
2019-05-17
vscode中支持vue-cli3构建的项目eslint对vue文件的检测
在vue-cli中为了能让vscode能提示.vue文件中的js代码,我们引入了eslint-plugin-html这个eslint插件(使用方法参考VSCode环境下配置ESLint 对Vue单文件的检测)最近开始使用vue-cli3构建项目,主要目的是为了简化项目代码结构和提高编译性能。当我们使用以前的方案去实现vscode对.vue文件的eslint检测时却发现始终无法识别,而且提示以下内容提示信息很容易理解,eslint没有把当前文件当做vue文件处理,而是当做了普通的js文件处理,当然,js文件的外层代码肯定不能含有html标记。最后,我们找到了eslint-plugin-vue,这个插件能完美处理.vue文件,而且还预置了很多可复用的rules(eslint规则)。使用方法如下:第一步: npm install --save-dev eslint-plugin-vue 安装eslint vue支持插件第二步: .eslintrc.js文件中添加plugin说明注:vue-cli3默认不会在根目录创建.eslintrc.js文件,因为vue-cli3除了这种方法配置eslint以外还可以在package.json中通过eslintConfig属性去配置,但是这种方式需要严格遵守json语法规则,我们建议如果您的eslint配置较为复杂,还是在根目录自己创建一个.eslintrc.js文件,这样就可以按照js语法规则去写配置项,也方便注释module.exports = { // ...其他配置项 plugins: [ 'vue' ] // ...其他配置项 }第三步:使用eslint-plugin-vue中预置的eslint规则让其支持.vue文件的基本结构和通用语法规则增加一个文件检测说明配置extends: [ module.exports = { root: true, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: [ 'plugin:vue/base' ], }这里我们使用的是base里面的规则,更多的预置规则可以参考文档(eslint-plugin-vue Available rules)[https://eslint.vuejs.org/rules/]关于eslint规则复用可以参考文档https://cn.eslint.org/docs/developer-guide/shareable-configs第四步:如果配置中最外层已经存在解析器说明配置parser: 'babel-eslint',将其移至parserOptions中module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' } // ...其他配置项 }第五步:vscode中添加对vue文件支持的设置让vscode可以高亮vue文件中的js代码eslint问题代码"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ] 附完整的.eslintrc.js文件// https://eslint.org/docs/user-guide/configuring module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true }, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: [ 'plugin:vue/base' ], // required to lint *.vue files plugins: [ 'vue' ], // add your custom rules here 'rules': { // allow paren-less arrow functions 'indent': [2, 2], // 两个空格的缩进 'quotes': [2, 'single'], // js必须使用单引号 'linebreak-style': [2, 'unix'], // 换行风格 unix/windows 'semi': [2, 'always'], // 语句强制分号结尾 'no-console': [1], // 不允许console语句 'no-unused-vars': [1], // 声明了变量但是没有使用检测 'space-unary-ops': [1, { 'words': true, 'nonwords': false }], // 一元运算符的前/后要不要加空格 'brace-style': [2, '1tbs', { 'allowSingleLine': false }], // 大括号风格 'comma-spacing': [2, { 'before': false, 'after': true }], // 逗号后有空格,前没有空格 'comma-style': [2, 'last'], // 逗号跟在结尾 'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }], // 对象字面量中冒号的前后空格 'lines-around-comment': [ // 行前/行后备注 2, { 'beforeBlockComment': false, // 段注释的前后 'beforeLineComment': false, // 行注释的前面 'afterBlockComment': false, // 块注释的后面 'afterLineComment': false, // 行注释的后面 'allowBlockStart': true, 'allowObjectStart': true, 'allowArrayStart': true }], 'max-depth': [2, 4], // 代码最多允许4层嵌套 'max-len': [1, 160, 2], 'max-nested-callbacks': [2, 3], // 回调嵌套深度 'max-params': [2, 5], // 函数最多只能有5个参数 'max-statements': [1, 80], // 单个函数最多80条语句 'no-array-constructor': [2], // 禁止使用数组构造器 'no-lonely-if': 2, // // 禁止else语句内只有if语句 'no-multiple-empty-lines': [2, { 'max': 3, 'maxEOF': 1 }], // 空行最多不能超过2行 'no-nested-ternary': 2, // 不使用嵌套的三元表达式 'no-spaced-func': 2, // 函数调用时 函数名与()之间不能有空格 'no-trailing-spaces': 2, // 一行结束后面不要有空格 'no-unneeded-ternary': 2, // 禁止不必要的嵌套 var isYes = answer === 1 ? true : false;简单的判断用三元表达式代替 'object-curly-spacing': [2, 'always', { // 大括号内是否允许不必要的空格 always始终允许;never始终不允许 'objectsInObjects': false, 'arraysInObjects': false }], 'arrow-spacing': 2, // =>的前/后括号 'block-scoped-var': 2, // 块语句中使用var 'no-dupe-class-members': 2, // 'no-var': 1, // 禁用var,用let和const代替 'object-shorthand': [1, 'always'], // 强制对象字面量缩写语法 'array-bracket-spacing': [2, 'never'], // 是否允许非空数组里面有多余的空格 'operator-linebreak': [2, 'after'], // 换行时运算符在行尾还是行首 'semi-spacing': [2, { 'before': false, 'after': true }], // 分号前后空格 'keyword-spacing': ['error'], 'space-before-blocks': 2, // 不以新行开始的块{前面要不要有空格 'block-spacing': [2, 'always'], 'space-before-function-paren': [2, 'never'], // 函数定义时括号前面要不要有空格 'space-in-parens': [2, 'never'], // 小括号里面要不要有空格 'spaced-comment': [1, 'always', { 'exceptions': ['-', '*', '+'] }], // 注释风格要不要有空格什么的 'arrow-parens': 0, // allow async-await 'generator-star-spacing': 0, // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 }, globals: { '$': false, 'jquery': false, 'ActiveXObject': false, 'arbor': true, 'layer': false } };
2019年05月17日
851 阅读
0 评论
0 点赞
2019-04-12
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>效果展示:
2019年04月12日
893 阅读
0 评论
0 点赞
2018-12-24
vue低版本浏览器兼容性(20181224更新)
promise在低版本浏览器需要通过pollyfill处理不同浏览器对promise解析的差问题,处理方法为,在main.js里加入如下代码import promise from 'es6-promise'; promise.polyfill();webpack中的babel处理的目录是在webpack.base.conf.js中通过includes配置的,默认没有包含node_modules下的库文件,某些npm包没有做es6新语法的处理,我们的webpack又没有编译这部分文件,就会报错,最常见的就是let,const,因为很多浏览器都已经支持let,const,但是低版本浏览器不支持,所以我们需要在include中加上这些没处理的包,处理方法为:在includes中加上对应的node_modules包的目录名,切记不要直接加入node_modules,因为有些npm包不能通过webpack编译,而且也太了。build里面的webpack.base.conf.js的module中配置{ test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), resolve('test'), resolve('node_modules/_swiper@4.4.6@swiper'), resolve('node_modules/_dom7@2.1.2@dom7'), resolve('node_modules/webpack-dev-server/client' )] }
2018年12月24日
736 阅读
0 评论
0 点赞
2018-01-10
在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 }
2018年01月10日
2,223 阅读
5 评论
0 点赞
1
2