Note: Make sure your node version >= 12.0.0 and run node-v on the command line to check the node version

I. Construction project

Use NPM: NPM init. vitejs/app project-name project-name is the project name

Using YARN: yarn create @vitejs/app project-name project-name is the name of the project

2. Configure vite. Config. ts

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import path from "path"


// https://vitejs.dev/config/

export default defineConfig({

  plugins: [vue()],

  base: ". /".resolve: {

    alias: {

      NPM install @types/node --save-dev if __dirname cannot be found, install node

      "@": path.resolve(__dirname, "./src"),

      "@assets": path.resolve(__dirname, "./src/assets"),

      "@components": path.resolve(__dirname, "./src/components"),

      "@views": path.resolve(__dirname, "./src/views"),

      "@store": path.resolve(__dirname, "./src/store"),}},build: {

    outDir: "dist",},server: {

    https: false.// Whether to enable HTTPS

    open: false.// Whether to open automatically in the browser

    port: 8001./ / the port number

    host: "0.0.0.0".proxy: {

      "/api": {

        target: "".// Background interface

        changeOrigin: true.secure: false.// If the interface is HTTPS, you need to set this parameter

        // ws: true, //websocket support

        rewrite: (path) = > path.replace(/^\/api/.""),}}},// Import third-party configuration

  optimizeDeps: {

    include: [].}})Copy the code

Install the required component library

  1. Install vant
  • npm: npm i vant@next -S
  • yarn: yarn add vant@next

2. Install the vue – rouer

  • npm init vue-router@next -S
  • yarn add vue-router@next

3. Install vuex

  • npm init vuex@next -S
  • yarn add vuex@next