Vue3+vite build project application

1. Build the project
1. Pay attention to the compatibility of Node:

Vite requires Node.js version >= 12.0.0! ! !

2. Create a project
using NPM:

npm init vite@latest

Using Yarn:

yarn create vite 
或者
yarn create vite vite-demo --template react-ts // 直接项目一步到位 项目名 使用的语言框架

Using PNPM:

pnpm create vite

Use either command to create your first project!

Here I take npm as an example to execute:

After entering npm init vite@latest, you will be prompted to enter the project name, framework, language js/ts, etc., as follows, and

then execute according to the process prompt in the above figure: 1. Switch to the project directory 2. Initialize the project (download dependencies) 3. Run the project
and finally the project runs successfully La!

Verify whether the operation is successful, enter the address in the above picture, and get the picture below, which means that the project has been built successfully.

All of our engineering systems are based on the Node.js ecosystem; we use VS Code+Volar editor+grammatical prompt tool as the upper layer development tool ; Use Vite as an engineering tool; use Chrome for debugging, these are all necessary tools for the Vue 3 engineering system.

3. Summary
After using vite to create a project, you will find that there are very few plug-ins in the vite project, and there are fewer optional operations compared to the vue-cli project. This is relatively troublesome, some configuration items need to be configured by ourselves;
finally attach the vite Chinese website, I believe that the follow-up vite will also add some optional configurations;
Vite Chinese website

2. Project configuration
Let's take a look at the file directory under vite-project. This directory is the skeleton of our project startup. The index.html in the directory is the project entry; package.json is the file for managing project dependencies and configuration; the public directory places static resources, such as logo and other pictures; vite.config.js is all engineering configuration related to Vite; src This is the focus of the work. Most of our code will be managed and written in the src directory, and we will refine the project specifications in the src directory later.
.
├── README.md
├── index.html entry file
├── package.json
├── public resource file
│ └── favicon.ico
├── src source code
│ ├── App.vue single file component
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ └── main.js entry
└── vite.config.js vite engineering configuration file

The project we developed is multi-page, so vue-router and Vuex have also become mandatory options, just like a team needs staffing ratio, Vue is responsible for the core, Vuex is responsible for managing data, and vue-router is responsible for managing routing. We use the following code to install Vuex and vue-router in the vite-project directory.

npm install vue-router@next vuex@next

Specifications for project files

├── src
│ ├── api data request
│ ├── assets static resource
│ ├── components component
│ ├── pages page
│ ├── router routing configuration
│ ├── store vuex data
│ └── utils tool function

Our page needs to introduce the routing system. We enter the router folder, create a new index.js, and write the following code:

import {
    
    
    createRouter,
    createWebHashHistory,
  } from 'vue-router'
  import Home from '../pages/home.vue'
  import About from '../pages/about.vue'
  
  const routes = [
    {
    
    
      path: '/',
      name: 'Home',
      component: Home
    },
    {
    
    
      path: '/about',
      name: 'About',
      component: About
    }
  ]
  
  const router = createRouter({
    
    
    history: createWebHashHistory(),
    routes
  })
  
  export default router
  

In the above code, we first introduced two functions, createRouter and createWebHashHistory. createRouter is used to create a new routing instance, and createWebHashHistory is used to configure our internal routing using hash mode, that is, the url will be distinguished by #.

Then create home.vue and about.vue pages (ie business pages, etc.), apply them to the project, and load the router configuration in main.js

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

import router from './router/index'
 createApp(App) 
       .use(router) 
       .mount('#app')

Then go to App.vue, we delete the code before the template, and add the following content:

<template>
  <div>
    <router-link to="/">首页</router-link> | 
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

The router-link and router-view in the code are global components registered by vue-router. router-link is responsible for jumping to different pages, which is equivalent to the hyperlink a tag in the Vue world; router-view is responsible for rendering route-matched components , we can realize the page layout of complex projects by placing router-view in different places.
Obtained:

A project basically has a prototype from the time it is built to the application.
Of course, we can also have some project configurations, such as relying on plug-ins, configurations of multiple operating environments, etc., please refer to my next article
Vue3 project configuration