0.node.js(脱离浏览器也可以运行JavaScript,只要有JavaScript引擎就可以)
0.1.node.js是基于Chorme v8引擎的JavaScript运行环境;
0.2.作用:
0.2.1:javascript运行环境
eg:直接创建01.js编写代码:console.log("hello node")
---->运行:node 01.js
0.2.2: 模拟服务端效果
0.2.3:BFF:服务于前端的后台
0.3.安装:下载对应操作的包,一直点击下一步即可.
0.4.模拟服务器效果02.js代码如下:
//引入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管理器
1.1简介:NPM全称node package manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的,也是node.js的包管理工具
相当于前端的maven
1.2安装:不需要单独安装,安装完成nodejs之后npm自动安装上;
1.2.1查看:npm -v
1.3快速使用:1.创建项目文件夹---->项目初始化(npm init
设置内容 npm init -y
直接快速初始化)
2.修改npm镜像:npm官方的管理的包都是从http://npmjs.js下载的,但是这是网站在国内速度比较慢,所以
用淘宝NPM镜像http://npm.taobao.org/ ,淘宝npm镜像是一个完整npmjs.com镜像,同步频率目前为10分钟一次,以保证尽量与官方服务同步
具体做法:
#经过下面配置,以后所有的npm install都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list
3.下载依赖测试:npm install 依赖名称
eg: npm install jquery
#指定版本的下载
eg: npm install jquery@2.1.x
下载开发依赖
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是由饿了吗提供的一套前端框架
3.模块化:在后端中意思就是对象调用对象
在前端中意思就是js调用js
eg:es6的两种模块化写法;第一种:
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转码器:可将es6转为es5;nodejs环境若无法直接执行es6的话,需要将es6转为es5
首先需要
#安装babel
npm install -g babel-cli
#查看
babel --version
#建立.babelrc文件于根目录下,文件内容:
{
"presets": ["es2015"],
"plugins": []
}
#安装2015转码器:
npm install -D babel-preset-es2015
#使用命令进行转码:
babel src -d dist //将src目录下的文件进行转码到dist目录下
01.js转码如下:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
list: function list() {
console.log("这是一个list方法");
},
show: function show() {
console.log("这是一个·show方法");
}
};
02.js转码如下:
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
list: function list() {
console.log("这是一个list方法");
},
show: function show() {
console.log("这是一个·show方法");
}
};
es6的两种写法都需要经过babel转码器转码之后才能使用node运行js
5.webpack 打包工具
#首先进行安装webpack工具:创建一个webpack文件目录,进行初始化npm init -y
npm install -g webpack webpack-cli
或
npm install -g webpack
npm install -g webpack-cli
#查看版本
webpack -v
使用:将两个js包打包成一个
#首先引入两个js文件到另一个文件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))
#在打包文件夹下创建固定名称文件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' //输出文件
}
}
#打包命令:
webpack --mode=development
#打包出来的这个js文件在html中;在webpack目录下创建01.html文件引入bundle.js包
<body>
<script src="./dist/bundle.js"></script>
</body>
webpack可以讲多种静态资源js、css、less转换成一个静态文件,减少页面请求
#eg:打包样式文件css
##首先安装样式加载器
npm install -D style-loader css-loader
#在webpack目录下创建一个style.css文件
body{
background-color: brown;
}
#同时在webpack.config.js下配置css
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']
}
]
}
}
#在main.js中引入style.css文件
const a=require("./01.js")
const b=require('./02.js')
require('./style.css')
a.info('hello'+b.add(1,2))
#删除dist目录下的bundle.js文件,然后进行重新打包
webpack --mode=development
#在01.html中重新运行加载bundle.js文件
=================================================================================================
安装vscode软件
在应用管理中安装如下几个插件