腳手架安裝好nuxt的基本項目
-
npx create-nuxt-app <項目名>
,如:npx create-nuxt-app nuxt-ts
,按照提示安裝你想要的東西,本次項目預裝: Universal模式下koa+PWA+linter+prettier+axios ,默認的項目目錄如下:
eslint + prettier + vscode 保存自動格式化&修復
本人習慣縮進爲4個空格,但是eslint&nuxt生成的項目默認爲2個,因此需要更改配置
-
.editorconfig
文件下的indent_size: 2
更改爲indent_size: 4
.vscode/settings.json
{
// 保存時eslint自動修復錯誤
"eslint.autoFixOnSave": true,
// 保存自動格式化
"editor.formatOnSave": true,
// 開啓 eslint 支持
"prettier.eslintIntegration": true,
// prettier配置 --- 使用單引號【與.prettierrc下的配置對應】
"prettier.singleQuote": true,
//prettier配置 --- 結尾不加分號 【與.prettierrc下的配置對應】
"prettier.semi": false,
//prettier配置 --- 每行最多顯示的字符數 【與.prettierrc下的配置對應】
"prettier.printWidth": 120,
//.vue文件template格式化支持,並使用js-beautify-html插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
//js-beautify-html格式化配置,屬性強制換行
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// "wrap_attributes": "force-aligned"
}
},
//根據文件後綴名定義vue文件類型
"files.associations": {
"*.vue": "vue"
},
//配置 ESLint 檢查的文件類型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "typescript",
"autoFix": true
}
],
"files.autoSave": "onFocusChange",
"vetur.format.enable": false,
"vetur.experimental.templateInterpolationService": true,
"editor.detectIndentation": false
}
-
.prettierrc
文件
{
"singleQuote": true, // 使用單引號 `.vscode/settings.json` 的`prettier.semi`
"semi": false, // 結尾不加分號 `.vscode/settings.json` 的`prettier.semi`
"printWidth": 120 // 此項爲我自加以上兩項爲默認,表示每行最多顯示的字符數,默認爲80,本人覺得太短了,因此修改了一下,必須與`.vscode/settings.json` 的`prettier.printWidth`對應上
/* 更多配置請戳 https://prettier.io/docs/en/options.html */
}
-
.eslintrc.js
文件配置
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'@nuxtjs',
'plugin:nuxt/recommended',
'plugin:prettier/recommended',
'prettier',
'prettier/vue'
],
plugins: ['prettier'],
// add your custom rules here
rules: {
'nuxt/no-cjs-in-config': 'off',
indent: ['error', 4] // 4個空格縮進
/* 更多配置請戳 http://eslint.cn/docs/rules/ */
}
}
-
nuxt.config.js
文件下build.extend(config, ctx) {}
添加options.fix: true
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/,
options: {
fix: true
}
})
}
}
}
開始改造工程支持typescript
安裝所需插件
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腳本:
"lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
- 修改
package.json
的dev
腳本中server/index.js
爲server/index.ts
"dev": "cross-env NODE_ENV=development nodemon server/index.ts --watch server",
tsconfig.json
- 項目目錄下新建
tsconfig.json
文件後,在package.json文件下添加:"start-dev": "nuxt"
腳本命令,運行npm run dev
就會使用默認值自動更新此配置文件
.eslintrc.js
- 修改
.eslintrc.js
文件parserOptions.parser: '@typescript-eslint/parser'
parserOptions: {
parser: '@typescript-eslint/parser'
},
- 修改
.eslintrc.js
文件 plugins添加'@typescript-eslint'
plugins: ['prettier', '@typescript-eslint'],
nuxt.config.js
- 修改
nuxt.config.js
文件後綴爲nuxt.config.ts
- 修改
nuxt.config.ts
的build.extend
{
test: /\.ts$/,
exclude: [/node_modules/, /vendor/, /\.nuxt/],
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
transpileOnly: true
}
}
server/index.js
- 修改
server/index.js
文件後綴爲server/index.ts
- 修改
server/index.ts
中的
const config = require('../nuxt.config.js')
// 爲
const config = require('../nuxt.config.ts')
修改vue文件爲typescript語法
<script>
import Logo from '~/components/Logo.vue'
export default {
components: {
Logo
}
}
</script>
typescript 語法如下:
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Logo from '~/components/Logo.vue'
@Component({
components: {
Logo
},
middleware: 'check-auth'
})
export default class IndexPage extends Vue {}
</script>