第一部分相关操作

nodejs入门

1.安装和简单功能实现

（a）简单实现输出值到控制台

新建demo.js

var a=1;
var b=2;
console.log(a+b);

在当前路径下，调出控制台输入：

node demo1,输出3

（b）模块化开发

新建demo2_1.js exports 提供了外部访问的接口

// 被调用的模块
exports.add=function(a,b){
    return a+b;
}

新建demo2_2.js

//调用模块
var demo = require('./demo2.js');
var result = demo.add(100,200);
console.log(result);

控制台node demo2_2,输入结果为300

（c）新建web服务器

// 创建web服务器
var http=require('http')
http.createServer( function(request,response){
   response.writeHead(200,{'Content-Type':'text/plain'});
   response.end('Hello world');
}).listen(8888);

执行命令：node demo4

浏览器访问：localhost:8888

输入效果： hello world

(d) 服务端渲染（对比当前jsp页面的客户端渲染的区别）

// 创建web服务器
var http=require('http')
http.createServer( function(request,response){
   response.writeHead(200,{'Content-Type':'text/plain'});
   
   for (var i=1; i<11;i++) {
	   response.write("Helloworld \n ");
   }
   response.end('----');
}).listen(8888);

通过审查元素发现，页面只有响应的输出的结果，并没有响应的页面

(e) 解析页面的传入的参数

// 创建web服务器
var http = require('http');
var url = require('url'); 

http.createServer( function(request,response){
   response.writeHead(200,{'Content-Type':'text/plain'});
   
   //	解析url参数
   var params = url.parse(request.url,true).query;
   response.write("name:"+params.name);
   response.write("\n");
  
   response.end();
}).listen(8888);

第二部分包资源管理器npm

npm 全程是Node Package Manager ,node包资源管理和分发工具，可以理解为前端的Maven

功能：通过npm下载js库，管理前端工程

通过npm -v 查看版本号

1.npm命令

a.npm init 命令

会生成package.json的文件

{
  "name": "abc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

（b）npm install express下载

-- express为node的web框架，在该模块下会生成node_modules和package-lock.json

启动node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）

pakage-lock.json 是当node_modules或package.json发生变化时自动生成的文件，这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候声称相同的依赖，而忽略项目开发中有些依赖已经发生的更新

（c）npm run dev 包管理工具的命令

dev 是开发阶段测试运行

build是构建编译工程

lint 是运行js代码检测

执行在package.json的脚手架

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },

(d) npm run build 编译工程

生产后只有一个静态页面，和一个static文件夹,这种工程我们成为单页Web应用（Single page web application, SPA），就是只有一张web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序

第三部分 webpack

1.初步了解

中文网站 www.webpackjs.com

2.webpack打包操作

a.cnpm install webpack -g 全局安装webpack打包工具

b.cnpm install webpack-cli -g 全局安装webpack界面

3.js打包

在G:\IDEAWorkSpace\nodeDemo\webpackDemo\jsDemo\src新建如下目录

bar.js

// bar
exports.info = function(str){
	document.write(str);
}

//logic	
exports.add = function(a,b){
   return a+b;
}

main.js

//main.js
var bar = require('./bar');
var logic = require('./logic');
bar.info('Hello world_' + logic.add(100,200));

在jsDemo同一级目录新建webpack.config.js

const path = require('path');

//  导出
//  entry 程序的入口
//  输出到dist目录下，__dirname全局的变量，当前文件所在目录下的dist目录
//  打包的文件名称 filename
module.exports = {
  entry: './src/main.js',
  output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
  }
};

在jsDemo目录下执行webpack命令

生成bundle.js

在jsDemo目录新建index.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

4.css打包

(1)安装style-loader和css-loader

Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换

Loader可以理解为模块和资源的转换器，它本身就是一个函数，接收源文件作为作为参数，返回转换的结果。这样就可以通过

require来加载任何类型的模块或文件，比如CoffeeScript、JSX、LESS 或图片。首先我们需要安装相关Loader插件，

css-loader是将css装载到JavaScript，style-loader是让JavaScript认识css

cnpm install style-loader css-loader --save-dev

说明： -dev 这是在开发阶段进行添加，生产环境已经打包完成，不需要添加，执行之后会在package.json中添加如下的语句

{
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1"
}
}

对webpack.config.js文件进行改造

const path = require('path');

// 导出
// entry 程序的入口
// 输出到dist目录下，__dirname全局的变量，当前文件所在目录下的dist目录
// 打包的文件名称 filename
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},

// 添加css的转换器，以数组形式添加到里面
module: {
rules: [
{test: /\.css$/, use: ['style-loader','css-loader']}
]
}
};

在G:\IDEAWorkSpace\nodeDemo\webpackDemo\jsDemo\src目录下新建css1.css

body{
	background: red;
}

在main.js中引入

require('./css1.css');

重新再jsDemo目录进行打包操作

查看bundle.js会将css添加进去，然后访问index.html

呈现效果如下：

第四开发工具VsCode

1.下载地址（当然，要下载稳定版）

https://code.visualstudio.com

简单使用 https://blog.csdn.net/qq_35275233/article/details/87908500

新建index.html

安装插件

常用的插件安装

（1）HTML Snippets 超级使用且初级的H5代码片段以及提示

（2）HTML CSS Support 让html标签上写class，智能提示当前项目所支持的样式，新版已经支持scss文件检索

（3）Debugger for Chrome

让vscode映射chrome 的debug功能，静态页面都可以用VsCode来打断点调试

(4)vetur

vue框架所需的插件，语法高亮，智能感知，Emmet等

（5） vueHelper

snippet代码片段

SpringCloud 学习笔记前端（一） node的基本使用介绍、包资源管理器NPM、webpack、vsCode开发工具的使用

第一部分相关操作

1.安装和简单功能实现

（a）简单实现输出值到控制台

（b）模块化开发

（c）新建web服务器

(d) 服务端渲染（对比当前jsp页面的客户端渲染的区别）

(e) 解析页面的传入的参数

第二部分包资源管理器npm

1.npm命令

a.npm init 命令

（b）npm install express下载

（c）npm run dev 包管理工具的命令

(d) npm run build 编译工程

第三部分 webpack

1.初步了解

2.webpack打包操作

a.cnpm install webpack -g 全局安装webpack打包工具

b.cnpm install webpack-cli -g 全局安装webpack界面

3.js打包

4.css打包

第四开发工具VsCode

1.下载地址（当然，要下载稳定版）

猜你喜欢

SpringCloud 学习笔记 前端（一） node的基本使用介绍、包资源管理器NPM、webpack、vsCode开发工具的使用

第一部分 相关操作

1.安装和简单功能实现

（a）简单实现输出值到控制台

（b）模块化开发

（c）新建web服务器

(d) 服务端渲染（对比当前jsp页面的客户端渲染的区别）

(e) 解析页面的传入的参数

第二部分 包资源管理器npm

1.npm命令

a.npm init 命令

（b）npm install express下载

（c）npm run dev 包管理工具的命令

(d) npm run build 编译工程

第三部分 webpack

1.初步了解

2.webpack打包操作

a.cnpm install webpack -g 全局安装webpack打包工具

b.cnpm install webpack-cli -g 全局安装webpack界面

3.js打包

4.css打包

第四 开发工具VsCode

1.下载地址 （当然，要下载稳定版）

猜你喜欢

SpringCloud 学习笔记前端（一） node的基本使用介绍、包资源管理器NPM、webpack、vsCode开发工具的使用

第一部分相关操作

第二部分包资源管理器npm

第四开发工具VsCode

1.下载地址（当然，要下载稳定版）