脚手架装置好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>

坑点

• vetur 报错 Cannot find module 'xxxx'

  • 解决方案：import 途径 须要写清晰后缀