搜索到
3
篇与
的结果
-
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, } } -
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引入库文件而不影响我们原来的调试了
-
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 } };
