Write the Code. Change the World.

分类目录
6月 27

配置、打包、部署

因为想部署到非根目录下。所以需要明确配置该非根目录的目录名。

修改 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: ''} 就是配置目录的。

继续阅读

6月 27

首页就按照原网站的图弄弄。图片资源从以往的库中复制过来。

<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>

效果是这样子的。

继续阅读

6月 26

有追求,自然会把尽力把每一个地方做到最好。有这样一个场景,中间实体内容很少。这个时候不做特殊处理,如果是正常排版下来,底下会出现很大空白。这样就不好看。既然知道了,那就想办法去解决掉。

先截图看看我说的这个场景。底部我还没完善哈。但是底部下边一大片空白。这样体验就不好了。只是一般网页的内容都会比较多,会把底部堆下去。总不能保证每个页面都能堆下去。

继续阅读

6月 25

安装好了 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 配置。其中,centertrue 时,container 容器默认就居中,这个和 bootstrap 一样了。然后 padding 设置的是每个节点下的内边距。

  …
  theme: {
    extend: {},
    container: {
      center: true,
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
        '3xl': '6rem',
      },
    },
    …

继续阅读

6月 21

初始化项目后,我们需要对项目进行一些配置,以及安装一些插件

修改 node 的规范模式

先修改 node 的规范模式。默认是 commonjs,我们把它改成 es Module 模式。

修改package.json 文件中的 type 属性(没有就加一个。

{
    …,
    "type": "module"
}

commonjs 规范中,导入使用 requirees Module 中,则使用 import 。这是大家最直接基本的映象。当然还有很多的细节问题,可以另外查阅。

最基本的结构

新建 layouts 文件夹,创建 base.vue 文件,填入以下代码。

<template>
    <div class="content">
        <slot></slot>
    </div>
</template>

继续阅读

6月 21

在正式开发之前,我们先了解下 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

我们先了解几个比较用的到的。

继续阅读

6月 21

如果做官网、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 实现的一个自适应官网。这次,就做一个类似的网站。主要有顶部导航栏、中间实体部分、以及底部信息栏构成。这个是一个实践,做一个完整的这样的页面加一个跳转也面就够了。基础做好了,就是添砖加瓦的事情。

继续阅读

5月 22

nuxt 走约定大于配置的路线,有些问题需要注意一下下。特意记录下来。

  1. 如果创建了 pages 目录,但是里边没有文件,就会出现 404。要不去掉 pages 页面,要不填充必须的页面。

  2. 试用 NuxtLayout 的时候,layouts 目录下的模板名不要叫 default.vue,会渲染成双倍的 div。

相关

https://juejin.cn/post/7038957796351541261

https://juejin.cn/post/7080007366808666119

https://juejin.cn/search?query=nuxt3

https://juejin.cn/post/6844903906200256525