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