Write the Code. Change the World.

5月 25

都说 pnpm vite vue 组合好。那就试试。

# shenya 是项目名
pnpm create vite  shenya

cd shenya

pnpm install

pnpm run dev

如果从来没有使用过 pnpm,第一次创建的时候是要花一点时间。后边就是秒创建了哈。

5月 25

vue cli 创建项目的时候,默认是不会 .env .env.production 这些文件的。一般,一个大型项目是需要用到不同环境的不同配置。这个时候,手动建立各个 .env 文件是必要的。起点就在 package.json 中的 scripts 里,默认就会有的。当然你可以手动定义名字,然后用 mode 指定。如:”staging”: “vue-cli-service serve –mode staging” 。

https://cli.vuejs.org/zh/guide/mode-and-env.html

如果是 vite 环境,不用 process,而是用 import.meta。 会有一些变化。请看:

https://cn.vitejs.dev/guide/env-and-mode.html#env-files

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 

5月 15

强迫症。不喜欢开机自启动向日葵。那么就关掉向日葵自启动吧。这里是 mac

操作

打开终端,编辑下边这些文件,将 Disabled 的值改为 即可。

cd /Library/LaunchAgents/
sudo vim com.oray.sunlogin.agent.plist
sudo vim com.oray.sunlogin.startup.plist

cd /Library/LaunchDaemons
sudo vim com.oray.sunlogin.helper.plist
sudo vim com.oray.sunlogin.plist
5月 14

https://github.com/barryvdh/laravel-debugbar

### 安装
composer require barryvdh/laravel-debugbar --dev

### 生成配置文件 config/debugbar.php
php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

### 修改配置文件,设置 enabled 项
'enabled' => env('APP_DEBUG', false)

启用分析器后,网站底部会出现 debug 工具栏,可以看到执行的 mysql 语句等。可以发现和解决不合理的 ORM 问题。

5月 11

vue 项目中,出现 Component name “home” should always be multi-word.eslint 这个错误提示,可以改两个地方。

处理方式

修改 vue.config.js 文件,在 defineConfig 中加入 lintOnSave: false ,这个保证编译不会报错。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

修改 .eslintrc.js 文件,在其中追加配置 overrides 。注意自己的 vue 文件目录配置好。这个保证在 vue 文件中,不会出现警告的波浪线。有强迫症的受不了。

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: ['src/views/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      }
    }
  ]
}

5月 08

升级 node,vue-cli 到最新版本

node -v

# 更新 node 到最新版本
sudo n stable

# 更新 pnpm
pnpm add -g pnpm

# 更新 yarn
yarn set version latest

# pnpm 安装 @vue/cli
pnpm install @vue/cli -g

# 或使用 yarn 安装
yarn global add @vue/cli

# 创建项目,指定包管理工具
vue create -m pnpm demo

创建 vue 项目

这里就建一个 ts 的,使用 sass 的 vue3.x 项目,使用手动选择模式,包管理工具使用 yarn 。一路选择和回车即可:

vue create -m yarn zeipan
  • step-1
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
❯ Manually select features
  • step-2
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
  • step-3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
  2.x
  • step-4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Less
  Stylus

一路选择回车后,提示安装成功。进入项目,运行项目。

cd zeipan

yarn serve