ssr Archives - 非你网

分类目录

10月 13

vue3 服务端渲染 ssr，服务端渲染 nuxt

发表于 2023年10月13日 • 56 views • 没有评论!

ssr,vue,前端

https://www.zeipan.com/nuxt/

6月 27

使用 nuxt3 构建 SSR 项目（7）配置、打包、部署

发表于 2023年6月27日 • 337 views • 没有评论!

ssr,vite,vue,前端

配置、打包、部署

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

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

使用 nuxt3 构建 SSR 项目（6）完善首页中间部分

发表于 2023年6月27日 • 111 views • 没有评论!

ssr,vite,vue,前端

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

<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

使用 nuxt3 构建 SSR 项目（5）完善基本结构，处理底部，使得页面在垂直方向自适应

发表于 2023年6月26日 • 143 views • 没有评论!

ssr,vite,vue,前端

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

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

继续阅读

6月 25

使用 nuxt3 构建 SSR 项目（4）完善基本结构，明确顶部

发表于 2023年6月25日 • 151 views • 没有评论!

ssr,vue,前端

安装好了 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',
      },
    },
    …

继续阅读

6月 21

使用 nuxt3 构建 SSR 项目（3）建立基本结构，安装配置基本插件

发表于 2023年6月21日 • 443 views • 没有评论!

ssr,前端

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

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

继续阅读

6月 21

使用 nuxt3 构建 SSR 项目（2）前奏

发表于 2023年6月21日 • 149 views • 没有评论!

ssr,前端

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

使用 nuxt3 构建 SSR 项目（1）初始化项目

发表于 2023年6月21日 • 297 views • 没有评论!

ssr,前端

如果做官网、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

nuxt3 一些特殊

发表于 2022年5月22日 • 434 views • 没有评论!

ssr,前端

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

如果创建了 pages 目录，但是里边没有文件，就会出现 404。要不去掉 pages 页面，要不填充必须的页面。
试用 NuxtLayout 的时候，layouts 目录下的模板名不要叫 default.vue，会渲染成双倍的 div。

服务端渲染

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

2023年 11月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Write the Code. Change the World.

配置、打包、部署

配置断点和容器

修改 node 的规范模式

最基本的结构

文件构成

相关

服务端渲染

初始化安装 nuxt 项目

构建基本 layout 和 跳转

使用 vuetify 作为 ui 框架

构建基本 layout 和跳转