网站搭建-“十年生活随笔”-Web前端（一）

项目简述

• 网站名称：十年（多人日记网站）
• 背景描述：每个人的一生都是短暂且美丽的，以十年为界限，每个人拥有几个十年？若不将生活的点滴记录下来，当我们已至耄耋之年，能否单凭记忆回忆起往昔的青葱岁月？我想大部分人也许仅会在见识到相似的风景时，触景伤情。记忆可能会欺骗我们，但文字不会，记录生活的点滴，待到十年后追忆，这边是“十年”诞生的意义。
• 项目类型：开源

系列归属

• Web前端构建日志

技术选型

• 框架：Nuxt.js + Element
• 格式：TypeScript + Eslint + Prettier

编码操作

1. 项目创建

# 远程仓库 https://gitee.com/jingenqiang/decade-web.git
npx create-nuxt-app decade-web

# question
✨  Generating Nuxt.js project in decade-web
? Project name: decade-web
? Programming language: TypeScript 
? Package manager: Npm
? UI framework: (Use arrow keys)
? UI framework: Element
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier 
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

package.json

{
  "name": "decade-web",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "core-js": "^3.9.1",
    "element-ui": "^2.15.1",
    "nuxt": "^2.15.3"
  },
  "devDependencies": {
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "prettier": "^2.2.1"
  }
}

2. 安装Less（问题）

# 使用最新版本时，编译失败，所以指定低版本
cnpm install -D less@3.0.4 less-loader@5.0.0

3. element-ui 快速布局

首页布局

4. 安装gulp

cnpm install -D gulp

配置自动化任务 gulpfile.js

// git命令整合
exports.gitee = series(git_add, git_commit, git_push)

5. 登录页

登录页面布局