StarBlog Blog Development Notes: Frontend Development (1) Preparation Chapter

Preface

As mentioned earlier in Developing the Blog Project StarBlog with .NET Core - (32) First Phase Wrap-up, the Vue frontend series for StarBlog has already been written.

I originally planned to publish it later, but I've been a bit lazy recently and haven't written new articles 😂. So, let me just compile and share some older posts~

PS: The articles in this series were last edited in June 2023.

My official account has enabled the paid article feature, and I plan to try it out with this StarBlog Vue series. It's okay if you don't want to pay; you can read all the articles in this series completely on my blog~

If any of you find my articles helpful, you can support me by paying on the official account. Even a small, seemingly insignificant encouragement is a huge boost to creators!

Let me ramble a bit more~

I've never had a clear plan for monetizing my creativity. Running the official account and blog is purely a hobby and a record of my daily learning.

I also lacked the determination to make a complete career shift before. However, with the current "cold winter" in the broader environment and the increasingly severe industry situation, it might take a long time before the next wave of economic boom arrives.

Therefore, I suggest all programmer friends, even if you currently have a stable income, should think of danger in times of peace and try to develop side businesses. An extra option means an extra possibility for the future.

The current paid articles are just an initial exploration. I will try more "business models" in the future. Not having to work for others is the ultimate dream of every employee, after all. Ideals must exist; what if they come true? 😃

Content Planning for This Series

The background for writing this series is to develop a blog management dashboard from scratch using Vue while learning along the way. The perspective is that of a Vue beginner, making it quite suitable for readers who are just getting started.

The entire project has been open-sourced, and reading the source code together would be even more effective: https://github.com/Deali-Axy/StarBlog-Admin

The content covers the backend functionality of the StarBlog blog, including:

• Page routing
• SASS and SCSS
• Using third-party icon libraries
• Network communication
• Building the login page
• Main page (implementing multiple tabs with Vue)
• State management and Vuex
• vue-router routing
• Common page layouts (Grid, Flex, waterfall flow, etc.)
• Common interactive features (file upload, modals)
• Rich text editor
• Using third-party component libraries (primarily ElementUI)
• Visual dashboard development
• Common problems and solutions
• Extended learning resources

The technology in this project may not be the latest, but the implemented functionality covers common requirements for management dashboards.

Rather than focusing on various fancy templates, this series emphasizes step-by-step learning and applying knowledge to new situations.

Ultimately, you'll be able to effortlessly handle the development scenario of management dashboards 😎

Environment Preparation

After all that discussion, we finally get to the main topic. The content of this article is quite simple: installing the environment and creating a project.

NodeJs

Modern frontend development emphasizes engineering practices, with everything built upon Nodejs as the JavaScript runtime environment.

Getting Started

First, you need to install Node.js.

The simplest way is to download and install it from the official website.

Download link: http://nodejs.cn/download/

Advanced Edition

Using NVM to manage the Nodejs environment is a better choice. It allows you to install multiple versions and switch between them anytime, which is very convenient.

If you are developing on the Windows platform, the experience is even better when combined with package managers like scoop.

For details, refer to the articles I published after returning to work this year after the Spring Festival:

• 2024 Practices for Enhancing Windows Development and Usage Experience - Package Manager Edition
• 2024 Practices for Enhancing Windows Development and Usage Experience - Terminal & Command Line Edition

The use of NVM is not the focus of this article. Please refer to the official NVM website: https://github.com/nvm-sh/nvm

Install Front-end Toolchain

To use NPM domestically in China, you need to set up a domestic mirror for smooth installation. The previously commonly used Taobao mirror is said to be stopping its service; you can use the npmmirror China mirror. The command is as follows:

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

Official website of the npmmirror China mirror: https://npmmirror.com/

For more information on configuring domestic mirrors, you can refer to my previous blog post: https://mp.weixin.qq.com/s/TQt7r-xyphy2KfrOvg2OBA

Install webpack

Newer versions of the scaffolding (脚手架) have webpack built-in, but StarBlog uses an older version of Vue... so you need to install it manually.

npm install -g webpack

Install vue-cli

This scaffolding (脚手架) is a must-have for Vue projects.

You must pay special attention to versions for front-end components, as many strange issues are caused by incompatible versions.

For this specific project, the Vue version used is 2.5.2.

npm install -g vue-cli

Install yarn

Yarn is a Node.js package manager released by Facebook. It is faster and more efficient than npm, and you can use Yarn as a substitute for npm.

I mentioned yarn in this previous blog post: Code Gave Me a Headache: My First Steps with React

Installation command:

npm install -g yarn

Set up the domestic mirror, same as the operation for NPM:

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

BTW, I use pnpm more often now, and I feel it's a better choice. However, for beginners, yarn is still recommended because it's simple and user-friendly. pnpm has some pitfalls, which I won't elaborate on here.

Create Project

Use vue-cli to create a project

vue init webpack starblog-admin-ui

Then it will ask for a bunch of information. Here's how I filled it in:

> 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

For the last step, you can choose between Yes use npm and Yes use yarn. Without hesitation, I chose yarn and pressed enter.

# Project Initialization Complete!
# ========================

To get started:

  cd starblog-admin-ui
  npm run dev

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

Done! vue-cli is very thoughtful and has already installed the dependencies for us~

## Running Tests

The automatically generated project directory structure is as follows:

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

Additionally, a note: Windows' tree command does not support defining the directory levels to display. Here, I chose the Node-based tree-node-cli tool.

Simply run npm install -g tree-node-cli to install it.

To achieve the effect shown above, the command is: treee -L 1

Switch to the project directory and run the command:

yarn run dev

Prompt:

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

OK, open the browser to test and everything works fine~ (I won't include screenshots).

Installing ElementUI

There aren't that many UI libraries for Vue, so I'll go with ElementUI for now. I'll check out other options later.

Let's get straight to the point.

Official Documentation: https://element.eleme.cn/#/zh-CN/component/installation

Install Dependencies

Direct Command

yarn add element-ui

Importing the Project

Modify the src/main.js file.

It originally looks like this:

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/>'
})

After adding ElementUI, it will look like this:

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, then open the default page, src/components/HelloWorld.vue.

Find any place and add an ElementUI button:

<el-button type="primary">Button</el-button>

Then open your browser to test it. If you can see the button, it means ElementUI has been successfully imported~

This concludes the preparation section.