1. Introduction
1. Introduction to front-end development
The front-end engineer "Front-End-Developer" originated from the United States. Since about 2005, the formal role of front-end engineer has been recognized by the industry. By 2010, the Internet began to fully enter the mobile era, and the work of front-end development became more and more important.
At first, all the development work was done by the back-end engineers. As the business became more and more complicated, the workload became larger, so we separated the development work of the visualization part and some interactive functions in the project to form the front-end development.
Due to the rapid development of the Internet industry, different countries have completely different division of labor systems.
In Japan and some countries with relatively sparse populations, such as Canada and Australia, "Full-Stack Engineer" is popular, which is what we usually call a full-stack engineer. In layman's terms, in addition to one person completing front-end development and back-end development work, some companies may be the same person from product design to project development to later operation and maintenance, and may even be responsible for UI, animation, or Sweeping the floor, cleaning windows, writing documents, repairing tables and chairs, etc.
However, in the United States and other countries with a relatively developed Internet environment, the division of labor and cooperation in project development is more clear. The entire project development is divided into three development stages: front-end, middle-level and back-end. These three stages are respectively carried out by three or more people. Collaboratively complete.
Most Internet companies in China only have front-end engineers and back-end engineers. Some of the work in the middle layer is done by the front-end, and some by the back-end.
PRD (Product Prototype - Product Manager) - PSD (Visual Design - UI Engineer) - HTML/CSS/JavaScript (PC/Mobile webpage, to achieve visual display and interaction on the webpage - Front-end Engineer)
2. Download and install VS Code and use it
2.1. Download address
https://code.visualstudio.com/
2.2. Plug-in installation
To facilitate subsequent development, it is recommended to install the following plug-ins
2.3. Create a project
Vscode itself does not have the option to create a new project, so first create an empty folder, such as project_xxxx.
Then open vscode, and then select File -> Open Folder in vscode to open the folder, so that the project can be created.
2.4. Save workspace
After opening the folder, select "File -> Save Workspace As...", give the workspace file a name, and store it in the folder just now
2.5. Create new folders and web pages
2.6. Preview webpage
Open web page preview as file path
The "open in browser" plugin needs to be installed:
Right click on the file -> Open In Default Browser
Open web page preview in server mode
The "Live Server" plugin needs to be installed:
Right click on the file -> Open with Live Server
2.7. Set font size
Left column Manage -> settings -> search "font" -> Font size
2. Introduction to ES6
1. Introduction to ECMAScript 6
ECMAScript 6.0 (hereinafter referred to as ES6) is the next-generation standard of the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.
2. Basic grammar
This part only learns the minimum necessary knowledge of ES6 in front-end development, so as to facilitate the understanding of code in later project development.
2.1, template string
create-template-string.html
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.2.2, object extension operator
Create object extension operator.html
The spread operator (...) is used to take out all traversable properties of the parameter object and copy them to the current object.
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}2.3. Arrow function
Create Arrow Function.html
Arrow functions provide a more concise way of writing functions. The basic syntax is: parameter => function body
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+bSimple, getting started with ES6 is just to let you understand the basic grammar used in this project
3. Basics of Vue
1. Getting Started
1.1. What is Vue.js
Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.
Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is also fully capable of powering complex single-page applications.
Official website: https://cn.vuejs.org
1.2. Examples
Create demo.html
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {
{}} 插值表达式，绑定vue中的data数据 -->
{
{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>This is declarative rendering: At its core, Vue.js is a system that allows data to be declaratively rendered into the DOM using a concise template syntax
The core idea here is that there is no cumbersome DOM operation. For example, in jQuery, we need to find the div node first, get the DOM object, and then perform a series of node operations
2. Instance life cycle
Create the life cycle of vue instance.html
<body>
<div id="app">
{
{info}}
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
info:'hello atguigu'
},
created() { //渲染前
debugger
console.log('created....')
},
mounted() { //渲染后
debugger
console.log('mounted....')
}
})
</script>
</body>3、Axios
Axios is a project independent of Vue, a promise-based http client for browsers and node.js
In the browser, it can help us complete the sending of ajax requests
In node.js, you can send requests to remote interfaces
Introduce js files of vue and axios
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>Make an axios call
var app = new Vue({
el: '#app',
data: {
memberList: []//数组
},
created() {
this.getList()
},
methods: {
getList(id) {
axios.get('data.json')
.then(response => {
console.log(response)
this.memberList = response.data.data.items
})
.catch(error => {
console.log(error)
})
}
}
})Create data.json file
{
"success":true,
"code":20000,
"message":"成功",
"data":{
"list":[
{"name":"lucy","age":20},
{"name":"mary","age":30},
{"name":"jack","age":40}
]
}
}console view output
4. Introduction to Node.js
1. Introduction to Node.js
1.1. What is Node.js
Simply put, Node.js is JavaScript running on the server side.
Node.js is an event-driven I/O server-side JavaScript environment. Based on Google's V8 engine, the V8 engine executes Javascript very fast and has very good performance.
1.2. What is the use of Node.js
If you are a front-end programmer, you don't know dynamic programming languages like PHP, Python or Ruby, and you want to create your own services, then Node.js is a very good choice.
Node.js is JavaScript running on the server side, if you are familiar with Javascript, then you will easily learn Node.js.
Of course, if you are a back-end programmer and want to deploy some high-performance services, then learning Node.js is also a very good choice.
2. Node.js installation
2.1. Download
Official website: https://nodejs.org/en/
Chinese website: http://nodejs.cn/
LTS: Long Term Support Release
Current: latest version
2.2. Install and view version
node -v3. Easy to get started
Create 01-console program.js
console.log('Hello Node.js')Enter the directory where the program is located, enter
node 01-控制台程序.jsThe browser's kernel consists of two parts:
DOM rendering engine;
js parser (js engine)
js runs inside the js engine in the browser's kernel
Node.js is a JavaScript program that runs out of the browser environment, based on the V8 engine (Chrome's JavaScript engine)
5. NPM
1. Introduction to NPM
1.1, what is NPM
The full name of NPM is Node Package Manager. It is a Node.js package management tool and the largest module ecosystem in the world. All modules in it are open source and free. It is also a Node.js package management tool, which is equivalent to Maven on the front end.
1.2. The installation location of NPM tools
We can easily download the js library and manage the front-end project through npm.
The location of npm packages and tools installed by default in Node.js: Node.js directory\node_modules
In this directory, you can see the npm directory. npm itself is a tool managed by the NPM package manager, indicating that Node.js has integrated the npm tool.
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v2. Use npm to manage projects
2.1. Create folder npm
2.2. Project initialization
#建立一个空文件夹，在命令提示符进入该文件夹 执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y2.3. Modify the npm image
The official packages managed by NPM are all downloaded from http://npmjs.com , but this website is very slow in China.
It is recommended to use the Taobao NPM mirror http://npm.taobao.org/ . The Taobao NPM mirror is a complete npmjs.com mirror. The synchronization frequency is currently once every 10 minutes to ensure that it is synchronized with the official service as much as possible.
Set the mirror address:
# 经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list2.4. Use of npm install command
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
#如果安装时想指定特定的版本
npm install [email protected]6. Modular development
1. Introduction to Modularization
1.1, the background of modularization
As websites gradually become "Internet applications", the Javascript code embedded in web pages becomes larger and more complex.
Javascript modular programming has become an urgent need. Ideally, developers only need to implement the core business logic, and other modules can be loaded by others.
但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模块"（module）了。
1.2、什么是模块化开发
传统非模块化开发有如下的缺点：
命名冲突
文件依赖
模块化规范：
CommonJS模块化规范
ES6模块化规范
2、ES6模块化写法（一）
每个文件就是一个模块，有自己作用域。在一个文件里定义的变量、函数、类，都是私有的，对其他文件不可见。ES6使用 export 和 import 来导出、导入模块。
2.1、导出模块
创建 src/userApi.js
export function getList() {
console.log('获取数据列表')
}
export function save() {
console.log('保存数据')
}2.2、导入模块
创建 src/userComponent.js
//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()注意：这时程序无法运行，因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行。
2.3、安装Babel
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
安装命令行转码工具
Babel提供babel-cli工具，用于命令行转码。它的安装命令如下：
npm install --global babel-cli
#查看是否安装成功
babel --version
2.4、配置.babelrc
Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则，将es2015规则加入 .babelrc：
{
"presets": ["es2015"],
"plugins": []
}2.5、安装转码器
在项目中安装
npm install --save-dev babel-preset-es20152.6、转码
# 整个目录转码
mkdir dist1
# --out-dir 或 -d 参数指定输出目录
babel src -d dist12.7、运行程序
node dist1/userComponent.js3、ES6模块化写法（二）
3.1、导出模块
创建 es6/userApi2.js
export default {
getList() {
console.log('获取数据列表2')
},
save() {
console.log('保存数据2')
}
}3.2、导入模块
创建 es6/userComponent2.js
import user from "./userApi2.js"
user.getList()
user.save()3.3、转码
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel es6 -d dist23.4、运行程序
node dist2/userComponent2.js