Small chat: desta vez registra o processo de uso do Nuxt3 para construir um projeto front-end, incluindo a instalação do Nuxt3, o projeto vue3 construído com base no Vite scaffolding (padrão), a configuração de instalação do element-plus (opcional) e o instalação do scss (opcional), criação e interpretação de estruturas de diretórios. Antes de construir o projeto, você pode aprender sobre o Nuxt3 primeiro: "Nuxt3 Key Features Usage Example Record"
Índice
- 1. Instalação do Nuxt3
- 2. Instalação e configuração do element-plus
- 3. instalação scss e configuração de variável global
- 4. Expansão: o Corepack carrega automaticamente o pnpm
1. Instalação do Nuxt3
A premissa é garantir que haja um ambiente de instalação Nuxt3
Node.js（必要）
Visual Studio Code（推荐）
Volar（推荐）
Existem diferenças entre as versões do node.js. A recomendação oficial atual para instalação do Nuxt3 é v14 e v16, ou versões superiores.
1.1. Instale o novo projeto Nuxt3
Primeiro crie um novo projeto Nuxt3 em seu espaço de trabalho Nuxt3, abra a pasta do espaço do projeto, digite cmd ou powershell + digite no caminho da pasta do espaço do projeto e abra a janela de comando
- método de instalação
1) Método 1: instalação npx
npxé um comando emitido npm5.2depois que pode substituir npmo comando para instalar dependências ou pacotes.
npx nuxi init nuxt-app # nuxt-app 是项目名
1) Método 2: instalação pnpm
pnpmé Node.jsum gerenciador de pacotes alternativo para . É npmum substituto imediato para , mas é mais rápido e eficiente.
pnpm dlx nuxi init nuxt-app # nuxt-app 是项目名
Como pnpm e npm não são a mesma coisa, eles precisam ser instalados separadamente. Se você não tiver, pode sugerir a instalação. Instale o pnpm diretamente usando npx ou npm, (você também pode abrir o gerenciador de pacotes do nó para montá-lo Corepackautomaticamente . A expansão abaixo: Corepack carrega automaticamente o pnpm )
instalar pnpm
npm install -g pnpm
或
npx pnpm add -g pnpm
- Perceber
No comando nuxt-appestá o nome do pacote do projeto, ou seja, ao instalar o nuxt3, um pacote do projeto será gerado. O projeto pode ser customizado. Se o nome do pacote for definido no início, você também pode deletar o projeto e criar um novo.
Isso mesmo, sua instalação é para criar um novo Nuxt3projeto , e você não precisa escolher nenhuma configuração de ferramenta no meio, já criou um ambiente de desenvolvimento confortável e de alta qualidade para você por padrão. Os detalhes da seleção da ferramenta podem ser encontrados no site oficial: Site oficial do Nuxt3
1.2. Inicialização do Nuxt3
Meu projeto começa usando a demonstração do VS Code.
Entre no diretório do projeto
cd nuxt-app
Use code .os comandos integrados do VSCode para abrir o projeto com o VScode
code .
Exemplo:
Explicação: O na imagem ERRORnão é uma falha de instalação, mas um prompt de aviso: "ExperimentalWarning: Fetch API é um recurso experimental. Esse recurso pode mudar a qualquer momento." Fetch APIEle fornece uma interface para obtenção de recursos. Este projeto é criado através dele a pedido. É considerado um uso experimental e tem pouco a ver com o projeto em si. É bom baixar Nuxt3o projeto
Além disso, se a exclusão do projeto e a criação de um projeto com o mesmo nome falhar, basta alterar o nome do projeto.
1.3. Porta em execução Nuxt3
O Nuxt3 usa a porta npm run devem execução , mas primeiro temos que abrir a Terminalentrada para npm installbaixar as dependências
npm install
Execute cmdo comando para iniciar o serviço
npm run dev
ou use o comando gráficonpm scripts
Acesse: http://localhost:3000/
Até agora, podemos começar a desenvolver o projeto Nuxt3.
2. Instalação e configuração do element-plus
- comando de instalação
npm install element-plus
npm install @element-plus/icons-vue
- configuração
Por element-plusser um plug-in de terceiros, ele precisa pluginsser configurado no diretório
Crie um novo pluginsdiretório e crie um novo element-plus.client.tsarquivo no diretório (nota: por padrão, um novo arquivo de configuração deve ser criado pluginsem , que é um "acordo", consulte o site oficial para obter detalhes )
Eu uso o comando para criá-lo aqui. Claro, também é bom criá-lo manualmente no diretório raiz do projeto. (Quanto ao motivo pelo qual você deve adicioná-lo, se estiver .clientinteressado consulte: " Análise do uso combinado de CSR e SSR de renderização de front-end ")
mkdir plugins
cd .\plugins\
new-item element-plus.client.ts // powershell命令创建文件（cmd命令不同：type nul> element-plus.client.ts）
element-plus.client.tsConfigurar o global em
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,
})
})
Onde configurar estilos globalmente nuxt.config.tsemcss
export default defineNuxtConfig({
css:[
'element-plus/dist/index.css',
]
})
2.1. Uso de demonstração
Open app.vue, o conteúdo inicial é o seguinte, <NuxtWelcome />é a página oficial de boas-vindas
<template>
<div>
<NuxtWelcome />
</div>
</template>
Substitua-o pelo código element-plususado para verificar se a instalação e configuração foram bem-sucedidas
<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 devInicie o projeto, visite http://localhost:3000/
3. instalação scss e configuração de variável global
- Instalar
npm install sass --save-dev
3.1. Uso
app.vueusado em
<style lang="scss">
$bgColor: pink;
body {
background-color: $bgColor;
}
</style>
npm run devInicie o projeto, visite http://localhost:3000/
3.2. Uso de importação externa
Crie uma nova pasta duas camadas sob o diretório raiz assets\stylese crie uma nova pasta stylessobdefault.scss
default.scssescreva em
$bgColor: skyblue;
app.vueusado em
<style lang="scss">
// $bgColor: pink;
@import "~/assets/styles/default.scss";
body {
background-color: $bgColor;
}
</style>
3.3. Uso da configuração global
nuxt.config.tsconfigurar em
export default defineNuxtConfig({
css:[
'element-plus/dist/index.css',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/styles/default.scss" as *;' // 注意文件路径要配成自己的
}
}
}
}
})
default.scssescreva em
$bgColor: orange;
app.vueusado em
<style lang="scss">
// $bgColor: pink;
// @import "~/assets/styles/default.scss";
body {
background-color: $bgColor;
}
</style>
Neste ponto, este projeto termina com uma demonstração básica.
4. Expansão: o Corepack carrega automaticamente o pnpm
node v16.13De , Node.jsé lançado um gerenciador de gerenciamento de pacotes Corepack, ele pode gerenciar pnpm, mas por Corepackser um recurso experimental, não está habilitado por padrão, então você precisa habilitá-lo executando o seguinte comando, após habilitá-lo, ele será carregado automaticamente para cimapnpm .
corepack enable
No entanto, há uma pequena chance de que não seja a versão mais recente do pnpm. Para atualizá-lo, acesse o site oficial github para ver se é a versão mais recente e use o seguinte comando para verificar e alternar pnpma versão e executá-la.
corepack prepare pnpm@<version> --activate
Exemplo:
C:\Users\Admini>pnpm -v
'pnpm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
C:\Users\Admini>corepack enable
C:\Users\Admini>pnpm -v
7.13.3
C:\Users\Admini>corepack prepare [email protected] --activate
Preparing [email protected] for immediate activation...
C:\Users\Admini>pnpm -v
7.13.4
ensaio
