【大前端开发】

大前端开发

客户端

nativeapp是一个原生程序，一般运行在机器操作系统上，有很强的交互，一般静态资源都是在本地的。浏览使用方便，体验度高。在实现上要么使用Objecttive-c和cocoaTouch Framework撰写iOS程序，要么选择java+Android Framework撰写android应用程序。

hybridapp是一个半原生程序，伪造了一个浏览器的apk/ipa原生程序，把地址写死了，然后里面运行了一个webapp。里面是WebView UI 。但是还是运行在机器的操作系统上，交互较弱，资源一般在本地或者网络都可以。浏览体验度次之。

webapp是生存在浏览器里的应用，所以只能运行在浏览器里，宿主是浏览器，不再是操作系统。资源一般都在网络上。说的根本点就是一个触屏版的网站

nativeapp有qt，wpf，mfc等
hybridapp有qml，cef等
webapp有electron

跨平台方案
flutter
electron

网页开发

框架介绍

electron

electron不是框架，它是客户端打包工具，内部需要使用vue，react，angular或者原生html+js编写。

浏览器中的JavaScript是没有文件操作能力的，但是Node中的JavaScript具有文件操作的能力。
fs是file-system的简写,就是文件系统的意思，在node中如果想要进行文件操作,就必须引入fs这个核心模块。

directui

Qt Quick是用C++搭建起来的一套DirectUI/Immediate UI框架，在这个框架上可以用和js语法一样的qml语言开发界面。
directui只有最外层一个系统窗口句柄，内部控件组织成树，它们都是通过opengl或者其它绘图库完成的，通过文本描述语言，比如json，html，xml等来描述界面结构，然后系统根据这些描述文件进行渲染。web也可以看做一种directui。

DirectUI这类框架不再把控件通过子窗口的方式呈现，内部所有外观的绘制、事件的响应都是由最外面的普通窗口过程完成的。控件与父控件的交互是在进程中直接完成的，而不是通过消息队列中转。因此，使用DirectUI创建的窗口的性能会比传统的窗口会更好。
对于操作系统而言，DirectUI创建的窗口就只有一个普通窗口，不包含任何子窗口。第三方程序就无法通过查看窗口句柄的方式干涉窗口内部的细节，提高了安全性。

qml属于directui,显示机制与widget不同，qml只有一个最外层句柄，qwidget每个窗口都是一个句柄。

cef和electron

两者都是通过web来写界面
CEF则比较单纯，只对Chromium做了精简和封装，允许开发者通过C++代码控制Chromium核心，允许JavaScript和C++互操作，允许开发者在Chromium的多个进程间通信，像访问托盘图标、访问剪切板、Socket通信、读写文件这类事情，它都没做，要完成这些工作，开发者得自己写代码。这也无可厚非，因为C++开发者可以很容易的完成这些任务。但JavaScript开发者就很难完成这些任务，所以Electron为他们做了这些事情，而且做的很好。

cef的思想和qml类似。

前端配置文件

html-webpack-plugin打包html
style-loader css-loader 打包css
extract-text-webpack-plugin 分离css
less-loader 打包less
sass-loader node-sass 打包scss/sass
url-loader 、file-loader 在css中引入资源
html-loader 在html中引入资源

webpack.config.js打包文件
package.json 指定项目信息，依赖库，入口源码文件，eslint

使用babel，需要下载babel-loader、@babel/core、@babel/preset-env
babel-loader 将es6或者更高版本内置的js语法转成浏览器识别的js版本。关于babel-loader的配置可以单独提取出来，新建一个.babelrc文件

这里专门解释find_packages()是啥东西？
就是在当前目录，以及当前目录下，所有的python包（带__init__.py的目录）都搜索，并一起打成egg文件包。
find_packages(xyz)，就是搜索名称为xyz的包，以及xyz的下层目录的包搜索出来，并一起打成egg文件包。