yarn

Official Guide

English official website: Yarn English website

Chinese Documents: Yarn Chinese Documents

Advantages of Yarn

Fast: Yarn caches each downloaded package, so you don't need to download it again. It also uses parallel downloads to maximize resource utilization, so installation is faster.

Reliable: Using a detailed, concise lock file format and a clear installation algorithm, Yarn ensures that no differences are made between systems.

Security: Yarn checks the integrity of each installation package through an algorithm before executing the code.

Windows Install Yarn

Download Setup Package Installation

Click me to download the Yarn installation package , you will download to a.msi file and when it runs it will guide you to install Yarn on Windows. If you use this setup, you will need to install it first Node.js.

View version after successful installation

yarn --version

Common Yarn Commands

[1] Initialize a new project

yarn init

[2] Add Dependent Packages

yarn add [package] // The latest version will be installed automatically, overwriting the specified version number
yarn add [package] [package] [package] // Add multiple packages at once
yarn add [package]@[version] // Add a package of the specified version
yarn add [package]@[tag] // Install a tag (such as beta,next, or latest)

[3] Add dependencies to different dependency categories

You can also specify dependency types to be added to devDependencies, peerDependencies, and optionalDependencies, respectively.

yarn add [package] --dev or yarn add [package] -D // Add to devDependencies
yarn add [package] --peer or yarn add [package] -P // Add to peerDependencies
yarn add [package] --optional or yarn add [package] -O // Add to optionalDependencies

[4] Upgrade dependent packages

yarn upgrade [package] // Upgrade to the latest version
yarn upgrade [package]@[version] // Upgrade to specified version
yarn upgrade [package]@[tag] // Upgrade to specified tag

[5] Remove dependent packages

yarn remove [package] // Remove Package

[6] Install the package dependencies in package.json and save the package and all its dependencies in yarn.lock

yarn or yarn install // Install all dependencies
yarn install --flat // Install a single version of a package
yarn install --force // Force all packages to be downloaded again
yarn install --production // Install only production environment dependencies

[7] Publish packages

yarn publish

[8] Run the script

yarn run // Used to execute scripts defined under the scripts property in package.json

[9] Display information about a package

yarn info [package] // Can be used to view the latest version information for a module

[10] Cache

yarn cache
yarn cache list // List each package that has been cached
yarn cache dir // Return to Global Cache Location
yarn cache clean // Clear Cache

Vite

vite, a web development tool developed by vue author Yuyuxi, has the following characteristics:

1. Fast cold start
2. Instant hot module updates
3. True on-demand compilation

How vite is used

As with common development tools, vite provides a way to build project structures with npm or yarn and execute them on a terminal using yarn

Create Project

Global Installation vite:

npm install create-vite-app -g

Create a project:

yarn create vite-app <project-name>

Enter directory:

cd <project-name>

Download dependency:

yarn

Run the project:

yarn dev

You can initialize a vite project (the default application template is vue3.x), and the resulting project structure is very concise

|____node_modules
|____App.vue // Application Entry
|____index.html // Page Entry
|____vite.config.js // configuration file
|____package.json

Start the application by executing yarn dev

Install Route

npm install vue-router@next -S

Install routes and configure routing files

history: createWebHashHistory() hash mode

history:createWebHistory() normal mode

src/router/index.js

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

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/Home',
            name:'name',
            component:()=>import('../pages/Home.vue')
        }
    ],
})

export default router

Install vuex

npm install vuex@next -S 

Configuration file (src/store/index.js)

import { createStore } from 'vuex'

export default createStore({
    state:{
        test:{
            a:1
        }
    },
    mutations:{
        setTestA(state,value){
          state.test.a = value 
        }
    },
    actions:{

    },
    modules:{
        
    }
})

Install sass

npm install sass -D

configuration file

main.js

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './index.css'

createApp(App).
use(router).
use(store).
mount('#app')

Note: This is what Huang Gangan learned by watching videos on various websites at night. If the same, please contact me to delete it! Ali Gado
Note: I haven't finished writing notes yet. Synchronize updates