nodejs
简介
https://nodejs.cn/
Node.js 是一个开源的、跨平台的 JavaScript 运行时环境。让前端像后端项目在tomcat中一样运行访问的技术（前端工程化）。作者:Ryan Dahl,基于谷歌V8引擎和Javascript，开发nodejs。
测试是否安装成功
windows键+r 输入cmd回车
node -v 或者 node --version
npm和cnpm
npm
简介
npm（nodejs package manager）是 Node.js 的包管理器。2022 年 9 月，npm 注册表中列出了超过 210 万个软件包，使其成为地球上最大的单一语言代码存储库
好处
减少程序员使用js的复杂度
举例：想使用elementui，1，找到官网https://element.eleme.io/#/
2，找到官网给的引入
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
3，下载
https://unpkg.com/element-ui/lib/index.js 浏览器另存为
4，再把下载js放入项目，页面引入
使用了npm后，一句搞定（需要有网络）：
npm i element-ui -S
解决了包依赖问题
上面使用的elementui依赖vue，想使用，必须引入vue.js 。类似依赖可能会出现使用a.js->b.js->c.js->d.js....... 如果传统方式，需要自己一个一个下载，引入，很麻烦，使用npm，只需要安全当前包，会自动把依赖包都装上
打开普通前端程序和各种世界级JS天才的一个通道
npm 注册表中列出了超过 210 万个软件包，都是世界上牛叉程序员编写的软件包，我们可以通过npm随意使用
安装测试
高版本的nodejs安装时，自带npm，测试是否安装：
npm -v
cnpm
简介
npm管理的所有都在国外服务器上，国内使用可能会慢，阿里就每隔10分钟把国外服务器上的所有包，同步到国内阿里服务器上，可以直接使用cnpm管理包，速度得到了提升。
安装
npm install cnpm -g --registry=https://registry.npm.taobao.org
或者：
npm install -g cnpm --registry=http://registry.npmmirror.com
测试
cnpm -v
vue-cli
简介
https://v3.cli.vuejs.org/zh/guide/
Vue CLI 是vue项目的脚手架。一套完全图形化的创建和管理 Vue.js 项目的用户界面。
安装
npm install -g @vue/cli 安装最新版本
npm install -g @vue/cli@5.0.8 安装指定版本
测试
vue -V
或者
vue --version
vue项目创建和命令启动运行
准备工作
1，创建一个目录front_qy178（以后所有前端工程都放到该目录）
2，进入目录
3，在目录位置使用cmd回车
1，创建项目，手动选择特性
2，选择具体特性
Babel:转换器，ES5,ES6等可以相互兼容
TypeScript:和js类似的框架，更好面向对象编程。
Web App (PWA) Support：是否支持web
Router：vue 的路由组件
Vuex：vue扩展功能
Css:样式支持
Linter / Formatter：语法校验功能，新手不建议选，后面写代码会进行各种警告提示。
Unit Testing： 前端单元测试
E2E Testing： EndPoint To EndPoint 点到点测试
3，选择vue的版本
4，选择路由是否使用历史模式（#锚点模式）
5，选择配置文件保存位置（放入package.json）
6，是否保存前置设置
是否都可以，如果选择是，下次创建项目可以直接选择保存策略，下次直接用，如果否，下次还需要从头开始。
7，项目根据前6步的设置开始创建，快慢跟网速有关系
8，运行测试
进入目录：
cd front_web_20241213
运行:
npm run serve回车
测试：
http://localhost:8080/
http://172.16.2.75:8080/#/
vscode
简介
Visual Studio Code是一款功能丰富的跨平台源代码编辑器，支持各种编程语言的开发。软件面向开发人员的强大功能是其集成开发环境特性，如代码高亮、智能代码补全、语法检测及调试工具等，极大地提升了开发效率和代码质量。
和idea，ecplise,sts等一样的IDE集成开发工具
安装及插件安装
使用
项目目录，启动和使用
项目目录
node_modules 存放npm命令下载的开发环境和生产环境的依赖包。
public 是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。咱们浏览器访问项目的时候就会默认打开生成好的index.html
src 所有资源存放位置
src下assets：存放项目中需要用到的资源文件，css、js、images等。
src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
src下router：vue-router vue路由的配置文件。
src下page：存在vue页面组件的文件夹。
src下store:主要用于项目里边的一些状态的保存，state中保存状态，mutations中写用于修改state中的状态
src下views:用于存放写好的各类页面，如login、main
src下app.vue：使用标签
src下main.js：vue-cli工程的入口文件。
.gitignore:git上传须要忽略的文件格式
babel.config.js:是一个工具链，主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本(ES5,ES6,ES7)
package-lock.json:是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各 个npm package的具体来源和版本号
package.json:项目文件，记载着一些命令和依赖还有简要的项目描述信息，启动命令
dependencies 生成环境打包需要的
devDependencies 本地开发配置，上线时要抛弃
vue.config.js:保存vue配置的文件，能够用于设置代理,打包配置等
启动和使用
如果我们使用vscode或者idea来运行项目时，必须把黑窗口运行关闭！
vscode
终端-新建终端
npm run serve 回车
运行后，就可以在地址访问：
http://172.16.2.75:8080/#/about
退出运行：
ctrl+c
idea
npm run serve 回车
地址栏访问：
http://172.16.2.75:8080/#/about
退出运行：
ctrl+c
单文件组件
简单:.vue文件