yarn vite vue3.x

文章目录

• ​​一、插件安装​​

• ​​1. vue-router​​
• ​​2. vuex​​
• ​​3. element-plus​​
• ​​4. axios​​
• ​​5. sass​​

• ​​二、Yarn 常用命令​​

• ​​2.1. 添加依赖包​​
• ​​2.2. 将依赖项添加到不同依赖项类别​​
• ​​2.3. 升级依赖包​​
• ​​2.4.移除依赖包​​
• ​​2.5.安装package.json里的包依赖​​

• ​​三、Vite​​

• ​​3.1. 简述​​
• ​​3.2. 全局安装vite​​
• ​​3.3. 创建项目​​
• ​​3.4. 下载依赖​​
• ​​3.5. 运行项目​​
• ​​3.6. 安装路由​​
• ​​3.7. 安装vuex​​
• ​​3.8. 安装sass​​
• ​​3.9. main.js​​

一、插件安装

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

安装项目开发依赖 -D 只有开发环境需要

1. vue-router

yarn add      

2. vuex

yarn add      

3. element-plus

yarn add      

4. axios

yarn add      

5. sass

yarn add      

yarn      

二、Yarn 常用命令

2.1. 添加依赖包

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      

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

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