nodejs教程
文章目录
1.1 安装
nodejs 可以去官方网站下载，http://nodejs.cn/download/，可以根据自己的操作系统来选择自己需要的版本
node -v
查看当前的版本号
1.2 编写我们的第一个hello world
var aa ='hello world';
console.log(aa);
=================================================================
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。
C:\Users\Administrator>node -v
v8.16.0
C:\Users\Administrator>d:
D:\>cd nodejs
D:\nodejs>dir
驱动器 D 中的卷是 新加卷
卷的序列号是 9AFC-4FE4
D:\nodejs 的目录
2019/09/19 周四 下午 02:02 <DIR> .
2019/09/19 周四 下午 02:02 <DIR> ..
2019/09/19 周四 下午 02:03 40 demo_01.js
1 个文件 40 字节
2 个目录 44,000,333,824 可用字节
D:\nodejs>node demo_01.js
hello world
D:\nodejs>
1.3 函数的使用
var cc = add(1000,2220);
console.log(cc);
function add(a,b){
return a+b;
}
D:\nodejs>node demo_02.js
3220
1.4 模块调用
demo_03_1.js
// 被调用的模块。需要导出的方法
exports.add =function(a,b){
return a+b;
}
demo_03_2.js
// 主模块，去调用刚才的导出的模块
var demo = require('./demo_03_1');
console.log(demo.add(333,555));
D:\nodejs>node demo_03_2
888
1.5 创建web 服务器
var http = require('http');
const server =http.createServer((req,res)=>{
const body = 'hello world';
res.writeHead(200, {
'Content-Length': Buffer.byteLength(body),
'Content-Type': 'text/plain'
});
res.end(body);
});
server.listen(8000);
D:\nodejs>node demo_04
1.6 服务端渲染
var http = require('http');
const server =http.createServer((req,res)=>{
const body = 'hello world';
res.writeHead(200, {
'Content-Length': Buffer.byteLength(body),
'Content-Type': 'text/plain'
});
res.write(body+"\n");
res.end(body);
});
server.listen(8000);
console.log("server is runing at http://127.0.0.1:8000 ");
D:\nodejs>node demo_05
通过源码，可以看出来该代码可以看的出来是服务端渲染；
1.7 参数接收
var http = require('http');
var url = require('url');
http.createServer(function(req,res){
var body = 'hello world';
res.writeHead(200, {
'Content-Type': 'text/plain'
});
var data =url.parse(req.url,true).query;
for(var i =0; i<10;i++){
res.write("hello wolrd"+"\n");
};
res.end("name="+data.name);
}).listen(8000);
console.log("server is runing at http://127.0.0.1:8000 ");
D:\nodejs>node demo_06
server is runing at http://127.0.0.1:8000
浏览器输入：http://localhost:8000/?name=abc
输出结果：
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
hello wolrd
name=abc
1.8 npm定义
node package manager ，工具类似后端开发中的maven的角色。所以一定要花时间，还有资源站点的收集也是一个重要的任务。
NPM -V 查看版本命令
npm init 初始化项目的
npm install express 本地安装
npm root -g 查看全局安装的路径
npm install jquery -g 全局安装jquery
npm install 在package.json 路径来安装需要的模块。
1.9 淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装国内淘宝镜像
D:\nodejs\nodeDemo>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.0
updated 24 packages in 34.01s
D:\nodejs\nodeDemo>cnpm -v
cnpm@6.1.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.11.3 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@8.16.0 (C:\Program Files\nodejs\node.exe)
npminstall@3.23.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 6.1.7601
registry=https://r.npm.taobao.org
D:\nodejs\nodeDemo>
1.10 运行工程
npm run dev
1.11 编译工程
npm run build
1.12 安装webpack和脚手架
C:\Users\Administrator>cnpm install -g webpack
C:\Users\Administrator>cnpm install -g webpack-cli
C:\Users\Administrator>webpack -v
C:\Users\Administrator>"node" "C:\Users\Administrator\AppData\Roaming\npm\\node_modules\webpack\bin\webpack.js" -v
4.40.2
C:\Users\Administrator>
1.13 js 打包
bar.js
exports.info= function(str){
console.log(str);
}
logic.js
exports.add= function(a,b){
return a+b;
}
main .js
var bar = require('./bar');
var logic = require('./logic');
bar.info("hello wolrd "+ logic.add(100,2000));
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
//console.log(path.resolve(__dirname, 'dist'));
filename: 'bundle.js'
}
};
打包过程：
D:\nodejs\jsdemo>webpack
D:\nodejs\jsdemo>"node" "C:\Users\Administrator\AppData\Roaming\npm\\node_modules\webpack\bin\webpack.js"
Hash: 0f90a515a71ff262d199
Version: webpack 4.40.2
Time: 136ms
Built at: 2019-09-20 08:37:01
Asset Size Chunks Chunk Names
bundle.js 1.06 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/main.js 112 bytes {0} [built]
[1] ./src/bar.js 53 bytes {0} [built]
[2] ./src/logic.js 47 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
D:\nodejs\jsdemo>
index.html
<!doctype html>
<html>
<head>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
结果：
1.14 css 打包
css-loader 是将css装载到JavaScript中；
style-loader 是将JavaScript认识css；
cnpm install style-loader css-loader --save-dev
D:\nodejs\jsdemo>cnpm install style-loader css-loader --save-dev
√ Installed 2 packages
√ Linked 34 latest versions
√ Run 0 scripts
peerDependencies WARNING css-loader@* requires a peer of webpack@^4.0.0 but none was installed
peerDependencies WARNING style-loader@* requires a peer of webpack@^4.0.0 but none was installed
√ All packages installed (37 packages installed from npm registry, used 1s(network 1s), speed 179kB/s, json 36(98.15kB), tarball 123.99kB)
D:\nodejs\jsdemo>cnpm install style-loader css-loader -g --save-dev
Downloading style-loader to C:\Users\Administrator\AppData\Roaming\npm\node_modules\style-loader_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\style-loader_tmp\_style-loader@1.0.0@style-loader to C:\Users\Administrator\AppData\Roaming\npm\node_modules\style-loader
Installing style-loader's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\style-loader/node_modules
[1/2] loader-utils@^1.2.3 installed at node_modules\_loader-utils@1.2.3@loader-utils
[2/2] schema-utils@^2.0.1 installed at node_modules\_schema-utils@2.2.0@schema-utils
All packages installed (13 packages installed from npm registry, used 807ms(network 781ms), speed 619.38kB/s, json 13(39.42kB), tarball 444.31kB)
Downloading css-loader to C:\Users\Administrator\AppData\Roaming\npm\node_modules\css-loader_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\css-loader_tmp\_css-loader@3.2.0@css-loader to C:\Users\Administrator\AppData\Roaming\npm\node_modules\css-loader
Installing css-loader's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\css-loader/node_modules
[1/12] cssesc@^3.0.0 installed at node_modules\_cssesc@3.0.0@cssesc
[2/12] normalize-path@^3.0.0 installed at node_modules\_normalize-path@3.0.0@normalize-path
[3/12] camelcase@^5.3.1 installed at node_modules\_camelcase@5.3.1@camelcase
[4/12] postcss-value-parser@^4.0.0 installed at node_modules\_postcss-value-parser@4.0.2@postcss-value-parser
[5/12] postcss-modules-values@^3.0.0 installed at node_modules\_postcss-modules-values@3.0.0@postcss-modules-values
[6/12] postcss-modules-local-by-default@^3.0.2 installed at node_modules\_postcss-modules-local-by-default@3.0.2@postcss-modules-local-by-default
[7/12] postcss-modules-extract-imports@^2.0.0 installed at node_modules\_postcss-modules-extract-imports@2.0.0@postcss-modules-extract-imports
[8/12] icss-utils@^4.1.1 installed at node_modules\_icss-utils@4.1.1@icss-utils
[9/12] loader-utils@^1.2.3 installed at node_modules\_loader-utils@1.2.3@loader-utils
[10/12] postcss-modules-scope@^2.1.0 installed at node_modules\_postcss-modules-scope@2.1.0@postcss-modules-scope
[11/12] schema-utils@^2.0.0 installed at node_modules\_schema-utils@2.2.0@schema-utils
[12/12] postcss@^7.0.17 installed at node_modules\_postcss@7.0.18@postcss
All packages installed (35 packages installed from npm registry, used 882ms(network 861ms), speed 1.22MB/s, json 34(85.74kB), tarball 993.23kB)
D:\nodejs\jsdemo>
1.15 vscode
官网下载 https://code.visualstudio.com/
1.15.1 安装
下载64位 windows安装
1.15.2 安装中文语言包
1.15.3常用插件介绍
VsCode可以通过安装插件来使编辑器变的更加强大
以下为前端开发工程师常用插件
（1）HTML Snippets
超级实用且初级的 H5代码片段以及提示
（2）HTML CSS Support
让 html 标签上写class 智能提示当前项目所支持的样式 新版已经支持scss文件检索
（3）Debugger for Chrome
让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试，真666~
（4）vetur
vue框架所需的插件 语法高亮、智能感知、Emmet等
（5）VueHelper
snippet代码片段
1.15.4 自动保存
点击菜单 ：文件–勾选自动保存
扫一扫
1749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
