相关网站
https://echarts.apache.org/examples/zh/index.html#chart-type-line
https://echarts.apache.org/zh/option.html#title
渲染成功效果图
开始
安装
pnpm add echarts vue-echarts分类目录
配置、打包、部署
因为想部署到非根目录下。所以需要明确配置该非根目录的目录名。
修改 nuxt.config.js
import postcss from './postcss.config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: false },
css: [
'@/assets/css/main.scss'
],
postcss,
app: {
baseURL: '/nuxt/'
}
})其中， app: { baseURL: ''} 就是配置目录的。
首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。
<template>
<NuxtLayout name="base">
<div class="container flex">
<div class="md:w-1/3 flex flex-col">
<span class="text-black text-xl font-semibold mt-16">约拍宝</span>
<a class="text-blue-500 text-sm mt-3" href="https://www.yuepaibao.com" target="_blank">官方网站</a>
<p class="text-gray-600 text-sm mt-3">约拍宝是一款专业摄影类平台,主要服务于爱拍摄的人群。用户可以在平台上进行交互约定支付等来促成合作，还可以发布作品供其他用户欣赏、评论等。</p>
<div class="mt-5">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_miniapp.jpg" alt="约拍宝小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_iosapp.jpg" alt="约拍宝 ios app" />
</div>
<div class="mt-1">
<img class="w-40 h-40 shadow-sm rounded-md inline mr-5 mb-4" src="../assets/image/home/ypb_baidu.png" alt="百度小程序" />
<img class="w-40 h-40 shadow-sm rounded-md inline mb-4" src="../assets/image/home/ypb_douyin.png" alt="抖音小程序" />
</div>
</div>
<div class="md:w-2/3 p-10 flex">
<img class="w-full object-contain max-w-3xl" src="../assets/image/home/ypb.jpg" />
</div>
</div>
</NuxtLayout>
</template>效果是这样子的。
有追求，自然会把尽力把每一个地方做到最好。有这样一个场景，中间实体内容很少。这个时候不做特殊处理，如果是正常排版下来，底下会出现很大空白。这样就不好看。既然知道了，那就想办法去解决掉。
先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多，会把底部堆下去。总不能保证每个页面都能堆下去。
安装好了 tailwindcss 以及相关的插件后。也安装一下 vscode 对应的插件。常规网站，顶部，底部一般都是公用的，我们可以提取出来，作为 layout。然后是自适应问题，tailwindcss 已居右自适应的特性。我们再扩展一下啊，支持得更宽一点。现在电脑，分辨率也都已经很高了。支持的多一点，体验也会好一些。然后正如 bootstrap 框架一样。container 容器，我们还是要用的。tailwindcss 默认的 container 是不居中的，我们可以在插件中配置一下。默认就居住。其实居中和 bootstrap 一样，都是使用 margin:auto 来搞定的。
那么开始吧。
配置断点和容器
编辑 tailwind.config, 先扩充宽度。也可以更多点。
…
theme: {
extend: {},
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
'3xl': '1782px',
}
},然后设置容器，让其默认就居中。相同的位置，增加 container 配置。其中，center 为 true 时，container 容器默认就居中，这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。
…
theme: {
extend: {},
container: {
center: true,
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
'3xl': '6rem',
},
},
…初始化项目后，我们需要对项目进行一些配置，以及安装一些插件
修改 node 的规范模式
先修改 node 的规范模式。默认是 commonjs，我们把它改成 es Module 模式。
修改package.json 文件中的 type 属性（没有就加一个。
{
…,
"type": "module"
}在 commonjs 规范中，导入使用 require。es Module 中，则使用 import 。这是大家最直接基本的映象。当然还有很多的细节问题，可以另外查阅。
最基本的结构
新建 layouts 文件夹，创建 base.vue 文件，填入以下代码。
<template>
<div class="content">
<slot></slot>
</div>
</template>在正式开发之前，我们先了解下 nuxt 的一些基础理论知识。
文件构成
.
├── README.md
├── app.vue # nuxt 应用程序主组件（入口组件）
├── nuxt.config.ts # nuxt 配置文件（该文件配置可覆盖默认的配置-一方面可以覆盖，一方面扩展）
├── package.json # 项目包配置文件
├── pnpm-lock.yaml # pnpm 版本锁定控制文件
├── public
│ └── favicon.ico
├── server
│ └── tsconfig.json
└── tsconfig.json # ts 配置文件上边这些，只是使用工具创建的默认文件。一个完整的项目，远远不止这些文件夹、文件、配置。 可见官方文档。
https://nuxt.com/docs/guide/directory-structure/nuxt
我们先了解几个比较用的到的。
如果做官网、h5这些。 ssr 还是得要考虑的。好吧 vue3 + nuxt3 是一个选择。当然，还有辅助的一些工具和框架。比如 tailwindcss 这些。
vue 官网： https://cn.vuejs.org/guide/essentials/application.html
nuxt 官网： https://nuxt.com/docs/getting-started/installation
在使用 nuxt 之前，您应该已经会使用 vue3 了哈。
一般，都会选择最新，最流行的工具和框架。比如，使用 vite 代替 webpack，使用 pnpm 代替 yarn，npm 这些。如果是 mac 使用 item2 代替默认的终端。这个是跟风，也是学习的动力。有新鲜感和不一样的体验感。
下边这个是我使用 laravel10( blade) + bootstrap5 实现的一个自适应官网。这次，就做一个类似的网站。主要有顶部导航栏、中间实体部分、以及底部信息栏构成。这个是一个实践，做一个完整的这样的页面加一个跳转也面就够了。基础做好了，就是添砖加瓦的事情。
nuxt 走约定大于配置的路线，有些问题需要注意一下下。特意记录下来。
- 如果创建了 pages 目录，但是里边没有文件，就会出现 404。要不去掉 pages 页面，要不填充必须的页面。
-
试用 NuxtLayout 的时候，layouts 目录下的模板名不要叫 default.vue，会渲染成双倍的 div。
相关
https://juejin.cn/post/7038957796351541261
https://juejin.cn/post/7080007366808666119