詳解如何創(chuàng)建基于vite的vue項目
一、環(huán)境
安裝Node.js
Node.js環(huán)境可以使在系統(tǒng)上運行js代碼
1.下載鏡像文件：https://nodejs.org/download/release/v18.8.0/node-v18.8.0-x64.msi
2.按照安裝向導完成node.js的安裝
3.驗證是否安裝好：打開Windows的cmd命令行，輸入npm --version，輸出版本信息則安裝成功，如下圖所示
安裝yarn工具
node.js自帶npm包管理工具，yarn也是nodejs下的包管理工具，可以根據(jù)自身選擇適合的工具
1.在cmd命令行輸入：npm install yarn -g，進行全局安裝
2.檢驗是否安裝好：在cmd命令行中輸入yarn -version，若輸出版本信息則表示安裝成功，如下圖所示
二、創(chuàng)建項目
1.在想要創(chuàng)建項目的目錄下進入命令行，輸入：yarn create vite 項目名
選擇框架：
選擇屬性：
2.進入項目目錄，輸入：cd 項目名
3.安裝依賴，輸入：yarn
4.運行項目，輸入：yarn dev --> 打開一個localhost:5173
5.將地址輸入瀏覽器訪問，下圖為初始頁面
三、項目目錄梳理
項目初始目錄結構
| public | 靜態(tài)資源（圖片、js文件）目錄 | |
| src | assets | 靜態(tài)資源目錄 |
| components | 組件目錄 | |
| main.js | 入口文件 | |
| App.vue | 根組件 | |
| node_modules | 項目依賴包 | |
| index.html | 默認vue的掛載元素 | |
| package.json | 當前項目基本信息、項目依賴信息、命令管理工具配置 | |
| vite.config.js | 整個項目的配置信息 | |
| yarn.lock | yarn指令運行的時候記錄的信息 | |
項目加載過程
當使用yarn dev運行項目時，它會讀取package.json文件中的scripts定義的命令去調(diào)用對應的指令
然后會讀取入口文件：src/main.js
- 導入vue及自定義組件
- 實例化一個Vue，并掛載app到index.html文件的id為app的元素上
四、集成UI組件庫vant
配置按需加載Vant
1.安裝模塊
//安裝vant yarn add vant //按需加載模塊 yarn add unplugin-vue-components -D
2.在vite.config.js文件中配置按需加載
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
],
});使用組件
完成vant的安裝與配置就可以直接在模板中使用Vant組件了unplugin-vue-components會解析模板并自動注冊對應組件
Vant官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN
在src/App.vue中使用組件 ：
<template>
<van-button type="primary">主要按鈕</van-button>
</template>
引入函數(shù)組件的樣式
Vant 中有個別組件是以函數(shù)的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 組件
在需要的位置導入并使用即可
// Toast
import { showToast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { showNotify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { showImagePreview } from 'vant';
import 'vant/es/image-preview/style';五、集成UI組件庫NutUI
配置按需加載NutUI
1.安裝
yarn add @nutui/nutui
2.安裝插件NutUI樣式按需加載插件
yarn add consola yarn add vite-plugin-style-import
3.在vite.config.js文件中配置NutUI樣式按需加載
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
// add here
import { createStyleImportPlugin } from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [VantResolver()],
}),
// add here
createStyleImportPlugin({
resolves: [{
libraryName: '@nutui/nutui',
libraryNameChangeCase: 'pascalCase',
resolveStyle: (name) => {
return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`
},
}]
}),
],
// add here
css: {
preprocessorOptions: {
scss: {
// 配置 nutui 全局 scss 變量
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
}
}
},
})使用組件
NutUI組件官方文檔：https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/button
NutUI不會像Vant一樣自動導入，NutUI的按需自動加載只有樣式文件，所以需要我們手動導入。
使用組件定義要加載的組件：
在src下新建plugins/nutui.js，以后需要增加組件只需要在該文件中添加即可
//用于定義要加載的組件名
import {
Button,
}from '@nutui/nutui'
//export導出，只有導出了，才能讓別的文件進行import
export const nutUiComponents = [
Button,
];在src/main.js文件中導入
//添加導入
import { nutUiComponents } from './plugins/nutUI';
//基于App.vue(根組件)創(chuàng)建一個vue實例
const app = createApp(App)
//全局使用導入的NutUI組件
nutUiComponents.forEach((item)=>{
app.use(item)
})
//把vue實例掛載到index.html => #app
app.mount('#app')在根組件App.vue中使用
<template>
<nut-button type="primary">主要按鈕</nut-button>
</template>
六、常見錯誤
頁面出現(xiàn)一片空白或頁面無變化的解決措施：
代碼有誤時，運行yarn dev的時候會提示出來yarn dev為熱加載不穩(wěn)定，在命令行按Ctrl+c中斷，重新yarn dev
總結
到此這篇關于如何創(chuàng)建基于vite的vue項目的文章就介紹到這了,更多相關創(chuàng)建vite的vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue中實現(xiàn)拖動調(diào)整左右兩側div的寬度的示例代碼
這篇文章主要介紹了vue中實現(xiàn)拖動調(diào)整左右兩側div的寬度的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了vue2.0 路由模式mode="history"的作用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)側邊菜單欄的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
VUE2舊項目重新安裝依賴后@vue/compiler-sfc編譯報錯問題
在VUE2舊項目中重新安裝依賴后,如果遇到@vue/compiler-sfc編譯報錯,首先需要檢查package.json文件中的Vue版本是否升級到2.7版本,2.7版本的編譯插件不再支持/deep/這種樣式穿透,版本^和~的區(qū)別在于^只能鎖住第一位數(shù)2025-01-01
Elementui按鈕設置默認選中狀態(tài)的實現(xiàn)過程
這篇文章主要給大家介紹了關于Elementui按鈕設置默認選中狀態(tài)的實現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細,對大家學習或者使用Elementui具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關于如何快速將Vue項目升級到webpack3的方法步驟文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-09-09
這篇文章主要介紹了關于vue-treeselect綁值、回顯等常見問題的總結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
隨著前端技術的飛速發(fā)展,Vue.js作為一個流行的JavaScript框架,已經(jīng)被廣泛應用于構建現(xiàn)代Web應用,然而,隨著應用的復雜性和規(guī)模的增加,性能優(yōu)化也成為開發(fā)者必須面對的重要任務,在本篇博客中,我們將探討幾種常用的Vue性能優(yōu)化方法,需要的朋友可以參考下2024-12-12
Vue.js中自定義Markdown插件實現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個插件來解析<references>標簽,并將其轉換為HTML,這種方法可以應用于其他自定義標簽和功能,為Vue.js應用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧2024-07-07