項(xiàng)目簡(jiǎn)述
- 網(wǎng)站名稱：十年（多人日記網(wǎng)站）
- 背景描述：每個(gè)人的一生都是短暫且美麗的亩进，以十年為界限泉粉，每個(gè)人擁有幾個(gè)十年卵慰？若不將生活的點(diǎn)滴記錄下來(lái)沙郭，當(dāng)我們已至耄耋之年，能否單憑記憶回憶起往昔的青蔥歲月裳朋？我想大部分人也許僅會(huì)在見(jiàn)識(shí)到相似的風(fēng)景時(shí)病线，觸景傷情。記憶可能會(huì)欺騙我們鲤嫡，但文字不會(huì)送挑，記錄生活的點(diǎn)滴，待到十年后追憶暖眼，這邊是“十年”誕生的意義惕耕。
- 項(xiàng)目類型：開(kāi)源
系列歸屬
- Web前端構(gòu)建日志
技術(shù)選型
- 框架：Nuxt.js + Element
- 格式：TypeScript + Eslint + Prettier
編碼操作
1. 項(xiàng)目創(chuàng)建
# 遠(yuǎn)程倉(cāng)庫(kù) 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（問(wèn)題）
# 使用最新版本時(shí)，編譯失敗诫肠，所以指定低版本
cnpm install -D less@3.0.4 less-loader@5.0.0
3. element-ui 快速布局
首頁(yè)布局
4. 安裝gulp
cnpm install -D gulp
配置自動(dòng)化任務(wù) gulpfile.js
// git命令整合
exports.gitee = series(git_add, git_commit, git_push)
5. 登錄頁(yè)
登錄頁(yè)面布局
