This article will summarize and sort out the front-end technology stack currently used by the author, which is very basic. If you know something about the basic JS/HTML/CSS framework, but you don't know or feel confused about the current popular web framework, more directly the technology that can be employed, then I believe you will gain enough after reading this article.
Basics
This part includes the most basic structure of the front-end framework. After completing the installation and configuration of this section, you will be able to carry out the most basic front-end project development.
nodejs - core
In short, nodejs is the server version of javascript. It is lightweight and efficient, and its syntax is almost the same as that of js. If you know js before, the learning cost of nodejs is almost zero. Nodejs also includes a plug-in manager called npm, which is used to install and use a large number of third-party packages without caring how to download them.
nvm - version management
nvm (Node Version Manager) is the version controller of nodejs. In the development of actual projects, we often encounter the situation that the version of nodejs required by the project is different from the version we are using now. nvm solves this problem very well. nvm can quickly install / switch / delete different versions of nodejs.
Installation and use
After the installation is completed, enter nvm version in cmd and the version number pops up, which means the installation is successful
nvm version # -> 1.1.7
nvm is a pure command-line operation. nvm can be run in cmd anywhere. For more commands, type nvm -h to view
| Main command | introduce |
|---|---|
| nvm install node version number | Install nodejs and the corresponding version of npm. After installation, the path will be automatically configured |
| nvm list [available] | You can view the installed node and add available to view all node versions |
| nvm use node version number | Use the corresponding version of nodejs |
| nvm uninstall installed node version number | Delete the corresponding version of nodejs |
yarn - better package management
The use of yarn is simpler, safer and more reliable, and the prompt is more friendly. And yes, it is also a pure command-line operation.
Installation and use
After accessing the official website to download and install, type "yarn -v" on the command line, and the version number will be displayed to indicate that the installation is successful.
yarn -v # -> 1.9.4
Please use the following commands in the directory of the project. For more commands, please type yarn -h to view
| Main command | introduce |
|---|---|
| yarn | Install existing dependencies in the current directory |
| yarn add package name | Install the specified package for the project in the current directory |
| yarn global add package name | Global installation package (mostly used for installation tools) |
| yarn remove package name | Delete specified package |
| yarn config set registry 'https://registry.npm.taobao.org' | Switch to Taobao source for faster download |
Editor and plug-in
VS Code - easy to use editor
Needless to say, vscode's negligible installation package (44M), simple interface, completely free, massive plug-ins, built-in git, retreat into the Zen mode of Zhitong, and completely open source all make this editor our first choice.
ESLint - code style check
ESLint is a code checker for unified style. It has many built-in rules. For example, the maximum nesting cannot exceed five layers, variables must be used after definition, switch statements must contain default, etc., so that everyone can write unified style code, so as to avoid some small but fatal bug s and increase readability.
framework
vue main frame
vue can be said to be the core of the whole system, and it is also the place where we need to focus on learning. vue is a front-end framework based on nodejs. It uses yarn to manage its large number of components, such as element and v-chart mentioned below. vue is a component-based and data-driven framework, which can make the code easier to maintain, and also enable developers to focus more on the creation of content rather than wasting time on details.
pug - better HTML
pug is a template language, which is simpler and more comfortable to write than the traditional html syntax
- Install by typing "yarn add pug" in the command line under the project directory
> yarn add pug yarn add v1.9.4 info No lockfile found. [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 55 new dependencies. info Direct dependencies └─ pug@2.0.3 info All dependencies ├─ @types/babel-types@7.0.4 ... A lot of dependence ... └─ yargs@3.10.0 Done in 19.06s.
- Basic grammar comparison
| pug | html |
|---|---|
| a(href='baidu.com ') Baidu | < a href = "Baidu. Com" > Baidu</a> |
| #main pug No.1 in the world | < div id = "main" > Pug No.1 in the world < / div > |
| . main pug No.1 in the world | < div class = "main" > Pug No.1 in the world < / div > |
- vue reference: set the lang attribute of the component template block to pug
<template lang="pug">
#container
a(href='https://pugjs.org/') pug official website
</template>
stylus
Stylus is a precompiled style language used to replace css. Compared with css, stylus is also more concise, easier to read and maintain
- Install by typing "yarn add stylus" in the command line under the project directory
> yarn add stylus yarn add v1.9.4 warning package.json: No license field warning No license field [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 18 new dependencies. info Direct dependencies └─ stylus@0.54.5 info All dependencies ├─ amdefine@1.0.1 ... A bunch of dependencies ... └─ stylus@0.54.5 warning No license field Done in 4.31s.
- Basic grammar comparison
stylus omits curly braces, semicolons, colons, indents control structures, and uses function reuse
border-radius(arg) -webkit-border-radius arg -moz-border-radius arg border-radius arg body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)
css is bloated, cumbersome and repetitive
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
- In vue, set the lang attribute of the component style block to stylus
<style lang="stylus" scoped> ... </style>
elementUI - UI component library
elementUI is a set of UI component library based on vue framework, which is a bit similar to bootStrap and developed by hungry. You can easily build a beautiful page. The use of its components also needs to be studied in detail See here.
- Install by typing yarn add element UI in the command line under the project directory
> yarn add element-ui yarn add v1.9.4 warning package.json: No license field warning No license field [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... warning " > element-ui@2.4.10" has unmet peer dependency "vue@^2.5.2". [4/4] Building fresh packages... success Saved lockfile. success Saved 7 new dependencies. info Direct dependencies └─ element-ui@2.4.10 info All dependencies ├─ async-validator@1.8.5 ... A little bit dependent ... └─ throttle-debounce@1.1.0 warning No license field Done in 12.95s.
- Use elementUI in vue in main JS add the following code
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
v-chart-a simple and beautiful chart
v-chart is a set of vue chart components based on echart package. Echart is a very popular and powerful chart display component at the front end, but it also brings cumbersome configuration items. v-chart simplifies the complex configuration for easier use.
leaflet - lightweight map
leaflet is a lightweight open source map component, which is easier to use than Gaode Baidu.
Learn more about front-end training technology, welcome to pay attention to Xiaobian!