My vue3 playground project

A playground project with vue3.x, TypeScript, ESLint, webpack and others. Used to learn.

start

$ yarn 
$ npm run dev

Use vue 3.x

Add [email protected]

I am using the latest version of vue and now can use vue3 normally.

I am using yarn to manage dependencies.

• First, install the dependencies:

  yarn add vue@next
  yarn add -D @vue/compiler-sfc vue-style-loader vue-loader@next css-loader

  • @vue/compiler-sfc is used to compile SFC into javascript.
  • vue-loader@next is loader for vue3.x

• Then update our webpack config as normal vue2.x project .

  We can add vue alias to avoid some questions according to Evan's project :

  module.exports = {
    resolve: {
        alias: {
            'vue': '@vue/runtime-dom',
        },
    },
  };

Config ESLint

• First, install dependencies: eslint-plugin-vue@next

  yarn add -D eslint eslint-plugin-vue@next

• Then, add config in .eslintrc.js

  module.exports = {
    parser: 'vue-eslint-parser',
    plugins: [
        '@typescript-eslint',
        'vue',
    ],
    extends: [
        // other rules: 'eslint:recommended',
        'plugin:vue/vue3-recommended',
    ],
  };

In order to parse SFC, we must specify parser: 'vue-eslint-parser' in top level.

If you want to use custom parser, you must add it in parserOptions : js module.exports = { parserOptions: { // typescript parser parser: '@typescript-eslint/parser', } }

Questions

• multiple root element in template Currently if we use multiple root element in template, Vetur will report error. We can config vetur setting:

      "vetur.validation.template": false

  More information, see:

  • valid-template-root root requires exactly one element
  • Vue 2/3 Eslint rules.

Use ESLint with TypeScript

TypeScript has decided to use ESLint to check code.

typescript-eslint

• First install the required packages:

  yarn add -D typescript @typescript-eslint/parser  @typescript-eslint/eslint-plugin

• Then create a config file in root .eslintrc.js, and use @typescript-eslint/parser as the parser:

  module.exports = {
    parser: '@typescript-eslint/parser',
  };

• Use env: { node: true } to enable the use of module.exports.

• Using require in webpack.config.js will report error，we can use overrides to override the rules in build directory：

  module.exports = {
    overrides: [
        { 
          files: [ 'build/*.js' ],
          rules: {
            "@typescript-eslint/no-var-requires": "off"
          }
        }
    ]
  }

• To use webpack alias, you should config tsconfig.json:

  {
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/*": [ "./src/*" ]
        }
    }
  }