Small chat: this time records the process of using Nuxt3 to build a front-end project, including the installation of Nuxt3, the vue3 project built based on Vite scaffolding (default), the installation configuration of element-plus (optional), and the installation of scss (optional) , the creation and interpretation of directory structures. Before building the project, you can learn about Nuxt3 first: "Nuxt3 Key Features Usage Example Record"
Table of contents
- 1. Nuxt3 installation
- 2. Installation and configuration of element-plus
- 3. scss installation and global variable configuration
- 4. Expansion: Corepack automatically loads pnpm
1. Nuxt3 installation
The premise is to ensure that there is a Nuxt3 installation environment
Node.js（必要）
Visual Studio Code（推荐）
Volar（推荐）
There are differences between node.js versions. The current official recommendation for installing Nuxt3 is v14 and v16, or higher versions.
1.1. Install new Nuxt3 project
First create a new Nuxt3 project under your Nuxt3 workspace, open the project space folder, enter cmd or powershell + enter in the project space folder path, and open the command window
- installation method
1) Method 1: npx installation
npxis a command issued npm5.2after that can replace npmthe command to install dependencies or packages.
npx nuxi init nuxt-app # nuxt-app 是项目名
1) Method 2: pnpm installation
pnpmis Node.jsan alternative package manager for . It is npma drop-in replacement for , but is faster and more efficient.
pnpm dlx nuxi init nuxt-app # nuxt-app 是项目名
Because pnpm and npm are not the same thing, they need to be installed separately. If you don't have it, you can suggest installing it. Install pnpm directly using npx or npm, (you can also open node’s package manager to Corepackautomatically assemble it. The expansion below: Corepack automatically loads pnpm )
install pnpm
npm install -g pnpm
或
npx pnpm add -g pnpm
- Notice
In the command nuxt-appis the project package name, that is to say, when you install nuxt3, a project package will be generated. The project can be customized. If the package name is defined at the beginning, you can also delete the project and create a new one.
That's right, its installation is to create a new Nuxt3project , and you don't need to choose any tool configuration in the middle, it has already created a high-quality and comfortable development environment for you by default. Tool selection details can be found on the official website: Nuxt3 official website
1.2. Startup of Nuxt3
My project starts using the VS Code demo.
Enter the project directory
cd nuxt-app
Use code .VSCode built-in commands to open the project with VScode
code .
Example:
Explanation: The in the picture ERRORis not an installation failure, but a warning prompt: "ExperimentalWarning: Fetch API is an experimental feature. This feature may change at any time." Fetch APIIt provides an interface for obtaining resources. This project is created through it to request. It is considered an experimental use and has nothing to do with the project itself. It is fine to download Nuxt3the project
In addition, if deleting the project and creating a project with the same name fails, just change the project name.
1.3. Nuxt3 running port
Nuxt3 uses the npm run devrunning port, but first, we have to open the Terminalinput to npm installdownload the dependencies
npm install
Run cmdthe command to start the service
npm run dev
or use the graphical commandnpm scripts
Access: http://localhost:3000/
So far, we can start developing the Nuxt3 project.
2. Installation and configuration of element-plus
- install command
npm install element-plus
npm install @element-plus/icons-vue
- configuration
Because element-plusis a third-party plug-in, it needs to pluginsbe configured in the directory
Create a new pluginsdirectory , and create a new element-plus.client.tsfile under the directory (note: by default, a new configuration file must be created pluginsunder , which is a "agreement", see the official website for details )
I use the command to create it here. Of course, it is also good to create it manually in the project root directory. (As for why you should add it, if you are .clientinterested please see: " Analysis of the Combined Use of Front-end Rendering CSR and SSR ")
mkdir plugins
cd .\plugins\
new-item element-plus.client.ts // powershell命令创建文件（cmd命令不同：type nul> element-plus.client.ts）
element-plus.client.tsConfigure the global in
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,
})
})
Where to configure styles globally nuxt.config.tsincss
export default defineNuxtConfig({
css:[
'element-plus/dist/index.css',
]
})
2.1. Demo use
Open app.vue, the initial content is as follows, <NuxtWelcome />it is the official welcome page
<template>
<div>
<NuxtWelcome />
</div>
</template>
Replace it with the code element-plusused to check whether the installation and configuration are successful
<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 devStart the project, visit http://localhost:3000/
3. scss installation and global variable configuration
- Install
npm install sass --save-dev
3.1. Use
app.vueused in
<style lang="scss">
$bgColor: pink;
body {
background-color: $bgColor;
}
</style>
npm run devStart the project, visit http://localhost:3000/
3.2. External import use
Create a new folder two layers under the root directory assets\styles, and create a new folder stylesunderdefault.scss
default.scsswrite in
$bgColor: skyblue;
app.vueused in
<style lang="scss">
// $bgColor: pink;
@import "~/assets/styles/default.scss";
body {
background-color: $bgColor;
}
</style>
3.3. Global configuration usage
nuxt.config.tsconfigure in
export default defineNuxtConfig({
css:[
'element-plus/dist/index.css',
],
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/assets/styles/default.scss" as *;' // 注意文件路径要配成自己的
}
}
}
}
})
default.scsswrite in
$bgColor: orange;
app.vueused in
<style lang="scss">
// $bgColor: pink;
// @import "~/assets/styles/default.scss";
body {
background-color: $bgColor;
}
</style>
At this point, this project ends with a basic demo.
4. Expansion: Corepack automatically loads pnpm
node v16.13From , Node.jsa manager for managing packages is released Corepack, it can manage pnpm, but because Corepackthis is an experimental feature, it is not enabled by default, so you need to enable it by running the following command, after enabling it, it will be automatically loaded uppnpm .
corepack enable
However, there is a small chance that it is not the latest version of pnpm. To upgrade it, go to the official website github to see if it is the latest version, and use the following command to check and switch pnpmthe version and run it.
corepack prepare pnpm@<version> --activate
Example:
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
essay
