SpringCloud 学习笔记 前端（一） node的基本使用介绍、包资源管理器NPM、webpack、vsCode开发工具的使用
第一部分 相关操作
nodejs入门
1.安装和简单功能实现
安装包下载地址： http://nodejs.cn/
（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);
}login.js
//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://blog.****.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代码片段