Initialize the project using Vite

  • Note: To build your project using Vite, the Node.js version needs to be greater than 12.0.0
npm init @vitejs/app
Copy the code

  1. Enter the project name

  2. Choose the frame, here we choose VUE

  3. Choose the TypeScript

  4. At this point the project is initialized

  5. Switch to the project directory, install dependencies, and start the project

npm install
npm run dev
Copy the code

Modifying a Configuration File

The Vite configuration file vite.config.ts is in the root directory of the project.

For a brief configuration, see vitejs.dev/config/ for more information

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      The '@': resolve(__dirname, 'src') // @points to the SRC directory}},base: '/'.// Package the path
  server: {
    port: 3000.// Service startup port number
    open: true.// Whether the browser is automatically opened when the service starts
    cors: true // Allow cross-domain}})Copy the code

Note: Path cannot be found. Install @types/node

npm i @types/node -D
Copy the code

Configure the Vue Router and Vuex

  1. Install vue-router@4 and vuex@next
npm i vue-router@4
npm i vuex@next
Copy the code

  1. Create a routing configuration file

    Create the router directory in the SRC directory and create the index.ts file in the directory

    Page components are generally stored in the Views directory

import {
  createRouter,
  createWebHashHistory,
  RouteRecordRaw
} from 'vue-router'

import Home from '@/views/home.vue'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/'.name: 'Home'.component: Home
    }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
Copy the code

  1. Create a Vuex configuration file

    Create a store directory under SRC and create the index.ts file in the directory

import { createStore } from 'vuex'

export default createStore({
  state() {},
  mutations: {},
  actions: {},
  getters: {}})Copy the code
  1. Mount the route and Vuex configuration in main.ts
import { createApp } from 'vue'
import App from './App.vue'

import store from './store/index'
import router from './router/index'

const app = createApp(App)

app.use(store)
app.use(router)

app.mount('#app')

Copy the code

Canonical directory structure

├ ─ ─ the publish / └ ─ ─ SRC / ├ ─ ─ assets / / / static resource directory ├ ─ ─ the components / / / public directory components ├ ─ ─ the router / / / routing configuration directory ├ ─ ─ store / / / state management ├ ─ ─ Style // / Common CSS ├─ utils/ // Tools Function Directory ├─ views/ // Page Component Directory ├─ app.vue ├─ main.ts ├─ shims-vue.d.s ├─ index.html ├─ ├─ ├─ ├─ ├─ ├─ ├─ package.json // ├─ ├─ ├── ├.config.ts // Vite ├─ package.jsonCopy the code