vue nuxt配置typescript

THIS

背景

之前公司的项目中使用的nuxt进行开发,Typescript 资料还不是很多就没有配置,现在nuxt日渐成熟
在下半年的目标也是掌握Typescript、所以进行整体的配置重构代码逻辑,话不多说 开始吧!
文章分为两部分:1、项目入门搭建;2、VScode 配置eslint校验和美化代码的prettier

项目搭建:

下载nuxt脚手架
 npx create-nuxt-app <项目名>
 cd <project-name> 
 npm run dev

具体的参考 nuxt官网配置方式

安装依赖
npm install --save-dev @nuxt/typescript-build
npm install --save-dev vue-property-decorator
注入到nuxt.config.js

export default {
  buildModules: ['@nuxt/typescript-build']
}
新增配置tsconfig.json

tsconfig.json 可以根据项目的实际需求进行配置,如果你的项目用了第三方UI库,比如:element-ui,可能有些ts会不兼容,那么请注意skipLibCheck这个属性,

{
  "compilerOptions": {
    "skipLibCheck": true, // 跳过所有声明文件的类型检查
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}
查看package.json

PS: 这些软件包只能与Nuxt 2.10更高版本一起使用

{
  "name": "typescript-demo",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "nuxt": "latest",
    "vue-property-decorator": "latest"
  },
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "post-update": "yarn upgrade --latest"
  },
  "devDependencies": {
    "@nuxt/typescript-build": "latest"
  }
}
嘿!新建页面开始运行试试

关于vue-property-decorator具体使用、不懂得小伙伴可以看一下

<template>
  <div>
    {{ message }}
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class PageIndex extends Vue {
  message: string = 'hello Typescript'
}
</script>

配置Vsode:

配置 package.json
"devDependencies": {
    "@nuxt/typescript-build": "latest",
    "@nuxtjs/eslint-config-typescript": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^2.13.0",
    "ant-design-vue": "^1.1.10",
    "babel-eslint": "^8.2.1",
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-vue": "^4.0.0",
    "nodemon": "^1.18.9",
    "prettier": "1.14.3"
}
新建.eslintrc.js

记得在vscode中下载eslint的插件哦】

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    parserOptions: {
        parser: '@typescript-eslint/parser'
    },
    extends: [
        'plugin:vue/recommended',
        '@nuxtjs/eslint-config-typescript',
        'plugin:prettier/recommended'
    ],
    plugins: ['vue', 'prettier', '@typescript-eslint'],
    globals: {
        API: false,
        Vue: false,
        process: false
    },
    rules: {
        'no-var': 2,
        'no-class-assign': 2, // 禁止给类赋值
        'no-cond-assign': 2, // 禁止在条件表达式中使用赋值语句
        'no-constant-condition': 2, // 禁止在条件中使用常量表达式 if(true) if(1)
        'no-dupe-args': 2, // 函数参数不能重复
        'no-else-return': 2, // 如果if语句里面有return,后面不能跟else语句
        'no-func-assign': 2, // 禁止重复的函数声明
        'no-multi-spaces': 1, // 不能用多余的空格
        'no-multiple-empty-lines': [1, { max: 2 }], // 空行最多不能超过2行
        'no-redeclare': 2, // 禁止重复声明变量
        'no-trailing-spaces': 1, // 一行结束后面不要有空格
        'no-undef': 1, // 不能有未定义的变量
        camelcase: 2, // 强制驼峰法命名
        eqeqeq: 2, // 必须使用全等
        'accessor-pairs': 2, // 逗号后面加空格
        'spaced-comment': 2, // 注释后面加空
        'no-unreachable': 2, // 不能有无法执行的代码
        'no-use-before-define': 2, // 未定义前不能使用
        'no-unused-expressions': 2, // 禁止无用的表达式
        'no-unused-vars': 2 // 禁止出现未使用过的变量
    }
};
创建prettier.config.js
// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};
创建.vscode/settings.json

路径:【首选项/设置/文件编辑器/文件】 选择【工作区】PS:如果你维护多个项目还是在工作区编辑比较好哦

{
    "files.eol": "\n",
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "eslint.validate": ["javascript", "javascriptreact", "vue"],
    "typescript.tsdk": "node_modules/typescript/lib",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

参考资料:

其他:

如果在配置中出现问题:
比如:

eslint 在页面不生效?

那么看看你的【首选项/设置/文件编辑器/文件】【用户】中是否有其他的设置阻碍运行?或者全部注释看看

Programmatic mode, Failed to show Nuxt.js app after 5 reloads 详情

# 1. reset
$ rm -rf node\_modules

$ rm package-lock.json

# 2. install nuxt first
$ npm i nuxt --save

# 3. install another two modules second
$ npm i @nuxt/typescript-build @nuxt/typescript-runtime --save

# 4. install other modules at last
$ npm i

# 5. it works!!
$ npm run dev

怎样引入head方法?点击我

@Component({
    head(this: news): object {
        return {
            title: '我是xxx'
        };
    }
})

配置Typescript的时候一直报错?

试着删除你的 ackage-lock.json文件、重新下载,或者删除你的 node_modules 重新下载看看,把nuxt更新到最新试试看

在vue组件引入josn文件报错【Module 'xxx.json' was resolved to 'xxxx.json', but '--resolveJsonModule' is not used.Vetur(7042)】
那么在tsconfig.josn 配置 resolveJsonModule:true 试试,同时重启Vscode;ps: 不是项目重启 是vscode直接退出、然后重新打开项目哦

如果在全局注入变量,【Property '$axios' does not exist on type 'defaults'.Vetur(2339)】

需要创建一个xxx.d.ts

import Vue from 'vue';
declare module 'vue/types/vue' {
    interface Vue {
        $axios: any;
    }
}
阅读 6.5k

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
0 条评论
你知道吗?

多读书、多看报、少吃零食、多睡觉

716 声望
9 粉丝
文章目录
宣传栏