前端随笔
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生成的前端项目目录结构介绍
- build:webpack配置,用来编译打包项目生成dist目录
- config:本项目相关的配置
- node_modules: 通过npm install安装的依赖代码库
- src:项目源码
- assets:用来放置图片
- components:用来放置组件文件
- common:用来放置字体文件和通用的样式文件
- main.js:默认为整个项目的入口文件。
- App.vue:是项目的主组件,页面的入口文件。
- static:存放静态资源
- .babelrc:babel相关配置(因为我们的代码大多都是 ES6,而大多浏览器是不支持ES6的,所以我们需要babel帮我们转换成ES5语法)
- .editorconfig:编辑器的配置,可以在这里修改编码、缩进等
- .eslintignore:设置忽略语法检查的目录文件
- .eslintrc.js:eslint的配置文件
- .gitignore:git忽略里面设定的这些文件的提交
- index.html:入口html文件
- package.json:项目的配置文件,用于描述一个项目,包括我们init时的设置、开发环境的依赖插件、生产环境的依赖插件及版本等。
- 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】 我们会及时删除侵权内容,谢谢合作!
页:
[1]