Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)
小聊: 本次記錄一次使用Nuxt3搭建前端項目的過程,內(nèi)容包含Nuxt3的安裝,基于Vite腳手架(默認(rèn))構(gòu)建的vue3項目,element-plus的安裝配置(可選),scss的安裝(可選),目錄結(jié)構(gòu)的創(chuàng)建和解釋。項目搭建前,可以先了解一下 Nuxt3:《Nuxt3重點(diǎn)特性使用舉例記錄》
1. Nuxt3的安裝
前提,確保有Nuxt3的安裝環(huán)境
Node.js(必要) Visual Studio Code(推薦) Volar(推薦)
node.js 版本之間有差異,安裝Nuxt3目前官方推薦 v14 和 v16,或更高的版本。
1.1. 安裝新建Nuxt3 項目
首先在你的Nuxt3工作空間下新建一個Nuxt3項目,打開項目空間文件夾,在項目空間文件夾路徑輸入 cmd 或 powershell + 回車,打開命令窗口
安裝方式
1)方式一:npx 安裝
npx
是 npm5.2
之后發(fā)布的一個命令,可以代替 npm
命令安裝依賴或包。
npx nuxi init nuxt-app # nuxt-app 是項目名
1)方式二:pnpm 安裝
pnpm
是 Node.js
的替代包管理器。它是 npm
的直接替代品,但速度更快、效率更高。
pnpm dlx nuxi init nuxt-app # nuxt-app 是項目名
因為 pnpm 和 npm 不是同一個東西,需要另外安裝。如果你沒有,可以建議安裝使用。直接使用 npx 或 npm 安裝 pnpm,(也可以開啟 node 的包管理器 Corepack
自動裝配它。下文的拓展: Corepack 自動裝載 pnpm)
安裝 pnpm
npm install -g pnpm 或 npx pnpm add -g pnpm
注意
命令中的 nuxt-app
就是項目包名,也就是說,你在安裝nuxt3 的同時會生成一個項目包,項目可自定義,如果剛開始定義包名是這個,也可以把項目刪了重新新建項目。
沒錯,它的安裝便是新建一個 Nuxt3
項目,中間不需要你選任何工具的配置,它已經(jīng)默認(rèn)幫你打造了一套優(yōu)質(zhì)舒適的開發(fā)環(huán)境。工具選擇詳情可見官網(wǎng):Nuxt3官網(wǎng)
1.2. Nuxt3的啟動使用
本人項目啟動使用 VS Code 演示。
進(jìn)入項目目錄
cd nuxt-app
使用 code .
VSCode 內(nèi)置命令,用VScode打開該項目
code .
示例:
說明:圖中的 ERROR
不是安裝失敗,是警告提示:“ExperimentalWarning: Fetch API是一個實驗性的特性。這個特性隨時都可能改變”。Fetch API
是提供了一個獲取資源的接口,本項目創(chuàng)建是通過它去請求的,算是實驗性使用,和項目本身沒多大關(guān)系,能正常下載來 Nuxt3
項目就行。
另外,如果刪除了項目再創(chuàng)建同一個名字的項目失敗的話,換一個項目名就好了。
1.3. Nuxt3 運(yùn)行端口
Nuxt3 使用 npm run dev
運(yùn)行端口,但首先,我們得先打開 Terminal
輸入 npm install
下載依賴
npm install
運(yùn)行 cmd
命令啟動服務(wù)
npm run dev
或者使用圖形化命令 npm scripts
訪問:http://localhost:3000/
目前為止,我們就可以開始開發(fā)Nuxt3項目啦。
2. element-plus的安裝配置
安裝命令
npm install element-plus npm install @element-plus/icons-vue
配置
因為 element-plus
屬于第三方插件,需要在 plugins
目錄配置
新建 plugins
目錄, 在目錄下新建 element-plus.client.ts
文件(注意:默認(rèn)必須在 plugins
下新建配置文件,這是“約定”,詳情見 官網(wǎng))
我這里使用命令創(chuàng)建,當(dāng)然,手動在項目根目錄下創(chuàng)建也好。(關(guān)于為什么要加 .client
感興趣請看:《前端渲染CSR和SSR的結(jié)合使用分析》)
mkdir plugins cd .\plugins\ new-item element-plus.client.ts // powershell命令創(chuàng)建文件(cmd命令不同:type nul> element-plus.client.ts)
在 element-plus.client.ts
中配置全局
import * as ElementPlus from 'element-plus/dist/index.full' import zhCn from 'element-plus/es/locale/lang/zh-cn' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(ElementPlus, { locale: zhCn, }) })
在 nuxt.config.ts
中全局配置樣式 css
的位置
export default defineNuxtConfig({ css:[ 'element-plus/dist/index.css', ] })
2.1. 演示使用
打開 app.vue
,初始內(nèi)容如下,<NuxtWelcome />
是官方的歡迎頁面
<template> <div> <NuxtWelcome /> </div> </template>
替換成使用 element-plus
的代碼查看是否安裝配置成功
<template> <div> <el-row class="mb-4"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> </el-row> <br /> <el-row> <el-button :icon="Search" circle /> <el-button type="primary" :icon="Edit" circle /> <el-button type="success" :icon="Check" circle /> <el-button type="info" :icon="Message" circle /> <el-button type="warning" :icon="Star" circle /> <el-button type="danger" :icon="Delete" circle /> </el-row> </div> </template> <script lang="ts" setup> import { Check, Delete, Edit, Message, Search, Star, } from "@element-plus/icons-vue"; </script> <style> body { background-color: #000000; } </style>
npm run dev
啟動項目,訪問 http://localhost:3000/
3. scss安裝和全局變量配置
安裝
npm install sass --save-dev
3.1. 使用
在 app.vue
中使用
<style lang="scss"> $bgColor: pink; body { background-color: $bgColor; } </style>
npm run dev
啟動項目,訪問 http://localhost:3000/
3.2. 外部導(dǎo)入使用
在根目錄下兩層新建文件夾 assets\styles
,在 styles
下新建 default.scss
在 default.scss
中寫
$bgColor: skyblue;
在 app.vue
中使用
<style lang="scss"> // $bgColor: pink; @import "~/assets/styles/default.scss"; body { background-color: $bgColor; } </style>
3.3. 全局配置使用
在 nuxt.config.ts
中配置
export default defineNuxtConfig({ css:[ 'element-plus/dist/index.css', ], vite: { css: { preprocessorOptions: { scss: { additionalData: '@use "@/assets/styles/default.scss" as *;' // 注意文件路徑要配成自己的 } } } } })
在 default.scss
中寫
$bgColor: orange;
在 app.vue
中使用
<style lang="scss"> // $bgColor: pink; // @import "~/assets/styles/default.scss"; body { background-color: $bgColor; } </style>
至此,本項目使用基本演示結(jié)束。
4. 拓展:Corepack 自動裝載 pnpm
從 node v16.13
開始,Node.js
發(fā)布了用于管理包的管理器 Corepack
,它可以管理 pnpm
,但因為 Corepack
這是一項實驗性功能,沒有默認(rèn)開啟,所以你需要通過運(yùn)行以下命令來啟用它,啟用它之后,就會自動裝載 pnpm
了。
corepack enable
但是,它小有可能不是最新版本的 pnpm。要升級它,去 官網(wǎng)github 查看是否是最新版本,并使用下列命令檢查并切換你想要的 pnpm
版本并運(yùn)行。
corepack prepare pnpm@<version> --activate
示例:
C:\Users\Admini>pnpm -v 'pnpm' 不是內(nèi)部或外部命令,也不是可運(yùn)行的程序 或批處理文件。 C:\Users\Admini>corepack enable C:\Users\Admini>pnpm -v 7.13.3 C:\Users\Admini>corepack prepare pnpm@7.13.4 --activate Preparing pnpm@7.13.4 for immediate activation... C:\Users\Admini>pnpm -v 7.13.4
到此這篇關(guān)于Nuxt3項目搭建(Nuxt3+element-plus+scss詳細(xì)步驟)的文章就介紹到這了,更多相關(guān)Nuxt3項目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析
這篇文章主要介紹了Vue集成three.js,并加載glb、gltf、FBX、json模型,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09vue實現(xiàn)用戶動態(tài)權(quán)限登錄的代碼示例
這篇文章主要介紹了vue如何實現(xiàn)用戶動態(tài)權(quán)限登錄,文中的代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)vue有一定的幫助,需要的朋友可以參考閱讀2023-05-05Vue中請求本地JSON文件并返回數(shù)據(jù)的方法實例
在前端開發(fā)過程當(dāng)中,當(dāng)后臺服務(wù)器開發(fā)數(shù)據(jù)還沒完善,沒法與咱們交接時,咱們習(xí)慣在本地寫上一個json文件做模擬數(shù)據(jù)測試代碼效果是否有問題,下面這篇文章主要給大家介紹了關(guān)于Vue中請求本地JSON文件并返回數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08vue實現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單數(shù)據(jù)的增刪改功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03