上手一個 Vue 的入門專案

王老闆的前端發表於2020-05-14
Vue

專案詳細描述

見首發帖 分享： 使用 Vue + Markdown 完成的一個線上 Markdown 簡歷專案——1024 RESU...

專案名稱

1024 RESUME

專案地址

專案背景

Jack 要開始新的求職生涯喲。求職大概幾件事情得做。

  1. 簡歷
  2. 面試
  3. 合同

看了很多模板都不喜歡。市面上符合程式設計師的簡歷模板真的太少了。

功夫不負有心人。最終找到了一個——冷熊簡歷 cv.ftqq.com

前輩做的真不錯。索性，我照抄一個專案。

程式碼都是我寫的，前輩是 React + PHP，我就搞一個 Vue + Node。

說幹就幹！

專案程式碼

Step One 專案基礎搭建

  1. 本地全域性安裝 Vue Cli
npm install -g @vue/cli
# or
yarn global add @vue/cli
  1. 建立專案 resume
  • 首先開啟了我的專案目錄 code，然後使用 vs code 開啟檔案目錄

  • 使用 Vue Cli 初始化 Vue 專案 resume
vue create resume

我們需要使用 scss 、eslint、babel




Save this as a preset for future projects? (y/N) n
  1. 我們可以看一下 package.json 檔案
{
  "name": "resume",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.26.3",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}
  1. 跑一下當前的專案。
  • npm run serve
Microsoft Windows [版本 10.0.18362.778]
(c) 2019 Microsoft Corporation。保留所有權利。

D:\code\resume>npm run serve

> resume@0.1.0 serve D:\code\resume
 DONE  Compiled successfully in 4879ms                                              10:57:28

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.3:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
  • 點選 http://localhost:8080/，看一下我們的專案頁面。

  • F12 檢視瀏覽器控制檯

我們沒有看到任何報錯，恭喜你最簡單的 Vue 應用跑起來了。

Step Two 開始頁面佈局

  • 元件拆分


觀察冷熊簡歷 cv.ftqq.com，我們可以分為三個元件。

  1. SideBar.vue 最左側
  2. SectionBar.vue 中間部分
  3. WorkingBox.vue 右側編輯器


動起來，去掉 components 目錄新建三個元件檔案，刪除預設的 HelloWorld.vue 元件檔案。



  • 為了後面方便使用，我們去專案根目錄新建一個 vue.confog.js 的配置檔案。
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
module.exports = {
  // 訪問的路徑
  publicPath: IS_PROD === 'production' ? '/resume/' : '/',
  chainWebpack: config => {
    // 新增別名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@image', resolve('src/assets/image'))
      .set('@scss', resolve('src/assets/scss'))
      .set('@components', resolve('src/components'))
  }
}

關注我們

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章