Skip to content

way2ex/vue3-playground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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
  • 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

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/*" ]
          }
      }
    }

About

A project with vue3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published