Nuxt项目支持eslint pritter类型脚本的实现

脚手架安装好nuxt的基本项目

npx create-nuxt-app项目名，如：npx create-nuxt-app nuxt-ts，按照提示安装你想要的东西，本次项目预装：通用模式下koa PWA linter更漂亮的axios，默认的项目目录如下：

eslint更漂亮的开发工具保存自动格式化修复

本人习惯缩进为四个空格，但是eslinntnuxt生成的项目默认为2个，因此需要更改配置。编辑器配置文件下的缩进_大小： 2更改为缩进大小： 4 .vscode/settings.json{ //保存时eslint自动修复错误埃斯林。autofixonssave ' : true，//保存自动格式化editor.formatOnSave ' : true，//开启eslint支持更漂亮.更漂亮. eslintinteintegration ' : true，//更漂亮配置-使用单引号【与。漂亮的下的配置对应】"更漂亮。单引号":正确，//更漂亮配置-结尾不加分号【与。漂亮的下的配置对应】"更漂亮。semi":假，//更漂亮配置-每行最多显示的字符数【与。漂亮的下的配置对应】"更漂亮。打印宽度" : 120，//.某视频剪辑软件文件模板格式化支持，并使用js-美化-html插件维特。格式。默认格式化程序。html ' : ' js-美化-html '，//js-美化-html格式化配置，属性强制换行维特。格式。defaultformateroptions ' : { ' js-美化-html ' : {//' wrap _ attributes ' : '强制对齐' } },//根据文件后缀名定义某视频剪辑软件文件类型files.associations': { '* .vue': 'vue' }，//配置ESLint检查的文件类型埃斯林。验证' :[' JavaScript '，' javascriptreact '，{ 'language': 'vue '，' autoFix': true '，{ 'language': 'typescript '，' autoFix': true } ]，'文件。autosave ' : ' onFocusChange '，' vetur.format.enable': false，' vetur。实验性的。模板插入服务' : true，'编辑器.检测缩进' .漂亮的文件

{ 'singleQuote': true，//使用单引号` .vscode/settings.json `的甲壳虫乐队。semi `` semi ' : false，//结尾不加分号` .vscode/settings.json `的甲壳虫乐队。semi ` `打印宽度' : 120//此项为我自加以上两项为默认，表示每行最多显示的字符数，默认为80,本人觉得太短了，因此修改了一下，必须与` .vscode/settings.json `的"更漂亮。打印宽度"对应上/* 更多配置请戳https://prettier.io/docs/en/options.html */} .文件配置

module.exports={ root: true，env: { browser: true，node: true }，parse rops : { parser : ' babel-eslint ' }，extends 3360[' @ nuxtjs '，' plugins: nuxt/推荐，'插件：更漂亮/推荐','更漂亮','更漂亮/vue' ]，plugins: ['更漂亮',//在此处添加您的自定义规则规则个空格缩进/* 更多配置请戳http://eslint.cn/docs/rules/*/} } numxt。配置。射流研究…文件下build.extend(config，ctx) {}添加options.fix: true

build: { /* **您可以在此扩展web pack config */extend(config，CTX){//save if(CTX。伊斯德夫CTX。isclient){ config。模块。规则。push({ enforce : ' pre '，test: /\ .(js|vue)$/，loader : ' eslit-loader '，exclude: /(node_modules)/，options: { fix: true } }) } }开始改造工程支持以打字打的文件

安装所需插件

NPM I-D @ nuxt/typescript ts-node @ typescript-eslint/eslint-plugin NPM install-S vue-class-component vue-property-decorator修改添加配置

package.json

添加或编辑package.json的线头脚本：' lint': 'eslint - ext .ts ,js .忽略路径gitignore .

修改package.json的偏差脚本中server/index.js为服务器/索引。分时（同timesharing）

dev ' : ' cross-ENV NODE _ ENV=development nodemon服务器/索引。ts-watch server '，tsconfig.json

项目目录下新建tsconfig.json文件后，在package.json文件下添加：“start-dev”:“nuxt”脚本命令，运行新公共管理运行开发就会使用默认值自动更新此配置文件。eslintrc.js

修改。eslintrc.js文件解析。解析器： ' @ typescript-eslit/parser '

parse ROP : { parser : ' @ typescript-eslint/parser ' }，修改。eslintrc.js文件插件添加@typescript-eslint '

plugins: ['更漂亮，' @ typescript-ESL int '](9501 . 163.com)

nuxt.config.js

修改nuxt.config.js文件后缀为nuxt.config.ts

修改nuxt.config.ts的构建。扩展

{ test: /\ .ts$/，exclude: [/node_modules/，/vendor/，/\ .numxt/]，loader: 'ts-loader '，选项： { appendtssufixt to :[/\ .vue$/]，trans pile only : true } }(9502 . 163.com)

server/index.js

修改server/index.js文件后缀为服务器/索引。分时（同timesharing）

修改服务器/索引。分时（同timesharing）中的

const config=require('./nuxt.config.js')//为const config=require('./nuxt.config.ts ')修改某视频剪辑软件文件为以打字打的文件语法

脚本从" ~/组件/Logo.vue "导入徽标导出默认{组件3360 {徽标} }/脚本类型脚本语法如下：

脚本lang=' ts '从' Vue-property-decorator '导入{ Component，Vue }从' ~/components/Logo '导入Logo。vue ' @ Component({ components 3360 { Logo }，middleware: 'check-auth'})导出默认类索引页扩展了vue { }/脚本坑点

vetur报错找不到模块“xxxx”

解决方案：导入路径需要写清楚后缀

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。