背景
之前公司的项目中使用的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
}
}
参考资料：
- https://typescript.nuxtjs.org/guide/ 【官网】
- https://github.com/nuxt/typescript/issues/49【案例】
- https://www.typescriptlang.org/docs/handbook/compiler-options.html
- https://juejin.im/post/5dcbd9ddf265da307879fdf3 【掘金】
- https://ts.xcatliu.com/engineering/lint 【vscode tslint】
- https://juejin.im/post/5afede99f265da0b82630af8
- https://prettier.io/docs/en/options.html#prose-wrap 【prettier】
- https://github.com/ElemeFE/el...
- https://segmentfault.com/a/11...
其他：
如果在配置中出现问题：
比如：
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;
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。