Vue3 Complete project configuration (Hand in hand to teach you the development process from zero to one)

Throw out the readme for your project first

The project readme

Related technologies

vue3 + ts + vite + windiCss + element-plus + pnpm

Install dependencies/start/package

sudo npm i pnpm -g

pnpm i

## Start a project
pnpm/npm start

## Package projects
pnpm/npm run build
Copy the code

PNPM can be used or not, depending on your usual use habits

Related technologies and configurations

Initialize vue3

If we use Vite when we can use vite directly to initialize the project, instead of using @vue/ CLI, we recommend to choose ts template

npm create vite my-vue-app -- --template vue
Copy the code

Dynamic Router automatic injection

Install dependencies

npm i vue-route @vueuse/core -S
npm i vite-plugin-pages -D
Copy the code

Configure the vite.config.ts file

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Pages from 'vite-plugin-pages'

export default defineConfig({
  plugins: [
    Vue(),
    Pages(),
  ],
  optimizeDeps: {
    include: [
      'vue'.'vue-router'.'@vueuse/core',]}})Copy the code

Import file main.ts to add router

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from 'virtual:generated-pages'

const app = createApp(App)
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})
app.use(router)
app.mount('#app')

Copy the code

Add the pages directory to the SRC folder. The directories under Pages are automatically added to the router

Note: Dynamic routing is automatically generated according to pages folder, the following is the new writing method

  1. [id].vue: This component can pass a parameter to the component with props ID
  2. […all].vue: This component can match any other component similar to the [id].vue component, similar to the *.vue component of vue2

Adding a Local Service

Configuration vite. Config. Ts

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    fs: {
      strict: true,},// NOTE:IP and portHost:' '.port: ' '.// NOTE:Local debug agent
    proxy: {},}})Copy the code

Configure windiCss to reduce CSS

WindiCss does not support Webpack very well at present. Before, a project to write marketing components thought of using webpack+windiCss components, but it was a little difficult to debug, and finally gave up

But windiCss support for Vite is very good, in the Vite project we only need to do a few steps to follow the document happy to use

npm i vite-plugin-windicss -D
Copy the code

Add the windiCss configuration file windi.config.ts to the project directory

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  darkMode: 'class'.// https://windicss.org/posts/v30.html#attributify-mode
  attributify: true
})
Copy the code

Configure the windiCss plugin in viet.config. ts

// ...
import WindiCSS from 'vite-plugin-windicss'
import { defineConfig } from 'vite'
// ...

export default defineConfig({
  // ...
  plugins: [
     // ...
    // https://github.com/antfu/vite-plugin-windicss
    WindiCSS()
  ],
  // ...
})

Copy the code

This completes the configuration. Now import the Windicss related files in the import file main.ts

import { createApp } from 'vue'
import App from './App.vue'

// NOTE:The following is the introduction of windiCss
// windicss layers
import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import 'virtual:windi-utilities.css'

Copy the code

You can then happily say goodbye to CSS, less, and simply add classes to compile the desired styles

Add element-plus and automate on-demand loading

What Element can do is:

  1. There is no need for a single import component, the reference relationship is done by the Vite plug-in
  2. All labels are used directly and introduced as needed
npm i unplugin-icons unplugin-vue-components unplugin-element-plus -D
npm i element-plus @element-plus/icons -S
Copy the code

The configuration of the vite. Config. Ts

import { defineConfig } from 'vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  plugins: [
    // ...
    Components({
      dts: true.resolvers: [
        // auto import icons
        // https://github.com/antfu/vite-plugin-icons
        IconsResolver({}),
	ElementPlusResolver()
      ]
    }),
    // https://github.com/antfu/vite-plugin-icons
    Icons(),
    ElementPlus({})
  ]
})
Copy the code

All element tags that appear are automatically registered as global components in components.d.ts

Eslint configuration

npm i @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/eslint-config-typescript eslint eslint-plugin-vue -D
Copy the code

Add the.eslintrc.js configuration

const commonRules = {
  // allow paren-less arrow functions
  'arrow-parens': 0.// allow async-await
  'generator-star-spacing': 0.// Line breaks are not mandatory for ternary operators
  'multiline-ternary': 0.// The key of the object remains the same style, with either quotation marks or none
  'quote-props': ['error'.'as-needed'].// Turn off the hint for destructuring parameters when using apply, because sometimes apply is used to change the this pointer
  'prefer-spread': 0.// Allow the use of parentheses for attribute value manipulation
  'dot-notation': 0.// Const is not mandatory
  'prefer-const': 2./ / allow mixed use && and | |
  'no-mixed-operators': 0.// Allow promise.reject to return no Error type
  'prefer-promise-reject-errors': 0.// There is something wrong with this rule
  'no-unused-vars': 2.// Prototype is allowed
  'no-prototype-builtins': 2.// allow debugger during development
  'no-debugger': process.env.NODE_ENV ? 2 : 0.'space-before-function-paren': 2.// Disable node rules. Eslint introduced them by default
  'node/no-callback-literal': 0.camelcase: 1.curly: 1.quotes: [2.'single'].semi: [2.'never'].'no-case-declarations': 0.'no-empty': 2.'lines-between-class-members': 2.'no-var': 'error'.'comma-dangle': [
    'error',
    {
      arrays: 'always-multiline'.objects: 'always-multiline'.imports: 'always-multiline'.exports: 'always-multiline'.functions: 'only-multiline'.// Close Airbnb's restriction on function call arguments, not one line, but also a comma at the end},],}consttsRules = { ... commonRules,// Allow non-null assertions
  '@typescript-eslint/no-non-null-assertion': 0.// Empty functions are allowed, but an empty function unified reference should be specified later
  '@typescript-eslint/no-empty-function': 0.// Allow ts comments
  '@typescript-eslint/ban-ts-comment': 0.// Allow display to use any
  '@typescript-eslint/no-explicit-any': 0.// Allow the use of variables to store this
  '@typescript-eslint/no-this-alias': 0.// Allow no display of declared function return types
  '@typescript-eslint/explicit-module-boundary-types': 0.// ts does not recommend the use of type, first let go, later add
  // '@typescript-eslint/ban-types': 0
  / / the require documents
  '@typescript-eslint/no-var-requires': 0,}module.exports = {
  root: true.env: {
    node: true,},parser: 'vue-eslint-parser'.parserOptions: {
    parser: '@typescript-eslint/parser'.ecmaVersion: 2020.sourceType: 'module'.ecmaFeatures: {
      jsx: true,}},extends: [
    'eslint:recommended'.'plugin:vue/vue3-essential'.'@vue/typescript/recommended',].rules: {
    ...commonRules,
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'.'no-unused-vars': [
      'error',
      { varsIgnorePattern: '*'.args: 'none'},].'@typescript-eslint/no-unused-vars': [
      'error',
      { varsIgnorePattern: '*'.args: 'none'},],},globals: {
    defineProps: 'readonly'.defineEmits: 'readonly'.defineExpose: 'readonly'.withDefaults: 'readonly',},overrides: [{files: ['**/*.ts'].parser: '@typescript-eslint/parser'.extends: [
        'plugin:@typescript-eslint/eslint-recommended'.'plugin:@typescript-eslint/recommended',].plugins: ['@typescript-eslint'].rules: tsRules,
    },
    {
      files: ['**/*.d.ts'].parser: '@typescript-eslint/parser'.extends: [
        'plugin:@typescript-eslint/eslint-recommended'.'plugin:@typescript-eslint/recommended',].plugins: ['@typescript-eslint'].rules: {
        ...tsRules,
        '@typescript-eslint/ban-types': 0.// Remove type usage restrictions for global types
        // Empty interface is allowed, mainly to facilitate require.d.ts
        '@typescript-eslint/no-empty-interface': 0.'no-use-before-define': 0,},},],}Copy the code

The rules can be modified according to your own or your team’s development habits

Vscode installs related plug-ins

  1. WindiCSS IntelliSense
  2. Vue Language Features (Volar)
  3. Vite
  4. Vetur TypeScript performance workaround
  5. ESLint

Of course, if your editor is not vscode, you can find the relevant plug-in installation method, also can leave a comment, let’s have a look

The project address

The demo address