vite+vue3+ts Create a vue3 project

Recently, I started a new project. To build the front end, I wanted to record the process.

1. Create project vue3

npm create vite@latest 

yarn create vite

Here to see which package management tool you are using

Project name: The project name defines one by itself

select-vue

select-ts

Then you can, there is a built project locally

All the installations later can be operated in the editor terminal, which is more convenient

2. Install routing: router

 npm install vue-router@4

 yarn add vue-router@4 

Route import

Create a router folder under src, and build an index.ts in it

import {
    
     createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    
    
  history: createWebHistory(),
  routes: [
   
  ],
  //是否匹配末尾包含反斜杠的路径
  strict: true,
  // 切换页面，滚动到最顶部
  scrollBehavior: () => ({
    
     left: 0, top: 0 }),
});

export default router;

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

const app=createApp(App)
app.mount('#app')
app.use(router);

3. Install pinia

Vue3 is better with pinia, and vue2 can use vuex

 npm install pinia 
 
 yarn add pinia

Create a new folder in src: stores, and create a new file user.ts in it (just define the name as you like)

import {
    
     defineStore } from "pinia";

export const useUserInfo = defineStore({
    
    
  id: "userInfo",
  state: () => {
    
    
    return {
    
    
     info:{
    
    }
    };
  },
  getters: {
    
    
   
  },
  actions: {
    
    
    setUserInfo(info:object) {
    
    
      this.info = info;
    },
  },
});

main.ts

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
    
     createPinia } from "pinia";

const app=createApp(App)
app.mount('#app')
app.use(createPinia());

4. Install axios

It encapsulates a unified call, which can be packaged differently according to the needs of your own projects.

5. Installation: sass

npm add -D sass 

6. Install ant-design-vue

Just look at the UI framework you use and install it

npm install ant-design-vue --save
 
yarn add ant-design-vue

7. Add dependencies

It seems that it needs to be added, (vite first opens the interface to load slowly/solve)

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

8. Install [unplugin-vue-components]

The unplugin-vue-components plugin can automatically introduce components in the Vue file (including the project's own components and components in various component libraries. After using this plugin, you don't need to manually write import { Button } from 'ant-design-vue' With such code, the plug-in will automatically recognize the custom components used in the template and register them automatically.

import Components from "unplugin-vue-components/vite";
import {
    
     AntDesignVueResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
    
    
  plugins: [
    vue(),
    Components({
    
    
      resolvers: [AntDesignVueResolver()],
    }),
  ],

npm install unplugin-vue-components

yarn install unplugin-vue-components

9. Install eslint and eslint-plugin-vue

Grammar management and specification in development

10、安装：husky、Commitizen、@commitlint/config-conventional @commitlint/cli

Husky can prevent some bad commits or pushes using Git hooks, and requires blocking irregular code submissions before git commit.

npm install husky --save-dev

npm install commitizen -D

npm install --save-dev @commitlint/config-conventional @commitlint/cli

11. Open the page loading progress bar: nprogress, @types/nprogress

When you open a webpage, you will see a progress bar, and then the progress bar will disappear after the loading is complete. We use these most, NProgress.start() to open the progress bar, and NProgress.done() to complete the progress strip.

npm install nprogress @types/nprogress

Almost these are enough, and the rest can be installed according to your own needs.