Comprehensive Guide to Building a Vue 3 + Vite + TypeScript Project with Full Tooling and Best Practices

The article begins with an overview of the technologies involved—Vue 3, Vite, TypeScript, ESLint, Stylelint, Vue‑Router, Axios, and Pinia—and explains why a detailed scaffold is useful for learning each configuration option.

1. Install Node.js

Node.js provides the runtime for frontend tooling. After downloading the LTS version, verify the installation with node -v and ensure the PATH environment variable includes the Node directory.

Install the Chinese npm mirror cnpm to speed up dependency downloads:

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. Initialize a Vite + Vue‑TS Project

Run the following command to create a Vite project with the Vue‑TypeScript template:

npm create vite@latest my-vue-app -- --template vue-ts

After navigating into the project, install dependencies and start the dev server:

cd my-vue-app
npm install
npm run dev

The app runs at http://localhost:3000 and shows the default Vue welcome page.

3. Extend Vite Configuration

Because Vite’s default vite.config.js is minimal, the guide adds common options:

Base path : base: './' for relative deployment.

Server options : custom port, auto‑open, CORS, and a proxy for /api requests.

Path aliases using resolve.alias to map @ to src and shortcuts for views , components , and assets .

Build options : output directory, terser compression, console removal, and chunk size warning limit.

The final vite.config.ts looks like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

const pathResolve = (dir: string) => resolve(__dirname, dir)

export default defineConfig({
  plugins: [vue()],
  base: './',
  server: { port: 4000, open: true, cors: true, proxy: { '/api': { target: 'http://127.0.0.1:8000', changeOrigin: true, secure: false, rewrite: path => path.replace(/^\/api/, '') } } },
  resolve: { alias: { '@': pathResolve('./src'), views: pathResolve('./src/views'), components: pathResolve('./src/components'), assets: pathResolve('./src/assets') } },
  build: { outDir: 'dist', terserOptions: { compress: { keep_infinity: true, drop_console: true, drop_debugger: true } }, chunkSizeWarningLimit: 1500 }
})

4. TypeScript Configuration

Two config files are introduced: tsconfig.json for the project and tsconfig.node.json for Vite’s own TypeScript files. Important compiler options include strict , esModuleInterop , baseUrl , paths matching the Vite aliases, and isolatedModules . The env.d.ts file adds Vue‑specific type declarations.

5. Code Quality Tools

ESLint is installed with the Vue and TypeScript plugins, configured via .eslintrc.js to enforce style, unused‑variable checks, and indentation. Scripts npm run lint and npm run lint:fix run the linter and auto‑fix issues.

Stylelint handles SCSS linting. The configuration extends stylelint-config-standard-scss and uses postcss-html as customSyntax to lint .vue files. Scripts npm run stylelint and npm run stylelint:fix are provided.

An .editorconfig file enforces consistent indentation, line endings, and final newlines across editors.

6. Git Hooks

Using husky (v4) and lint-staged , pre‑commit hooks run ESLint and Stylelint on staged .ts , .vue , and style files, preventing non‑compliant code from being committed.

7. UI Library – Naive UI

Naive UI is installed ( npm i -D naive-ui ) and registered globally via a custom demand-import.ts that creates a Naive UI instance with selected components (e.g., NButton ). The instance is used in main.ts with app.use(naive) .

8. Vue‑Router Integration

Install vue-router , create src/router/index.ts with a hash history and a single route pointing to src/views/home/index.vue , then add app.use(router) in main.ts and place <router-view/> in App.vue .

9. State Management – Pinia

Pinia is added ( npm install pinia ) and registered via app.use(createPinia()) . A simple counter store is defined with defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }) . The store is used in components with the setup syntax.

10. Chart Library – ECharts 5

ECharts is installed ( npm install echarts ) and a modular import file src/utils/echarts.ts registers only the needed chart types (BarChart) and components. The exported $echarts is used in a component’s onMounted hook to render a bar chart.

11. HTTP Client – Axios

An axios.ts utility creates a custom Axios instance with a base URL and timeout, adds a response interceptor to handle non‑2xx status codes, and defines a generic errorHandle function for common HTTP errors. Simple get and post wrappers are exported for use throughout the app.

12. References

The article lists official documentation links for Vue, Vite, Node.js, TypeScript, ESLint, Stylelint, Naive UI, Pinia, and Axios, as well as tutorial resources for TypeScript and ECharts.

Overall, the guide provides a step‑by‑step, production‑ready setup for a Vue 3 project, emphasizing code quality, modular configuration, and integration of popular frontend libraries.