欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Nuxt3項目搭建過程(Nuxt3+element-plus+scss詳細(xì)步驟)

 更新時間:2022年12月22日 13:24:07   作者:白憶宇  
這篇文章主要介紹了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搭建前端項目的過程,內(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 安裝

npxnpm5.2 之后發(fā)布的一個命令,可以代替 npm 命令安裝依賴或包。

npx nuxi init nuxt-app   # nuxt-app 是項目名

1)方式二:pnpm 安裝

pnpmNode.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問題及解決

    這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析

    Vue集成three.js并加載glb、gltf、FBX、json模型的場景分析

    這篇文章主要介紹了Vue集成three.js,并加載glb、gltf、FBX、json模型,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • Vue之常用的內(nèi)置指令詳解

    Vue之常用的內(nèi)置指令詳解

    這篇文章主要為大家介紹了Vue之常用的內(nèi)置指令,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • vue實現(xiàn)用戶動態(tài)權(quán)限登錄的代碼示例

    vue實現(xiàn)用戶動態(tài)權(quán)限登錄的代碼示例

    這篇文章主要介紹了vue如何實現(xiàn)用戶動態(tài)權(quán)限登錄,文中的代碼示例介紹的非常詳細(xì),對大家學(xué)習(xí)vue有一定的幫助,需要的朋友可以參考閱讀
    2023-05-05
  • 使用mockjs如何生成隨機(jī)數(shù)據(jù)

    使用mockjs如何生成隨機(jī)數(shù)據(jù)

    Mockjs是一個用于生成隨機(jī)數(shù)據(jù)和攔截Ajax請求的庫,可以與Vue和Axios結(jié)合使用,提高前端開發(fā)效率,通過在項目中引入Mock.js文件,可以模擬后端API,攔截Ajax請求并返回自定義響應(yīng),這種方法適用于在后端尚未開發(fā)完成時的前端開發(fā)測試
    2024-10-10
  • Vue中請求本地JSON文件并返回數(shù)據(jù)的方法實例

    Vue中請求本地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-08
  • create?vite?實例源碼解析

    create?vite?實例源碼解析

    這篇文章主要為大家介紹了create?vite?實例源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • 基于Vue SEO的四種方案(小結(jié))

    基于Vue SEO的四種方案(小結(jié))

    這篇文章主要介紹了基于Vue SEO的四種方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • vue實現(xiàn)表單數(shù)據(jù)的增刪改功能

    vue實現(xiàn)表單數(shù)據(jù)的增刪改功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單數(shù)據(jù)的增刪改功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue如何實現(xiàn)動態(tài)加載腳本

    vue如何實現(xiàn)動態(tài)加載腳本

    這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-02-02

最新評論