一.环境搭建
-
1.简介
- 基于原生js，运行浏览器之外，但有独有命令和框架、模块对象，例如express对象。
- 可以引入别的对象，并且app.use（）绑定对象。
-
2.安装
- 使用nvm安装（https://github.com/corebutler/nvm-windows）
- 查看：
nvm list available - 安装：
nvm install 12.18.2——使用：nvm use 12.18.2
-
3.插件
- 依次为快速注解、报错提醒规范化、代码提示、格式化、rest请求客户端
二.node命令
-
1.简单使用
- REPL的使用：
node - 文件的使用：
node *.js - hello,world的express和原始写法：
- REPL的使用：
三.npm命令
-
1.使用
- 每一个node.js项目都是一个模块，npm命令能快速初始化模块。
- 构建项目：
npm init——生成package.json即是pom文件- 快速生成：
npm init-y跳过一切信息填写 - 初始信息：name、version、description、author、keywords等描述
- 入口文件：main{}
- 管理命令：script{}
- test、bulid、server
- 仓库：repository{}
- 依赖：dependencies{}——导入会生成到node_module 目录下
- 快速生成：
- 管理依赖：
npm install express仓库地址（https://www.npmjs.com）- 可缩写为：
npm i express - 仅开发依赖：
npm i express--save-dev - 全局安装：
npm i express-g
- 可缩写为：
- 卸载和更新：
npm uninstall expressnpm lsnpm update express- 版本号：x.y.z依次为大更新、向下兼容、补丁
- ^x.y.z不允许x但能yz
- ~x.y.z只允许z
- 无符号则不会更新
- *.y.z为最新版本
- 检查漏洞：
npm audit - 尝试修复：
npm audit fix
- 换源：
- npm config list
npm config set registry https://registry.npm.taobao.org（推荐）npm config set registry https://registry.npmmirror.com/npm i nrm -gnrm lsnrm use taobao换淘宝源npm install -g cnpm --registry=https://registry.npmmirror.com安装cnpm命令
- 安装webpack
- 安装webpack和它的cli：
npm i webpack -cli- -D表示局部安装为了避免不同电脑的版本冲突问题
- -G表示全局安装
- -S表示save缩写生产环境
- 安装webpack和它的cli：
四.webpack
-
1.模块化
- 原始开发：引入js文件会加载所有到内存，加载许多类（如Vue）和单例对象（如axios）。
- 模块加载器：commonJS规范，由node.js实现，同步的。
- 导入：require（）引入js文件或目录可返回一个引用
- 导出：module.exports()可输出变量、实例对象。
- ES6的模块规范：异步的，单例
- 目前还没有被浏览器原生加载，需要使用工具（webpack）来支持编译它。
- 导入：
import ... form 'xxx.js'导入被导出的对象或属性，并且自动被设为const声明。 - 导出：非常类似commonjs
- 默认导出 ：
export default foo，相当于exports{foo as default}
- 默认导出 ：
- 应用：在npm中，依赖管理时基于package.json，它所生成的项目支持模块化语法使用这些依赖。
-
2.webpack
- 作用：统一构建所有依赖（index.js）、编译ts、nodejs等高级语言为浏览器可识别的普通js，构建为bundle.js文件。
- 下载：
npm i webpack webpack-cli -D下载webpack - 编译打包：
- 全局：
webpack - 局部：
npx webpack --mode=development底层是调用了 node_modules/.bin/webpack命令- npx是node8.2之后的新命令，总之只管用就是了。
- development是不压缩代码
- 默认是production是压缩代码
- 全局：
- 原理：依赖很多（index.js），全都翻译（webpack.config）成浏览器看得懂的(bundle.js)。
-
3.webpack配置文件
- 作用：webpack.config文件配置项目的打包能力（使用commonjs规范）
- 模块：
const path =require（‘path’）引入模块 - entry、output：入口和出口文件
- Mode：基本上编译时来指定
- modules：{rules：{test：/\.css/，use：}}loader加载器
- webpack-dev-server：方便热部署的调试工具，注意版本限制严重
- resolve：alias{}定义别名引入包
-
4.多入口出口配置
- 作用 ：降低耦合，但降低性能。
- entry ：
['./src/index.js','/src/index2.js']或者entry:{app：'path',utils: 'path'} - output：
filename：'bundle.js'或者filename:'[name].bundle.js' 
-
5.插件
- 作用 ：节省工作量的拓展功能
- html插件：可以根据模板复制并自动引入所有bundle.js后，生成目标文件entry.html。
- 安装：
npm i html-webpack-plugin - 配置：如下图
- 安装：
- 自动清除dist文件夹插件：省去手动清除步骤
- 安装：
npm install -D clean-webpack-plugin - 配置：
const CWBP = require（cleanwebpackplugin）引入类声明并创建对象添加到plugins数组。 
- 安装：
-
6.loader加载器配置
- 作用 ：不配置默认只能打包nodejs、js（jquery）、json、图片
- 样式：需要负责内联的style-loader和外联的css-loader。语法参照如下。
- 图片：
npm install -D url-loader file-loader，现在不需要配置了，使用图标库时需要。 - ES6转义：
npm install -D babel-core babel-loader babel-preset-env babel-preset-stage-0
-
7.热部署设置
- 版本问题：遵守下面规定
- 配置：配置端口和映射路径
- 启动服务器：
npx webpack-dev-server
五.webpack集成其他模块
-
1.图标库
- 简介：www.iconfont.com是阿里巴巴图标库网站
- 使用symbol方式：下载包——引入js——粘贴css设置——使用<svg >标签
- 使用字体方式：字体本质是ttf、svg等文件。直接引入css文件配合<span>标签可使用，而且得配置file-loader
-
2.bootstrap样式库
- 下载：
npm i bootstrap3 - 引入：import '路径'表示加载全部js
- 使用：用class获得基本样式
- 下载：
-
3.vue
- 下载：
npm i vue@2.6.12 -S安装到生产环境 - 引入：
import vue from '../node_modules/vue/dist/vue.esm'- 配合模块别名使用：
import vue from 'vue' 
- 配合模块别名使用：
- 使用：在index.js中实例化vue对象，并绑定html中#el标签。
- router模块：
- 下载：
npm i vue-route -s - 引入：
import vueRouter from 'vueroute'和vue.use（VueRouter）
- 下载：
- 组件化开发：
- 初始化：component目录下写<template>组件和vue实例，快捷键vv生成模板。
- 首页：app.vue
- 数据：在export default {}里定义组件的域。注意：它自带template：#el键值已经绑定好了标签。
- 导入使用：先导入route.js注册路由，再到首页app.vue使用自定义标签。
- 打包配置：component目录下的vue对象需要编译。
- 下载：
npm i vue-loader vue-template-complie - 安装插件：
npm i vue-loader - 配置使用：
require（vue-loader/lib/plugin） 
- 下载：
- 实际开发：html不写内容，app.vue渲染首页，index.js负责用组件替换首页，
- 首页：函数式返回组件的写法
- 组件开发：在首页组件APP.vue里使用<router-view>引入其他组件
- css作用域：<style>默认作用于所有组件，使用scoped属性作用于当前组件解决组件css冲突问题
- 路由模块：将router.js从index.js抽离
- 内容：定义router对象，引入其他component组件并注册
- 导出：export default router
- 引入：再index里引入router.js注册router对象，模块单一化。
- 下载：
-
4.axios
- 下载：
npm i axios -S - 引入挂载：
Vue.prototype.$axios =axios挂载到vue上，所有组件都能使用 
- 使用：所有组件可直接使用
- 配置：
axios.default.baseURL ="" 
- 发请求：
this.$axios.get("").then(回调函数)
- 配置：
- 跨域：浏览器不会显示跨域请求结果
- 同源策略（CORS policy）：前端服务器和后端服务器有隔阂，解决方法是添加信任。
- 前端解决：添加请求头allow-aceese-origin：信任远程源
- 后端解决：springboot增加mvc配置类，并重写addCorsmapping（）方法
- 下载：
-
5.element-ui
- 简介：一个阿里的组件库，官方网站https://element.eleme.cn/#/zh-CN
- 下载：
npm i element-ui -S - 引入和全局挂载：
Vue.use(ElementUI) 
- 使用：组件直接使用element自带标签<el-xx>和样式来实现各种Form、Data等组件（详见官网）
-
6.vuex
- 简介 ：第三方对象存数据
- 下载：
npm i vuex -S - 全局挂载：
Vue.use(vuex) - 定义：store.vue导出对象，state域为属性域，mutation为方法域，getter也是方法域。
- 使用：
- 注册：将store对象注册到vue实例中
- 访问：任一组件都能访问
this.$store.state.属性名和this.$store.commit(方法名)访问 
-
7.ztree
- 作用 ：完成树的结构
- 安装：
npm i ztrss -S - 插件配置：plugin里的new provideplugin（）
- 使用：生命周期里绑定数据mounted：{let settings={data：{simpledata：xxx,enable：true}}}
- 树的写法：let node：[{id：，name：，pid：}]
-
8.babel
- 作用：把es6转化为低版本js代码
六.node.js模块
1.文件系统
- 全局变量：_dirname代表目录绝对路径
- fs：文件读取
- 核心方法：readfile（）读取文件为对象、open（）、stat（）、readdir（）读取文件夹为对象
- path：字符串处理
- 核心方法：extname（）截取拓展名、resolve（）、join（）返回拼接的字符串
- 查找文件的例子：来自微软官网教程
- json
- web框架express
- 调试
2.Koa2：
- 简介：
- 使用：
- 安装：npm install koa
- 响应式函数：
- app.use((ctx,next)) :拦截所有的请求，ctx存有产生的res、resp对象，next()可以放行
- next()得到一个promise对象，await能使异步放行代码实现同步
3.egg.js
本文作者为byzhj，转载请注明。