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

5月 22

服务端渲染

https://vue3js.cn/interview/vue/ssr.html

https://v3.nuxtjs.org/getting-started/quick-start

这里尝试下 vue ssr 项目。可是,真正应用到项目上,还得服务端做好支持和配置。pm2,nginx 这些也是要处理

演示结果:

初始化安装 nuxt 项目

个人喜欢用 yarn 的

npx nuxi init mengmeng

cd mengmeng

# 加入版本控制
git init 

git add .

git commit -m 'nuxt 初始化项目'

yarn install

# 启动起来看看
yarn dev

构建基本 layout 和 跳转

一个 pc 端网站,通常有顶部,中间部分,底部三个部分构成,而顶部和底部,几乎是共用不变的。这种场景,我们很容易想到抽象成模板的方式来做。不过,网站除了这些共用外,还有其他地方共用,暂时就不考虑那么细致。

  • 先删除 app.vue
  • 创建 layouts 目录,在目录中建立一个 base.vue 的模板。内容如下:
<template>
<div class="base-container">
  <div class="header"></div>
  <div class="body">
    <slot></slot>
  </div>
  <div class="footer"></div>
</div>
</template>

<style>
*,
html,
body {
  margin: 0;
  padding: 0;
}
</style>

<style lang="scss" scoped>
.base-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;

  .header {
    display: flex;
    width: 100%;
    height: 80px;
    background-color: aquamarine;
  }

  .body {
    display: flex;
    flex: 1;
  }

  .footer {
    display: flex;
    width: 100%;
    height: 160px;
    background-color: bisque;
  }
}
</style>
  • 新建 pages 目录,该目录下新建 index.vue 文件,该文件作为项目的首页。代码如下:
<template>
<NuxtLayout name="base">
  <div class="container">
    <NuxtLink to="/meets"><h4>meets</h4></NuxtLink>
  </div>
</NuxtLayout>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>

meets 是另一个路由对应文件,下边会建立。
- 新建 meets 目录,meets 下新建 index.vue 文件。index 是默认映射。 内容如下。

<template>
<div>
<NuxtLayout name="base">
<div class="container">
  <NuxtLink to="/"><h4>home</h4></NuxtLink>
  <NuxtLink to="/meets/5"><h4>详情一</h4></NuxtLink>
</div>
</NuxtLayout>
</div>
</template>

<script>
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px 30px;

  h4 {
    margin-top: 12px;
  }
}
</style>

/meets/5 是另一个路由文件,下边会建立

  • meets 下新建 [id].vue 文件,[]包含的是动态映射,动态详情很好用。 内容如下:
<template>
<NuxtLayout name="base">
  <div class="container">
    <h4>id {{ id }}</h4>
  </div>
</NuxtLayout>
</template>

<script setup>
import { ref } from 'vue'

const route = useRoute()

const id = ref(route.params.id)
</script>

<style lang="scss" scoped></style>

这几个文件,串起来就可以组成首页、列表页、详情页三个页面。这刚好是一个项目最基本的构件。上边这些只是最基础最基础的一点点东西。要做好整个项目,这些是远远不够的。

使用 vuetify 作为 ui 框架

https://next.vuetifyjs.com/en/getting-started/installation/

vue add vuetify