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