前端随笔

  • 前端随笔已关闭评论
  • 143 次浏览
  • A+
所属分类:Web前端
摘要

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

1、webpack的作用

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

2、node的作用

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

3、前端项目的组成

前端项目包含些什么?
当然常见得无非就是各种静态资源文件。
例如:
脚本(js)文件;
样式(css)文件
图片(pngjpg…)文件
其他媒体(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: 项目说明文件。