StarBlog部落格Vue前端開發筆記：(1)準備篇

程序设计实验室發表於2024-12-10
Vue前端筆記

前言

之前在【基於.NetCore 開發部落格專案 StarBlog - (32) 第一期完結】裡說到 StarBlog 的 Vue 前端系列已經寫好了

本來打算後面再發的，不過最近有點懶沒去寫新的文章 😂 還是整理一些老文發出來吧~

PS：這個系列的文章最後編輯於 2023 年 6 月

本公眾號開通了付費文章的功能，我打算在這個 StarBlog Vue 系列上開始嘗試一下。不想付費也沒關係，您可以在我的部落格上完整閱讀本系列的全部文章~

如果有同學覺得我的文章有幫助，可以在公眾號付費支援一下，一點不起眼的鼓勵都是對創作者莫大的鼓勵！

另外再碎碎念一下~

對於創作變現，我一直沒有明確的規劃，運營公眾號和部落格純粹是作為興趣愛好，以及作為日常學習的記錄。

之前我也一直缺乏完全轉型的決心，但在如今大環境寒冬的背景下，行業形勢愈發嚴峻，也許還得等很久，才能迎來下一輪經濟爆發期。

所以我建議各位程式設計師朋友，即使目前有穩定的收入，也應該居安思危，嘗試擴充一下副業，多一種選擇也多一種未來的可能。

如今的付費文章只能算在初步摸索，接下來我會嘗試更多的“商業模式”，不打工是每個打工人的終極夢想，畢竟理想總要有的嘛，萬一實現了呢？😃

本系列內容規劃

本系列的寫作背景是從零開始邊學邊用 Vue 開發一套部落格的管理後臺，寫作視角是 Vue 的初學者，所以挺適合剛入門的同學閱讀。

整個專案已經開源，搭配原始碼閱讀的話效果更佳: https://github.com/Deali-Axy/StarBlog-Admin

內容覆蓋到 StarBlog 部落格的後臺功能，包括：

  • 頁面路由
  • SASS 與 SCSS
  • 第三方圖示庫的使用
  • 網路通訊
  • 登入頁面編寫
  • 主頁面（使用 Vue 實現多標籤頁）
  • 狀態管理與 Vuex
  • vue-router 路由
  • 常見頁面佈局（Grid、Flex、瀑布流等）
  • 常用互動功能（檔案上傳、彈窗）
  • 富文字編輯器
  • 第三方元件庫使用（主要是 ElementUI）
  • 視覺化大屏開發
  • 常見問題與解決
  • 擴充套件學習資料

本專案的技術不是最新的，不過實現的功能覆蓋到管理後臺常見的功能需求。

比起各種高大上的模板，本系列更側重於一步步學習，並且在學習中舉一反三。

最終把管理後臺這個開發場景隨便拿捏 😎

環境準備

說了這麼多，終於開始正題了，本文的內容很簡單，就是安裝環境和建立專案。

NodeJs

現代前端開發講究工程化，萬物基於 Nodejs 這個 JavaScript 執行環境

入門版

首先需要安裝 NodeJs

最簡單的方式是在官網下載安裝

下載地址: http://nodejs.cn/download/

進階版

使用 NVM 管理 Nodejs 環境是更好的選擇，可以安裝多個版本，隨時能切換，方便得很。

在 Windows 平臺開發的話，如果搭配 scoop 之類的包管理器，體驗更好。

詳情見我今年春節後開工發的文章:

  • 2024 年，提升 Windows 開發和使用體驗的一些實踐 - 包管理器篇
  • 2024 年，提升 Windows 開發和使用體驗實踐 - 終端&命令列篇

關於 NVM 的使用不是本文的重點，請參考 NVM 官網: https://github.com/nvm-sh/nvm

安裝前端工具鏈

國內使用 NPM 需要設定國內映象才能正常安裝，之前常用的淘寶映象說是要停止解析了，可以用這個 npmmirror 中國映象，命令如下：

npm config set registry https://registry.npmmirror.com

npmmirror 中國映象站官網：https://npmmirror.com/

更多配置國內映象的內容可以參考我之前的部落格：https://mp.weixin.qq.com/s/TQt7r-xyphy2KfrOvg2OBA

安裝 webpack

新版本的腳手架都是內建的了，不過 StarBlog 用的 Vue 比較老… 需要自己安裝

npm install -g webpack

安裝 vue-cli

Vue 專案必須安裝這個腳手架

前端元件必須特別注意版本，很多奇奇怪怪的問題都是版本不相容導致的

具體到本專案，使用的 vue 版本是 2.5.2

npm install -g vue-cli

安裝 yarn

Yarn 是 Facebook 釋出的 node.js 包管理器，比 npm 更快、更高效，可以使用 Yarn 替代 npm。

關於 yarn 我在之前的這篇部落格裡有提到: 程式碼使我頭疼之 React 初學習

安裝命令

npm install -g yarn

設定國內映象，跟 NPM 的操作一樣

yarn config set registry https://registry.npmmirror.com

PS：順便提一嘴，我現在用 pnpm 更多，感覺是更好的選擇，不過新手還是用 yarn 吧，簡單好用，pnpm 還是有一些坑的，這裡就不展開了~

建立專案

使用 vue-cli 來建立專案

vue init webpack starblog-admin-ui

然後會問一堆資訊，我是這樣填的：

> vue init webpack starblog-admin-ui

? Project name: starblog-admin-ui
? Project description: Admin dashboard of StarBlog
? Author: DealiAxy <dealiaxy@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests: No
? Pick a test runner: noTest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn

最後一步可以選 Yes use npm 和 Yes use yarn，毫無疑問我選了 yarn，然後回車

# Project initialization finished!
# ========================

To get started:

  cd starblog-admin-ui
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

搞定！vue-cli 很貼心，幫我們把依賴也安裝好了~

執行測試

自動生成專案的目錄結構如下

starblog-admin-ui
├── build
├── config
├── node_modules
├── src
├── static
├── test
├── README.md
├── index.html
├── package.json
└── yarn.lock

另外提一點，Windows 的 tree 命令不支援定義要顯示的目錄層級，這裡我選擇了基於 Node 的 tree-node-cli 工具

只需要 npm install -g tree-node-cli 即可

要實現以上的效果，命令是：treee -L 1

切換到專案目錄下，執行命令

yarn run dev

提示

 DONE  Compiled successfully in 2301ms                                                                          
 I  Your application is running here: http://localhost:8080

OK，開啟瀏覽器測試一切正常~ （截圖我就不放了）

安裝 ElementUI

vue 的 UI 好像不是很多，先選這個 elementUI 吧，後續再看看

話不多說

官網文件：https://element.eleme.cn/#/zh-CN/component/installation

安裝依賴

直接命令

yarn add element-ui

匯入專案

修改 src/main.js 檔案

原本長這樣

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

新增了 ElementUI 之後長這樣

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '<App/>'
})

OK 然後開啟預設的頁面，src/components/HelloWorld.vue

隨便找個地方新增一個 elementUI 的按鈕

<el-button type="primary">按鈕</el-button>

然後開啟瀏覽器測試一下，能看到按鈕就是引入 ElementUI 成功了~

準備篇到這就收工啦。

相關文章