詳解如何創(chuàng)建基于vite的vue項(xiàng)目
一、環(huán)境
安裝Node.js
Node.js環(huán)境可以使在系統(tǒng)上運(yùn)行js代碼
1.下載鏡像文件：https://nodejs.org/download/release/v18.8.0/node-v18.8.0-x64.msi
2.按照安裝向?qū)瓿蒼ode.js的安裝
3.驗(yàn)證是否安裝好：打開Windows的cmd命令行，輸入npm --version，輸出版本信息則安裝成功，如下圖所示
安裝yarn工具
node.js自帶npm包管理工具，yarn也是nodejs下的包管理工具，可以根據(jù)自身選擇適合的工具
1.在cmd命令行輸入：npm install yarn -g，進(jìn)行全局安裝
2.檢驗(yàn)是否安裝好：在cmd命令行中輸入yarn -version，若輸出版本信息則表示安裝成功，如下圖所示
二、創(chuàng)建項(xiàng)目
1.在想要?jiǎng)?chuàng)建項(xiàng)目的目錄下進(jìn)入命令行，輸入：yarn create vite 項(xiàng)目名
選擇框架：
選擇屬性：
2.進(jìn)入項(xiàng)目目錄，輸入：cd 項(xiàng)目名
3.安裝依賴，輸入：yarn
4.運(yùn)行項(xiàng)目，輸入：yarn dev --> 打開一個(gè)localhost:5173
5.將地址輸入瀏覽器訪問，下圖為初始頁面
三、項(xiàng)目目錄梳理
項(xiàng)目初始目錄結(jié)構(gòu)
| public | 靜態(tài)資源（圖片、js文件）目錄 | |
| src | assets | 靜態(tài)資源目錄 |
| components | 組件目錄 | |
| main.js | 入口文件 | |
| App.vue | 根組件 | |
| node_modules | 項(xiàng)目依賴包 | |
| index.html | 默認(rèn)vue的掛載元素 | |
| package.json | 當(dāng)前項(xiàng)目基本信息、項(xiàng)目依賴信息、命令管理工具配置 | |
| vite.config.js | 整個(gè)項(xiàng)目的配置信息 | |
| yarn.lock | yarn指令運(yùn)行的時(shí)候記錄的信息 | |
項(xiàng)目加載過程
當(dāng)使用yarn dev運(yùn)行項(xiàng)目時(shí)，它會(huì)讀取package.json文件中的scripts定義的命令去調(diào)用對(duì)應(yīng)的指令
然后會(huì)讀取入口文件：src/main.js
- 導(dǎo)入vue及自定義組件
- 實(shí)例化一個(gè)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會(huì)解析模板并自動(dòng)注冊(cè)對(duì)應(yīng)組件
Vant官方文檔：https://vant-contrib.gitee.io/vant/#/zh-CN
在src/App.vue中使用組件 ：
<template>
<van-button type="primary">主要按鈕</van-button>
</template>
引入函數(shù)組件的樣式
Vant 中有個(gè)別組件是以函數(shù)的形式提供的，包括 Toast，Dialog，Notify 和 ImagePreview 組件
在需要的位置導(dǎo)入并使用即可
// 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不會(huì)像Vant一樣自動(dòng)導(dǎo)入，NutUI的按需自動(dòng)加載只有樣式文件，所以需要我們手動(dòng)導(dǎo)入。
使用組件定義要加載的組件：
在src下新建plugins/nutui.js，以后需要增加組件只需要在該文件中添加即可
//用于定義要加載的組件名
import {
Button,
}from '@nutui/nutui'
//export導(dǎo)出，只有導(dǎo)出了，才能讓別的文件進(jìn)行import
export const nutUiComponents = [
Button,
];在src/main.js文件中導(dǎo)入
//添加導(dǎo)入
import { nutUiComponents } from './plugins/nutUI';
//基于App.vue(根組件)創(chuàng)建一個(gè)vue實(shí)例
const app = createApp(App)
//全局使用導(dǎo)入的NutUI組件
nutUiComponents.forEach((item)=>{
app.use(item)
})
//把vue實(shí)例掛載到index.html => #app
app.mount('#app')在根組件App.vue中使用
<template>
<nut-button type="primary">主要按鈕</nut-button>
</template>
六、常見錯(cuò)誤
頁面出現(xiàn)一片空白或頁面無變化的解決措施：
代碼有誤時(shí)，運(yùn)行yarn dev的時(shí)候會(huì)提示出來yarn dev為熱加載不穩(wěn)定，在命令行按Ctrl+c中斷，重新yarn dev
總結(jié)
到此這篇關(guān)于如何創(chuàng)建基于vite的vue項(xiàng)目的文章就介紹到這了,更多相關(guān)創(chuàng)建vite的vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- 如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目
- Vite創(chuàng)建Vue3項(xiàng)目及Vue3使用jsx詳解
- 使用vite創(chuàng)建vue3項(xiàng)目的詳細(xì)圖文教程
- vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
- 利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個(gè)小BUG詳解
- Vue+vite創(chuàng)建項(xiàng)目關(guān)于vite.config.js文件的配置方法
- Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
相關(guān)文章
Element-ui el-tree新增和刪除節(jié)點(diǎn)后如何刷新tree的實(shí)例
這篇文章主要介紹了Element-ui el-tree新增和刪除節(jié)點(diǎn)后如何刷新tree的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue的Scroll滾動(dòng)事件觸發(fā)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在IDEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟
idea竟然有一個(gè)神功能很多朋友都不是特別清楚，下面小編給大家?guī)砹嗽贗DEA中Debug調(diào)試VUE項(xiàng)目的詳細(xì)步驟，感興趣的朋友一起看看吧2021-10-10
使用Vue進(jìn)行圖片壓縮的實(shí)現(xiàn)方案和對(duì)比
在 Vue 項(xiàng)目中處理用戶上傳的大圖片時(shí),通過前端壓縮減小圖片體積是優(yōu)化上傳體驗(yàn)的有效方式,本文將和大家介紹幾個(gè)具體實(shí)現(xiàn)方案及相關(guān)說明,希望對(duì)大家有所幫助2025-10-10
這篇文章主要給大家介紹了關(guān)于vue3中使用codemirror的詳細(xì)教程,CodeMirror是一款功能強(qiáng)大的代碼高亮插件,他不僅提供了高亮功能,其豐富的方法屬性也封裝了縮進(jìn)、自動(dòng)換行、獲取編輯文本、設(shè)置編輯文本、回退功能等多種實(shí)用效果,需要的朋友可以參考下2023-09-09
vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue模板配置與webstorm代碼格式規(guī)范設(shè)置
這篇文章主要介紹了vue模板配置與webstorm代碼格式規(guī)范設(shè)置詳細(xì)的相關(guān)資料,需要的朋友可以參考一下文章得具體內(nèi)容，希望對(duì)你有所幫助2021-10-10
vue實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車結(jié)算功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
今天小編就為大家分享一篇vue添加axios,并且指定baseurl的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09