前端随笔

田园晚风

1、webpack的作用

模块打包工具，可以将项目打包成兼容浏览器的格式，或者打包成手机app等。
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

2、node的作用

node是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境一样。

3、前端项目的组成

前端项目包含些什么？
当然常见得无非就是各种静态资源文件。
例如：
脚本(js)文件；
样式(css)文件
图片(png\jpg…)文件
其他媒体(MP3、MP4…)文件等等

4、创建vue项目的3中方式

（1）npm init
不常用，这个命令是创建node包项目的命令，因为vue项目实际可以看成一个node的包，所以，也可以用创建node包项目的方法去创建vue项目。

（2）vue init webpack 项目名
是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目。
webpack是官方推荐的标准模板名。
假如想要使用其他的模板，就可以更改webpack为其他的模板的名称。
例如使用github上面electron-vue的模板。Electron-Vue是个可以让我们使用 Vue 来开发 Electron 桌面程序的框架，单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。
使用方式：vue init electron-vue 项目名称
顺便介绍electron项目：
Electron是由Github开发，目的是使用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 为了达成这个目的，Electron通过将Chromium和Node.js合并到同一个运行时环境中，然后将其打包为Mac，Windows和Linux系统下的应用；
通俗的来讲Electron给前端项目套上了一个壳，这个壳是可以让你使用纯 JavaScript 调用丰富的原生 APIs（操作系统API） 来创造桌面应用。

（3）vue create 项目名  //是vue-cli3.x的初始化方式，模板是固定的，但是，模板的选项可自由配置

5、vue-cli的作用

Vue-cli是什么？
上文提到打包工具，我们选择了在界面具有老大地位的Webpack，
随着使用Webpack的人越来越多， 针对Webpack的各种插件如百家争鸣般越来越多，
如果我们自己准备从0开始配置Webpack,那往往要琢磨好久好久...
有同学可能会想啦...
有没有一个工具能帮我们既合理又迅速的整合最佳配置呢？
让我们不需要将大部分时间浪费在配置环节呢？
对，你猜的没错，这就是Vue-cli（脚手架）
先看下官网介绍，如下图：

通过上图的文字说明可以知道：
有了它我们就不用关心Webpack如何有效配置；
有了它我们只需要专注于业务代码；
开箱即用多方便。

6、vue、node、elementUI、express之间的关系

了解这三个的关系很简单，假设你现在需要做一个学生管理系统，那么你可以用html+css+js直接写个页面，但是这样子做的话开发速度太慢，修改下页面需要各种jQuery的调用。
这个时候你就会想要个能够让你快速进行开发的框架，这时你可以挑选anguar，react或者vue，很荣幸的是，你选中了vue。
接着你觉得写vue的时候很多组件都需要自己亲自去编写，毕竟自己是新手，重用性也不高。
比如一个控制图片滑动的swiper，自己就花了不少时间去实现各种功能，比如自动播放呀，轮播呀之类的。
然后你到网上一查，发现有个叫做element的vue组件库，已经实现了自己想要的大部分组件。
这时，你就会直接npm install该库，然后愉快的开始写代码了。但是这里你实现的只是网页端即前端。
既然是学生管理，那学生增删改的这些逻辑已经数据库的操作，你是不是应该在后端实现呢？
后端可以通过很多框架来实现，java的ssh，或者python的django，又或者nodejs之类的。很不幸，这次你又选中的nodejs+express！

7、npm命令

特别提示： npm list 包名 -g 可以查看某个包的版本

8、uglifyjs-tool的作用

uglifyjs是用 NodeJS 编写的 JavaScript 压缩工具
在网上搜下JS压缩优化，就会有很多压缩工具或者在线压缩，而且很多在线压缩都把各种常用的压缩工具都集合在一起，非常方便。
比如http://tool.css-js.com/，当然这个是在线压缩网址，如果不采用在线压缩网址，我们要采用哪种压缩工具呢？
现在流行的压缩工具各有各的优缺点，目前最流行的压缩工具是 UglifyJS ，JQuery 就是使用此工具压缩。
UglifyJS 压缩率高，压缩选项多，并且具有优化代码，格式化代码功能。

9、vue-cli生成的前端项目目录结构介绍

1. - build：webpack配置，用来编译打包项目生成dist目录
2. - config：本项目相关的配置
3. - node_modules: 通过npm install安装的依赖代码库
4. - src：项目源码
5.   - assets：用来放置图片
6.   - components:用来放置组件文件
7.   - common：用来放置字体文件和通用的样式文件
8.   - main.js：默认为整个项目的入口文件。
9.   - App.vue：是项目的主组件，页面的入口文件。
10. - static：存放静态资源
11. - .babelrc：babel相关配置（因为我们的代码大多都是 ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）
12. - .editorconfig：编辑器的配置，可以在这里修改编码、缩进等
13. - .eslintignore：设置忽略语法检查的目录文件
14. - .eslintrc.js：eslint的配置文件
15. - .gitignore：git忽略里面设定的这些文件的提交
16. - index.html：入口html文件
17. - package.json：项目的配置文件，用于描述一个项目，包括我们init时的设置、开发环境的依赖插件、生产环境的依赖插件及版本等。
18. - README.md: 项目说明文件。

复制代码

10、babel的作用

babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台
本文默认你对es6、es7等有所涉足，我们在写es6+语法的时候是不是很方便，什么promise、async await，可是es6+语法写的虽然很爽，但是浏览器他不兼容啊，你想想你写的代码在浏览器上跑不起来，再好的语法再好的特性又有什么用？
这个时候Babel这样一个工具出来了，他可以将我们写的es6+语法转换为浏览器兼容的语法，比如将箭头函数转换为普通函数，有了这样一个工具我们就即可以写爽的语法，又可以让使浏览器兼容。
相信到这你已经知道了Babel的概念，并且可以脑补出Babel可以干什么。



来源:https://www.cnblogs.com/zhangzl419/p/17288066.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！