# 基于Nuxt3的小红书网页版（待完成）
地址🧭 https://gitee.com/hen128/nuxt3-demo (opens new window)
# 写在前沿
许多功能暂未完成，近期将逐步完善。
关键词：Nuxt、Vue3、MySQL、Sequelize
特点：全栈项目，利用Nuxt3写服务接口，接口代码在server目录下，这是Nuxt的约定策略。
# 预览
首页：
登录：
# 初始化项目
npx nuxi init <project-name>
1
更改app.vue
<template>
<div>
<NuxtPage />
</div>
</template>
1
2
3
4
5
2
3
4
5
更改端口package.json
"scripts": {
"dev": "nuxt dev --port 3003",
},
1
2
3
2
3
# 集成Element-Plus
链接：https://nuxt.com/modules/element-plus
安装x
npm i element-plus @element-plus/nuxt -D
1
配置nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@element-plus/nuxt'
],
elementPlus: { /** Options */ }
})
1
2
3
4
5
6
2
3
4
5
6
使用
<template>
<el-button @click="ElMessage('hello')">button</el-button>
<ElButton :icon="ElIconEditPen" type="success">button</ElButton>
<LazyElButton type="warning">lazy button</LazyElButton>
</template>
1
2
3
4
5
2
3
4
5
# 集成Windicss
链接：https://nuxt.com/modules/windicss
安装
npm i nuxt-windicss -D
1
配置
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
modules: [
'nuxt-windicss',
],
})
1
2
3
4
5
6
7
2
3
4
5
6
7
Typescript相关配置tsconfig.json
{
"compilerOptions": {
"types": [
"nuxt-windicss"
]
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
检验
<template>
<div class="w-200px h-200px bg-red-400"></div>
</template>
1
2
3
2
3
# 服务端接口编写
链接：https://nuxt.com/docs/guide/directory-structure/server
server目录会自动引入接口。
# 集成Sequelize
npm i sequelize mysql2
1
``server/db.ts`
import pkg from 'sequelize'
import { initModels } from '~/server/model/init-models'
const { Sequelize } = pkg
const seq = new Sequelize({
host: '127.0.0.1',
port: 3306,
dialect: 'mysql',
database: 'redbook',
username: 'root',
password: '123456'
})
export const DB = initModels(seq)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
下载 sequelize-auto，以同步model
npm install --save-dev sequelize-auto
1
package.json添加新命令
"scripts": {
"model": "sequelize-auto -l ts -h localhost -d redbook -u root -x 123456 -p 3306 --dialect mysql -o server/model"
}
1
2
3
2
3
执行该命令，model目录下自动同步表结构
# SEO
链接：https://nuxt.com/docs/getting-started/seo-meta
页面添加
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" />
</Head>
1
2
3
4
5
2
3
4
5
nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-16',
viewport: 'width=500, initial-scale=1',
title: 'My App',
meta: [
// <meta name="description" content="My amazing site">
{ name: 'description', content: 'My amazing site.' }
],
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 依赖
| 包名 | 功能 |
|---|---|
| moment | 时间包 |
| ts-md5 | md5加密 |