StarBlog Blog Vue front-end development notes: (1) preparation chapter

preamble

Previously on [NetCore based blogging project StarBlog - (32) End of Phase 1It says here that StarBlog's Vue front-end series has already been written

I was going to post this later, but I've been a bit lazy lately and haven't gotten around to writing new posts 😂 I'll just organize some old ones and post them~

PS: This series was last edited on June 2023

This public site has opened up the ability to pay for posts, and I'm going to start experimenting with it on this StarBlog Vue series. It's okay if you don't want to pay for it, you can read the entire series in full on my blog~

If any students find my article helpful, you can pay to support it in the public number, a little insignificant encouragement is a great encouragement to the creators!

Plus a little more shredding~

I've never had a clear plan for realizing my creativity, and I run my public website and blog purely as a hobby and as a record of my daily learning.

I have also lacked the determination to fully transform before, but in the context of today's general winter environment, the situation of the industry is becoming more and more severe, and it may be a long time before the next round of economic outburst.

So I suggest that all programmer friends, even if you currently have a stable income, you should be prepared for danger and try to expand your side business, one more option and one more possibility for the future.

Today's paid articles can only be considered in the initial exploration, I will try more "business model", not working is the ultimate dream of every worker, after all, there is always an ideal, in case it is realized? 😃

Content planning for this series

The background of this series of writing is from scratch while learning to use Vue to develop a set of blog management backend, the writing perspective is Vue beginners, so it is quite suitable for students who have just started to read.

The whole project has been open source, with the source code to read the words better:./Deali-Axy/StarBlog-Admin

The content covers to the backend functions of the StarBlog blog, including:

• Page Routing
• SASS and SCSS
• Use of third-party icon libraries
• network communication
• Login page writing
• Main page (multi-tabbed using Vue)
• State Management with Vuex
• vue-router routing
• Common page layouts (Grid, Flex, Waterfall, etc.)
• Common interactive functions (file upload, pop-up windows)
• rich text editor (computing)
• Third-party component library usage (mainly ElementUI)
• Visualization of large screen development
• Frequently Asked Questions and Solutions
• Extended Learning Materials

The technology of this project is not up-to-date, but the implemented features cover the common functional requirements of the management backend.

This series focuses more on learning step-by-step and learning by example as you go along than on various lofty templates.

Eventually take the admin backend as a development scenario at random 😎

environmental preparation

Having said that, finally get to the point, this article is very simple, is to install the environment and create the project.

NodeJs

Modern front-end development is all about engineering, and everything is based on Nodejs, the JavaScript runtime environment.

introductory version

First you need to install NodeJs

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

Download at./download/

advanced version

Using NVM to manage your Nodejs environment is a much better option, as you can install multiple versions and switch between them whenever you want.

If you are developing on Windows platform, you will have a better experience if you use a package manager like scoop.

For more details, see my post after the start of this spring:.

• Some Practices to Enhance the Windows Development and Usage Experience in 2024 - Package Manager Episode
• Enhancing the Windows Development and Usage Experience - Terminal & Command Line, 2024

The use of NVM is not the focus of this article, please refer to the official NVM website at./nvm-sh/nvm

Installing the front-end toolchain

Domestic use of NPM need to set up domestic mirrors in order to install properly, before the commonly used Taobao mirror said to stop parsing, you can use thisnpmmirror China Mirror, the command is as follows:

npm config set registry 

npmmirror China mirror site official website:/

More on configuring domestic mirrors can be found in my previous blog:/s/TQt7r-xyphy2KfrOvg2OBA

Install webpack

Newer versions of scaffolding are built-in, but StarBlog uses an older version of Vue... which you'll need to install yourself!

npm install -g webpack

Installing vue-cli

Vue projects must have this scaffolding installed

Front-end components must pay special attention to the version, a lot of strange problems are caused by version incompatibility

For this project, the vue version is 2.5.2.

npm install -g vue-cli

Installing yarn

Yarn is a package manager released by Facebook that is faster and more efficient than npm and can be used instead of npm.

I mentioned yarn in this previous blog post.Code Gives Me a Headache: A React Primer

Installation commands

npm install -g yarn

Setting up a domestic mirror is the same as for NPM.

yarn config set registry 

PS: By the way, I now use pnpm more, I feel that it is a better choice, but newbies still use yarn, simple and easy to use, pnpm still has some pitfalls, I will not expand on it here~.

Create a project

utilizationvue-cli to create a project

vue init webpack starblog-admin-ui

Then it asks for a bunch of information, and here's how I filled it out:

> vue init webpack starblog-admin-ui

? Project name: starblog-admin-ui
? Project description: Admin dashboard of StarBlog
? Author: DealiAxy <dealiaxy@>
? 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

The last step can be selectedYes use npm respond in singingYes use yarnNo doubt I chose yarn, and then enter.

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

To get started:

  cd starblog-admin-ui
  npm run dev

Documentation can be found at /webpack

Done!vue-cli It was very thoughtful to help us install the dependency as well~

operational test

The directory structure of the auto-generated project is as follows

starblog-admin-ui
├── build
├── config
├── node_modules
├── src
├── static
├── test
├── 
├── 
├── 
└── 

As a side note, the Windowstree command does not support defining the directory hierarchy to be displayed, here I chose the Node-basedtree-node-cli artifact

simplynpm install -g tree-node-cli can immediately (do sth)

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

Switch to the project directory and execute the command

yarn run dev

draw attention to sth.

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

OK, open the browser test everything is normal ~ (screenshots I will not put)

Install ElementUI

There aren't many vue UIs out there, so let's start with this one, and then take a look at it later.

talk without further ado

Official Documentation:/#/zh-CN/component/installation

Installation of dependencies

direct order

yarn add element-ui

Import Project

modificationssrc/ file

The original looked like this.

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

 = false

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

This is what it looks like with ElementUI added

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

 = false

(ElementUI)

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

OK and then open the default page.src/components/

Add an elementUI button anywhere

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

Then open your browser and test it, if you can see the button, then the introduction of ElementUI is successful~.

This is the end of the preparation chapter.