Vue - 标签 - 菠菜眾長https://lruihao.cn/tags/vue/Vue - 标签 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Wed, 14 Jun 2023 00:11:17 +0800使用 Node.js 自动创建 Vue 的路由https://lruihao.cn/posts/gen-router/Wed, 14 Jun 2023 00:11:17 +0800Lruihaohttps://lruihao.cn/posts/gen-router/最近在写一个 Vue 插件，需要在项目中创建一些测试页面，由于都是些静态路由，就想到之前看到过的一个项目就是用 Node.js 来自动生成路由的，于是就借鉴过来改了一下。

源码

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

const fs = require('fs')
const os = require('os')

const vueDir = './src/views/'
const routerFile = './src/router.js'

fs.readdir(vueDir, function (err, files) {
  if (err) {
    console.error('❌ Could not list the directory.', err)
    return
  }
  const routes = []
  for (const filename of files) {
    if (filename.indexOf('.') < 0) {
      continue
    }
    const [name, ext] = filename.split('.')
    if (ext !== 'vue') {
      continue
    }
    const routeName = name.replace(/-([a-z])/g, (_, match) => match.toUpperCase())
    let routeDescription = ''
    const contentFull = fs.readFileSync(`${vueDir}${filename}`, 'utf-8')
    // get route description from first line comment
    const match = /<!--\s*(.*)\s*-->/g.exec(contentFull.split(os.EOL)[0])
    if (match) {
      routeDescription = match[1].trim()
    }
    routes.push(`  {
    path: '/${name === 'home' ? '' : name}',
    name: '${routeName}',${routeDescription ? `\n    description: '${routeDescription}',` : ''}
    component: () => import(/* webpackChunkName: "${routeName}" */ '@/views/${filename}'),
  },`)
  }
  const result =
`// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
${routes.join(os.EOL)}
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router
`
  fs.writeFile(routerFile, result, 'utf-8', (err) => {
    if (err) throw err
    console.log(`✅ Router generated successfully in ${routerFile}`)
  })
})

生成效果如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    description: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router

参考

sunzsh/vue-el-demo

]]>Vue2 + tailwindcss 初始化https://lruihao.cn/posts/v2-tailwind/Sat, 03 Jun 2023 17:38:44 +0800Lruihaohttps://lruihao.cn/posts/v2-tailwind/新建 Vue2 项目

通过 vue-cli 创建一个叫 v2-tailwind 的项目：

1

vue create vue2-tailwind

根据需要选择其他的功能插件，例如：Babel, Router, Vuex, CSS Pre-processors, Linter。

关于 ESLint 当在 Vue 创建项目时，你可以根据自己的需求选择不同的 ESLint 配置。以下是一些常见的选项及其优缺点和注意事项：

  1. ESLint with error prevention only:

    • 优点：这个配置只会帮助你防止代码中的错误，它的规则相对宽松。适用于刚开始使用 ESLint 或者希望避免太多约束的开发者。
    • 缺点：由于规则相对宽松，可能无法完全确保代码风格的一致性。
    • 注意事项：如果你想要更严格的代码检查，可以考虑其他配置。

  2. ESLint + Airbnb config:

    • 优点：Airbnb 的配置非常严格，能够帮助你遵循最佳实践和编写高质量的代码。此外，它也包含了许多 ES6+ 的规则。
    • 缺点：由于其严格性，初学者可能需要花费更多时间来解决 ESLint 报告的问题。
    • 注意事项：在使用此配置时，请确保你理解并接受 Airbnb 的代码规范。

  3. ESLint + Standard config:

    • 优点：Standard 的配置旨在提供一个相对简单、一致的代码风格，适合那些喜欢“零配置”的开发者。
    • 缺点：这个配置可能不适用于所有项目，因为它有自己的代码风格要求。
    • 注意事项：如果你的团队或项目已经有自己的编码规范，使用 Standard 配置可能会导致不一致。

  4. ESLint + Prettier:

    • 优点：Prettier 是一个自动格式化工具，可以与 ESLint 结合使用，以确保代码风格的一致性。这可以提高代码可读性，并减少在代码审查过程中关注格式问题的时间。
    • 缺点：Prettier 可能会覆盖某些 ESLint 规则，所以需要花一些时间确保配置正确。
    • 注意事项：为了避免冲突，请确保 ESLint 和 Prettier 的规则正确配置。

总之，在选择 ESLint 配置时，需要根据你的团队、项目需求和个人偏好来权衡。选择适当的配置可以帮助你提高代码质量并保持一致的代码风格。

安装 tailwindcss

打开项目，安装 tailwindcss：

1
2
3

cd vue2-tailwind
# 安装 tailwindcss 低版本及相关插件
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

然后创建配置文件：

1
2

# 创建 postcss.config.js, tailwind.config.js
npx tailwindcss init -p
1
2
3
4
5
6

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

module.exports = {
  purge: [
    "./src/App.vue",
    "./src/views/**/*.{vue,js,ts,jsx,tsx}",
    "./src/components/**/*.{vue,js,ts,jsx,tsx}",
  ],
  darkMode: 'class', // or 'media' or 'class'
  mode: 'jit', // 是否开启 jit 模式，开启以后编译会更快，当然，tailwindcss 版本需要在 2.1 以上
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

最后在 main.js 中引入 tailwindcss

1

import "tailwindcss/tailwind.css"

启动项目

启动项目，修改模板中的 class 进行测试。

1

npm run serve
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<template>
  <div id="app">
    <div class="bg-gray-100">
      <div class="container mx-auto">
        <div class="flex justify-center items-center h-screen">
          <div class="text-4xl text-gray-700">Hello Vue2 + tailwindcss</div>
        </div>
      </div>
    </div>
  </div>
</template>
]]>基于 leancloud-storage 实现的无后端记账本https://lruihao.cn/projects/bill-note/Tue, 02 Mar 2021 21:46:40 +0000Lruihaohttps://lruihao.cn/projects/bill-note/起因
起因

事情是這樣，年前和朋友一起合租了一個房子，然後捏，生活嘛，除了開心，當然是乾飯最大啦！

自然就會有購物，買菜等日常消費，那就要記賬，一開始是各自記在手機的便簽上，最後再算一下；
三個人，一共七种組合消費，排除各自消費的三種情況，也有四種 (AB, AC, BC, ABC)。好麻煩啊！！！

經過

作為一個程序猿，怎麼能接受這麼麻煩的記賬方式呢，拿起筆就開始畫，於是有了下面這張圖的公式。簡單說明一下就是：
設前面說的四種組合為：X1, X2, X3, X4，個人實際付款總額為：Y1, Y2, Y3，那麼帶入未知數，我們就可以算出每個人最後結算時的錢：S1, S2, S3，
綜上所述，很好理解，當 S >= 0 時，收紅包，當 S < 0 時，發紅包。

OK，一個簡單的初中方程式已經到位了，下一步，思考一下，用什麼來運作這個這個方程。來，先跑個題，春節期間，不是每天都要在騰訊文檔上填表記錄活動軌跡嗎？ 再回來，那不如就用 excel 實現吧，三個人都可以在手機上編輯。好的，說做就做。

一頓操作，10 minutes later…
只新建了一個 excel 文件，O.o! 不會 excel，果斷放棄，另尋他路。

結果

回到本職，那不如寫個網站吧，可是畢業後，學生機服務器也過期了，怎麼搞？那就寫個純前端的，數據呢存哪裡？
別急，重新擼一擼需求先：

  • 存取消費數據
  • 計算每月，實付（總分），應付以及最後計算結算金額
  • 按月查詢，月結賬單
  • 三人皆可編輯

主要就是存取數據這點，沒有服務器，數據庫怎麼實現？
valine 可以實現無後端，那我是不是也可以，leancloud 文檔走一波，然後“數據表”設計一下，其實是 leancloud-storage Object ，於是有了以下東西，源碼放在 Github

bill-note http://github.com/Lruihao/bill-note

數據設計

去 leancloud 创建一个应用，再新增一个 Bill Class, 补充一下字段：

name type description
pay Number 消费金额
pay_description String 消费描述
pay_type String 消费类型
pay_user String 付款人

主要邏輯

初始化

set for yourself.

1
2
3
4
5

AV.init({
  appId: '',
  appKey: '',
  serverURL: ''
});

存數據

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

//記賬提交按鈕事件監聽
document.querySelector('.submit').addEventListener('click', function (event) {
  event.preventDefault();
  let formPay = document.querySelector('#form-pay');
  let bill = new AV.Object('Bill');
  bill.set('pay', Number(formPay.pay.value));
  bill.set('pay_type', Number(formPay.pay_type.value));
  bill.set('pay_user', Number(formPay.pay_user.value));
  bill.set('pay_description', formPay.pay_description.value);
  bill.save().then(
    (object) => {
      formPay.reset();
    },
    function (error) {
      console.log(JSON.stringify(error));
      alert('保存失敗');
    }
  );
});

取數據

 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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/**
 * 獲取歷史消費記錄數據
 * @param [start=0] 開始位置
 * @param [count=15] 每次查詢筆數
 */
function getBillData(start = 0, count = 15) {
  queryBill
    .descending('createdAt')
    .skip(start * count)
    .limit(count)
    .find()
    .then(function (response) {
      let billLength = response.length;
      if (billLength > 0) {
        billVm.noMore = billLength !== count ? true : false;
        for (bill of response) {
          billVm.bills.push({
            pay: bill.attributes.pay,
            payType: payType[bill.attributes.pay_type],
            payUser: payUser[bill.attributes.pay_user],
            payDescription: bill.attributes.pay_description,
            payDt: new Date(bill.createdAt).toLocaleString()
          });
        }
      } else {
        billVm.noMore = true;
      }
    });
}

/**
 * 獲取月賬單數據
 * @param month 年月份 fmt: yyyy-MM
 */
function getMonthBill(month) {
  let dateTime = `${month} 00:00:00`;
  let startMonth = new Date(dateTime);
  let nextMonth = new Date(new Date(dateTime).setMonth(startMonth.getMonth() + 1));
  let startDateQuery = new AV.Query('Bill');
  startDateQuery.greaterThanOrEqualTo('createdAt', startMonth);
  let endDateQuery = new AV.Query('Bill');
  endDateQuery.lessThan('createdAt', nextMonth);
  let MonthBillQuery = AV.Query.and(startDateQuery, endDateQuery);
  MonthBillQuery.find().then(function (response) {
    billVm.monthBill = {
      payType0: 0,
      payType1: 0,
      payType2: 0,
      payType3: 0,
      payUser0: 0,
      payUser1: 0,
      payUser2: 0
    };
    for (bill of response) {
      let { pay, pay_type, pay_user } = bill.attributes;
      billVm.monthBill[`payType${pay_type}`] += pay;
      billVm.monthBill[`payUser${pay_user}`] += pay;
    }
  });
}

技術棧

  • leancloud-storage
  • Vue.js
  • HTML,CSS,JS

總結

簡單總結一下，登录功能不做，安不安全自己说了算。删除修改功能也不做，直接上 leancloud 操作，css 美化的样式也不写，干净又卫生！
然后衍生一下，什么过年斗地主，天炸，麻将，字牌记账系统那不也是同理可得嘛！

over!

效果

]]>Web 开发规则，代码规范https://lruihao.cn/posts/dev-rules/Thu, 15 Aug 2019 18:30:31 +0000Lruihaohttps://lruihao.cn/posts/dev-rules/精神
  • 绝不写死代码，硬编码
  • 不留不要用的、垃圾代码

Git

  • Master 的 BUG 必须最少且趋近于零，为最稳定的版本
  • 每次 Commit 信息应该准确填写。不可模棱两可，eg: 修复 BUG、增加功能
  • 禁止 Commit IDE 的 project data，e.g: .vscode
  • 禁止上传垃圾代码

更多规则详见文档 Commit 规范

分支（Branch）

  • 命名规则：应以此分支主要目的命名（修复什么 BUG，新增特定功能）
  • 合并后的分支应该删除

commit

  • 遵循一个功能一个 commit 的原则

Restful

  • 资源名词站在 API 的角度思考

    • 复数名词：可以复数笔数据，回传结果为 Array

      举例：GET/users 取得多笔使用者资料

      • 刪除，放在复数名词內，让 Router 保持一致性
      • 增加，放在复数名詞內，让 Router 保持一致性

    • 单数名词：仅取得单笔数据，必须指定 PK，两两一组，回传结果为 Object 举例：GET/user/{accont} 取得单笔使用者资料，必须指定 PK

  • URL 中一律不带 id 参数

1
2

正确范例： calendar_manager/calendar/29
错误范例： calendar_manager/calendar/29?id=29

更多规则详见文档 RESTful

命名

  • 命名应根据内容做有意义的命名，让后续维护人员可以顾名思义！
  • 即使不会发生错误，代码英文大小写也需明确区分。

语意

类型 命名规则 说明
属性 (Attribute, Property) 名词 user_name、userName
方法 (Method, Function) 动词 + 名词 getUserName、get_user_name 常見的动词有：get、set、update、delete、remove

字母与分隔

语言 变量 (Variable, Parameter, Argument) 常量 (Constant) 面向对象 - 类名 (Class Name) 面向对象 - 成员 (mebmer)
HTML 全部小写，不同单词以「-」分隔
e.g: user-id
CSS、SCSS 全部小写，不同单词以「-」分隔，CSS 变量以「–」开头，SCSS 变量以「$」开头
e.g: .user-id、–header-height、$header-height
JavaScript 驼峰式命名法
首字小写，不同单字「首字以大写」分隔
e.g: userId		 全部大写，不同单字以「_」分隔 MAX_COUNT 驼峰式命名法
首字大写，不同单字「首字以大写」分隔
一个文件放一个 Class, 文件名即为 Class Name
e.g: User		 驼峰式命名法
公有 (public) : 首字小写，不同单词「首字以大写」分隔
e.g: name, getName
私有 (private): _公有命名规则
e.g: _name,_getName
Vue
Java
PHP 全部小写，不同单词以「_」分隔
e.g: user_id
Python
SQL 由使用者定义的：表名、字段名
全部小写，不同单词以「_」分隔		 SQL 语法、函数全部大写
e.g: SELECT、INSERT INTO

通用

  • 代码编写
  • 每个函数应该使用块注释，注释应包含函数功能说明、参数说明。规则见：JSDoc、JavaDoc
  • 不必要的代码不要写，也应禁止放到注释里面！
  • if-else 的 {} 严禁省略
  • 代码规范、代码排版等可通过 eslint 等工具做统一处理

正确写法

1
2
3
4
5
6

public function test () {
  // do something
  if (a === b) {
    // do something
  }
}

错误写法

1
2
3
4
5
6
7
8

public function test ()
{
  // do something
  if (a === b)
  {
    // do something
  }
}
  • 代码排版
    • 任何代码应该以 2 个 space 为一个缩进做好排版、不可使用 tab
  • 函数 (Function, Methd)
    • 函数声明时需在函数上方加上函数注释，注释应包含函数说明、参数内容（参数类型、参数英文名称、参数说明）、返回值内容（返回值类型、返回值说明）
  • 类 (Class)
    • 一个类（Class）的声明只能存在一个文件
    • 类（Class）的声明文件，文件名必须为类名
  • 其他
    • 连接本地任何其他资源（图片、文件、网站）皆使用相对路径，禁止使用绝对路径，非本地资源除外

HTML

代码编写

  • 禁止在 HTML 使用 <style>、<script>，一律使用外部档案引用方式引用 CSS、JavaScript 文件
  • HTML 标签需成双成对，有头有尾
  • 块级标签：<tag></tag>
  • 单标签：<tag />
  • 禁止使用已被 HTML 舍弃的旧标签、属性，如：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- html tag -->
<center>
<font>
<basefont>
<s>
<strike>
<u>
<listing>
<plaintext>
<xmp>
<!-- html attribute -->
align
bgcolor
color

CSS

CSS 的定义应该独立一个 CSS 文件，禁止使用 <style> 或 style 属性直接在 HTML 中定义样式。

JavaScript

禁止使用 HTML 字串，一律使用 Dom 产生 HTML, e.g: document.createDocumentFragment()

注释

JavaScript 注释应该遵循 JSDoc 的标准撰写

全局变量 (Global)

1

/* global ZT */

常量 (Constant)

1
2
3
4

/**
 * 常量說明
 * @type {常量类型}
 */

Example

1
2
3
4
5

/**
 * 请求地址
 * @type {String}
 */
const REQUEST_URL = 'http://localhost:8080';

函數、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param {参数类型} 参数名称参数说明
 * @param {参数类型} [选择性参数名称] 参数说明
 * @param {参数类型} [选择性参数名称=参数预设值] 参数说明
 * @returns {返回值类型} 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/**
 * 取得使用者
 * @param {Int} userId 使用者 ID
 * @param {Object} [options] 其他选项
 * @param {String} [options.query='a'] 查询关键词 默认为 'a'
 * @returns {Object} 使用者资料
 */
function getUser(userId, options) {
  // do something
  return user;
}

Vue

  • 待补充

Java

Java 注释应该遵循 JavaDoc 的标准撰写

  • 待补充

PHP

前端参数取得

参数取得需通过 filter_input 函数取得，不得使用 _GET 、_POST

输出到前台

参数命名必须为：全部小写，不同单字以「_」分隔

注解

PHP 注解应该遵循 PHPDoc 的标准撰写

成员变量 (Member)

成员变量只的是 Class 内的成员变数，我们都会要求替成员变量增加注解说明。通常 Function 的变量除非太特别否则都不需要特别注解说明。

1
2
3
4

/**
 * 成员变量說明
 * @type {类型}
 */

Example

1
2
3
4
5

/**
 * 使用者 ID
 * @type {String}
 */
$userId = 'Hello';

函数、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param 参数型态 参数名称 参数说明
 * @option 参数选项类型 参数选项名称 参数选项说明
 * @uses 全局变量 全域变数说明
 * @returns 返回值类型 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/**
 * 取得使用者
 * @param int userId 使用者 ID
 * @param object options 其他选项
 * @option string options['query'] 查询关键字
 * @uses $_POST['role_id'] 从前端以 POST 取得角色 ID
 * @returns object 使用者资料
 */
function getUser ($userId, $options) {
  // do something
  return $user;
};

Python

  • 待补充

Database

  • 禁止使用 Table Join。
  • 禁止使用 Oracle Trigger。
  • 禁止将查询数据库的 SQL 放在循环中查询

SQL 撰写

  • 属于 SQL 语法使用大写（SELECT，WHERE，INSERT etc..）
  • 属于使用者自己定义的使用小写（表名 table name，字段名 column name etc..）
  • 表名、字段名前后需加上 `

Example

1

INSERT INTO `user` VALUES('a', 'b');

统一用词

系统中常用词，例如弹出框按钮、搜索框等，仅为举例，不限与此。

用词 统一
最后、最终 最后
关闭、Cancel、取消 取消
存储、保存、修改、OK、确定 确定
搜寻、查询、查找、搜索 搜索
]]>