yarn add [package] // 会自动安装最新版本，会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package]@[version] // 添加指定版本的包
yarn add [package]@[tag]

2.2. 将依赖项添加到不同依赖项类别

不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型分别添加到 devDependencies、peerDependencies 和 optionalDependencies

yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependencies
yarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies
yarn add [package] --optional 或 yarn add [package]

2.3. 升级依赖包

yarn upgrade [package] // 升级到最新版本
yarn upgrade [package]@[version] // 升级到指定版本
yarn upgrade [package]@[tag]

2.4.移除依赖包

yarn remove [package]

2.5.安装package.json里的包依赖

yarn 或 yarn install

三、Vite

3.1. 简述

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：

快速的冷启动
即时的模块热更新
真正的按需编译
vite 的使用方式
同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，使用 yarn 在终端执行

3.2. 全局安装vite

npm install

3.3. 创建项目

yarn create vite-app <project-name>

3.4. 下载依赖

yarn

3.5. 运行项目

yarn dev

即可初始化一个 vite 项目（默认应用模板为 vue3.x），生成的项目结构十分简洁

|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json

执行 yarn dev 即可启动应用

3.6. 安装路由

npm install vue-router@next -S

# or
yarn add

安装路由，并且配置路由文件

history: createWebHashHistory() hash 模式
history:createWebHistory() 正常模式
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

3.7. 安装vuex

npm install vuex@next -S

# or
yarn add vuex@next -S

配置文件(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:{
        
    }
})

3.8. 安装sass

npm install sass -D

# or
yarn add

3.9. 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')

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