一、插件安装

安装项目生产依赖 -S 所有环境都需要依赖
安装项目开发依赖 -D 只有开发环境需要

1. vue-router

yarn add vue-router@next -S

2. vuex

yarn add vuex@next -S

3. element-plus

yarn add element-plus -S

4. axios

yarn add axios -S

5. sass

yarn add sass -D

yarn create @vitejs/app manager-fe

二、Yarn 常用命令

2.1. 添加依赖包

yarn add [package] // 会自动安装最新版本，会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package]@[version] // 添加指定版本的包
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）

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] -O // 加到 optionalDependencies

2.3. 升级依赖包

yarn upgrade [package] // 升级到最新版本
yarn upgrade [package]@[version] // 升级到指定版本
yarn upgrade [package]@[tag] // 升级到指定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 create-vite-app -g

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 vue-router@next -S

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

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 default router

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 sass -D

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