文章目錄

• • • • • 一、插件安裝
        • • 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 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')

總結

以上是生活随笔為你收集整理的yarn vite vue3.x的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。