0.node.js (JavaScript can also be run without a browser, as long as there is a JavaScript engine)
0.1.node.js is a JavaScript runtime environment based on the Chorme v8 engine;
0.2. Function:
0.2.1: JavaScript runtime environment
eg: Direct Create 01.js to write code: console.log("hello node")----> Run: node 01.js
0.2.2: Simulate server-side effect
0.2.3: BFF: Serving the front-end background
0.3. Installation: Download the package corresponding to the operation, keep clicking Just one step.
0.4. Simulate the server effect 02.js The code is as follows:
//引入http模块
const http=require('http');
//创建服务器
http.createServer(function(reqeust,response){
//发送http头部
//http状态值200，ok
//内容类型：text/plain
response.writeHead(200,{
'Content-Type':'text/html'});
//发送响应数据"hello world"
response.end('<h1>Hello node.js Server</h1>')
}).listen(8888);
//终端打印如下信息
console.log("Server running at http://127.0.0.1:8888/")
1. NPM Manager
1.1 Introduction: The full name of NPM is node package manager, which is a Node.js package management tool. It is the largest module ecosystem in the world. All modules in it are open source and free. It is also a package management tool for node.js. It is
equivalent to the front-end maven
1.2 installation. : No need to install separately, npm installs automatically after installing nodejs;
1.2.1 View: npm -v
1.3 Quick use: 1. Create a project folder ----> project initialization ( npm initset content npm init -ydirectly and quickly initialize)
2. Modify the npm image: The official management packages of npm are downloaded from http://npmjs.js, but this website is relatively slow in China, so
use Taobao NPM mirror http://npm.taobao.org/, Taobao npm mirror is a The complete
npmjs.com mirror, the synchronization frequency is currently 10 minutes, to ensure that it is synchronized with the official service as much as possible
.
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
3.下载依赖测试：npm install 依赖名称
eg： npm install jquery
#指定版本的下载
eg: npm install [email protected]
download development dependencies
npm install --save-dev eslint //只在开发环境工作区安装eslint语句检测 或简写：npm install -D eslint
npm install --global webpack //全局安装，任何地方都可以用webpack打包命令， 或简写：npm install -g webpack
其他命令
#更新包
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
4.根据配置文件下载依赖
npm install
2.element-ui is a set of front-end frameworks provided by Hungry?
3. Modularity: In the backend, it means that the object calls the object
. In the frontend, it means that js calls js
eg: es6 in two modular ways; the first one:
01.js
export default{
list(){
console.log("list.....")
},
show(){
console.log("show...")
}
}
02.js
import user from './01.js';//引入
//调用
user.list();
user.show();
然后在项目集成终端运行node 02.js
eg:es6的两种模块化写法；第二种：
01.js
export function list(){
console.log("es6的另一种写法list方法")
}
export function show(){
console.log("es6的另一种写法show方法")
}
02.js
import {
list,show} from '01.js'
list();
show();
4. babel transcoder: can convert es6 to es5; if the nodejs environment cannot directly execute es6, you need to convert es6 to es5
first.
#安装babel
npm install -g babel-cli
#查看
babel --version
#Create a .babelrc file in the root directory, the content of the file:
{
"presets": ["es2015"],
"plugins": []
}
#安装2015转码器：
npm install -D babel-preset-es2015
#使用命令进行转码：
babel src -d dist //将src目录下的文件进行转码到dist目录下
01.js transcoding is as follows:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
list: function list() {
console.log("这是一个list方法");
},
show: function show() {
console.log("这是一个·show方法");
}
};
02.js transcoding is as follows:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
list: function list() {
console.log("这是一个list方法");
},
show: function show() {
console.log("这是一个·show方法");
}
};
Both writing methods of es6 need to be transcoded by babel transcoder before using node to run js
5. webpack packaging tool
#First install the webpack tool: create a webpack file directory and initialize itnpm init -y
npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli
#View version
webpack -v
Use: Package two js packages into one #First
introduce two js files into another file
main.js 01.js
exports.info=function(str){
document.write(str)
}
02.js
exports.add=function(a,b){
return a+b
}
main.js
const a=require("./01.js")
const b=require('./02.js')
a.info('hello'+b.add(1,2))
#Create a fixed name file webpack.config.js under the packaging folder
const path=require("path") //node.js内置模块
module.exports={
entry:'./src/main.js',//配置入口文件
output:{
path:path.resolve(__dirname,'./dist'),//输出路劲,__driname:当前文件所在路劲
filename:'bundle.js' //输出文件
}
}
#Packaging command:
webpack --mode=development
#The packaged js file is in html; create the 01.html file in the webpack directory and import the bundle.js package
<body>
<script src="./dist/bundle.js"></script>
</body>
Webpack can convert a variety of static resources js, css, less into a static file, reducing page requests
#eg: package style files css
## first install the style loader
npm install -D style-loader css-loader
#Create a style.css file in the webpack directory
body{
background-color: brown;
}
#At the same time configure css under webpack.config.js
const path=require("path") //node.js内置模块
module.exports={
entry:'./src/main.js',//配置入口文件
output:{
path:path.resolve(__dirname,'./dist'),//输出路劲,__driname:当前文件所在路劲
filename:'bundle.js' //输出文件
},
module:{
rules:[
{
test:/\.css$/, //打包规则应用到以css结尾的文件上
use:['style-loader','css-loader']
}
]
}
}
#Introduce the style.css file in main.js
const a=require("./01.js")
const b=require('./02.js')
require('./style.css')
a.info('hello'+b.add(1,2))
#Delete the bundle.js file in the dist directory, and then repackage it
webpack --mode=development
#Rerun load bundle.js file in 01.html
=================================================================================================
Install the vscode software
and install the following plugins in the application management
