小聊： 本次記錄一次使用Nuxt3搭建前端項(xiàng)目的過程，內(nèi)容包含Nuxt3的安裝，基于Vite腳手架（默認(rèn)）構(gòu)建的vue3項(xiàng)目，element-plus的安裝配置（可選），scss的安裝（可選），目錄結(jié)構(gòu)的創(chuàng)建和解釋。項(xiàng)目搭建前，可以先了解一下 Nuxt3：《Nuxt3重點(diǎn)特性使用舉例記錄》

1. Nuxt3的安裝

前提，確保有Nuxt3的安裝環(huán)境

Node.js（必要）
Visual Studio Code（推薦）
Volar（推薦）

node.js 版本之間有差異，安裝Nuxt3目前官方推薦 v14 和 v16，或更高的版本。

1.1. 安裝新建Nuxt3 項(xiàng)目

首先在你的Nuxt3工作空間下新建一個(gè)Nuxt3項(xiàng)目，打開項(xiàng)目空間文件夾，在項(xiàng)目空間文件夾路徑輸入 cmd 或 powershell + 回車，打開命令窗口

安裝方式

1）方式一：npx 安裝

npx 是 npm5.2 之后發(fā)布的一個(gè)命令，可以代替 npm 命令安裝依賴或包。

npx nuxi init nuxt-app   # nuxt-app 是項(xiàng)目名

1）方式二：pnpm 安裝

pnpm 是 Node.js 的替代包管理器。它是 npm 的直接替代品，但速度更快、效率更高。

pnpm dlx nuxi init nuxt-app   # nuxt-app 是項(xiàng)目名

因?yàn)?pnpm 和 npm 不是同一個(gè)東西，需要另外安裝。如果你沒有，可以建議安裝使用。直接使用 npx 或 npm 安裝 pnpm，（也可以開啟 node 的包管理器 Corepack 自動(dòng)裝配它。下文的拓展： Corepack 自動(dòng)裝載 pnpm）

安裝 pnpm

npm install -g pnpm
或
npx pnpm add -g pnpm

注意

命令中的 nuxt-app 就是項(xiàng)目包名，也就是說，你在安裝nuxt3 的同時(shí)會(huì)生成一個(gè)項(xiàng)目包，項(xiàng)目可自定義，如果剛開始定義包名是這個(gè)，也可以把項(xiàng)目刪了重新新建項(xiàng)目。

沒錯(cuò)，它的安裝便是新建一個(gè) Nuxt3 項(xiàng)目，中間不需要你選任何工具的配置，它已經(jīng)默認(rèn)幫你打造了一套優(yōu)質(zhì)舒適的開發(fā)環(huán)境。工具選擇詳情可見官網(wǎng)：Nuxt3官網(wǎng)

1.2. Nuxt3的啟動(dòng)使用

本人項(xiàng)目啟動(dòng)使用 VS Code 演示。

進(jìn)入項(xiàng)目目錄

cd nuxt-app

使用 code . VSCode 內(nèi)置命令，用VScode打開該項(xiàng)目

code .

示例：

說明：圖中的 ERROR 不是安裝失敗，是警告提示：“ExperimentalWarning: Fetch API是一個(gè)實(shí)驗(yàn)性的特性。這個(gè)特性隨時(shí)都可能改變”。Fetch API 是提供了一個(gè)獲取資源的接口，本項(xiàng)目創(chuàng)建是通過它去請求的，算是實(shí)驗(yàn)性使用，和項(xiàng)目本身沒多大關(guān)系，能正常下載來 Nuxt3 項(xiàng)目就行。

另外，如果刪除了項(xiàng)目再創(chuàng)建同一個(gè)名字的項(xiàng)目失敗的話，換一個(gè)項(xiàng)目名就好了。

1.3. Nuxt3 運(yùn)行端口

Nuxt3 使用 npm run dev 運(yùn)行端口，但首先，我們得先打開 Terminal 輸入 npm install 下載依賴

npm install

運(yùn)行 cmd 命令啟動(dòng)服務(wù)

npm run dev

或者使用圖形化命令 npm scripts

訪問：http://localhost:3000/

目前為止，我們就可以開始開發(fā)Nuxt3項(xiàng)目啦。

2. element-plus的安裝配置

安裝命令

npm install element-plus
npm install @element-plus/icons-vue

配置

因?yàn)?element-plus 屬于第三方插件，需要在 plugins 目錄配置

新建 plugins 目錄， 在目錄下新建 element-plus.client.ts 文件（注意：默認(rèn)必須在 plugins 下新建配置文件，這是“約定”，詳情見 官網(wǎng)）

我這里使用命令創(chuàng)建，當(dāng)然，手動(dòng)在項(xià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 啟動(dòng)項(xiàng)目，訪問 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 啟動(dòng)項(xiàng)目，訪問 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>

至此，本項(xiàng)目使用基本演示結(jié)束。

4. 拓展：Corepack 自動(dòng)裝載 pnpm

從 node v16.13 開始，Node.js 發(fā)布了用于管理包的管理器 Corepack，它可以管理 pnpm，但因?yàn)?Corepack 這是一項(xiàng)實(shí)驗(yàn)性功能，沒有默認(rèn)開啟，所以你需要通過運(yùn)行以下命令來啟用它，啟用它之后，就會(huì)自動(dòng)裝載 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項(xiàng)目搭建（Nuxt3+element-plus+scss詳細(xì)步驟）的文章就介紹到這了,更多相關(guān)Nuxt3項(xiàng)目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論