Vue3 whole family bucket + Vite + TS + TSX for a taste of fresh food, one step ahead!

Vue3 and TSX early version

Major dependencies involved

  1. vite@1.0.0 -Beta 11: New generation scaffold
  2. vue@3.0.0 -Beta 22:beta
  3. vuex@4.0.0-beta.4
  4. vue-router@4.0.0-beta.2
  5. typescript@3.9.6

Preparation

  1. Ensure that yarn is installed
npm install yarn -g
  1. Ensure vite scaffolding is installed
npm install -g create-vite-app
# or
yarn add -g create-vite-app

start

Project initialization

yarn create vite-app <project-name>

Integrated TS

yarn add --dev typescript

Project root create configuration file: tsconfig JSON:

{
  "include": ["./**/*.ts"],
  "compilerOptions": {
    "jsx": "react",
    "target": "es2020" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    // "lib": ["es2017.object"] /* Specify library files to be included in the compilation. */,
    // "declaration": true /* Generates corresponding '.d.ts' file. */,
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    "sourceMap": true /* Generates corresponding '.map' file. */,
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    "outDir": "./dist" /* Redirect output structure to the directory. */,

    "strict": true /* Enable all strict type-checking options. */,
    "noUnusedLocals": true /* Report errors on unused locals. */,
    "noImplicitReturns": true /* Report error when not all code paths in function return a value. */,

    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  }
}

Integrated eslint

yarn add --dev eslint eslint-plugin-vue

Create a configuration file in the project root directory Eslintrc JS:

module.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
    sourceType: 'module', // Allows for the use of imports
    ecmaFeatures: {
      // tsx: true, // Allows for the parsing of JSX
      jsx: true,
    },
  },
  // settings: {
  //   tsx: {
  //     version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
  //   }
  // },
  extends: [
    'plugin:vue/vue3-recommended',
    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
};

Integrated pritter

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

Project root create profile: Prettierrc JS:

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  endOfLine:"auto"
};

At this stage, a Vue3+TSX project is set up. The specific contents of the above configuration files will not be explained.

Modify entry file

Because the default project template is src/main JS is an entry. We need to change it to src/main Ts.
In the index Modify the reference of the entry file in HTML:

... ...
<body>
  ... ...
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

Optimize TS type inference

In the src directory, create shim d. TS, source d. TS

Shim d. Ts: (actually, this is not necessary, because the project is all developed through tsx)

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

Source d. Ts: (optimize compiler prompts and declare static resource files)

declare const React: string;
declare module '*.json';
declare module '*.png';
declare module '*.jpg';

Integrated Vue router

yarn add --dev vue-router@4.0.0-beta.2

Here you can go to the official npm website to find the latest version
In the src directory, create a router folder and create an index TS
index.ts:

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: import('../views/Home'),
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About'),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

The method of creating router here is different from that before. In vue3, the development efficiency will be much higher in combination with the type inference of TS.

Integrated vuex

yarn add --dev vuex@4.0.0-beta.4

In the src directory, create a new store folder and create an index TS

index.ts:

import { state } from './state';
import { createStore } from 'vuex';

export default createStore({
  state,
  mutations: {},
  actions: {},
  modules: {},
});

state.js:

export interface State {
  title: string;
}

export const state: State = {
  title: 'Vue(v3) And tsx Combination of~',
};

main.ts

Final main Introducing store and router into ts:

import { createApp } from 'vue';
import App from './App';
import router from './router';
import store from './store';

createApp(App).use(router).use(store).mount('#app');

ending

The release of the official version of vue3 will inevitably lead to the collective updating of the surrounding frameworks of vue2, such as UI framework and vue2 based instruction library. As a white whore party for so long, it will also contribute to the construction of vue3 community.

The combination of Vue3 and TS is a general trend. If it is not suitable for TS, Vue2 is recommended. 23333~

Subsequent bloggers will also study the new features and API s of vite framework and vue3 family bucket, and strive to output quality documents.

Finally, the source code address is attached: https://github.com/justwiner/vue3-tsx

Reference article: https://github.com/hyperMoss/vue-tsx

Tags: Vue.js TypeScript Vue

Posted by SapAuthor on Mon, 30 May 2022 20:01:10 +0530