10.css模块化 10.1.什么是css模块? CSS模块就是所有的类名都只有局部作用域的CSS文件,当你在一个JavaScript模块中导入一个CSS文件时,CSS模块将会定义一个对象,将文件中类的名字动态的映射为JavaScript作用域中可以使用的字符串,CSS模块不是浏览器中的官方标准(official spec) 或者 实践(implementation) 而是一个(在Webpack或者Browserify的帮助下)改变类名和选择器的作用域到当前文件(类似于命名空间)的构建过程 通俗…

9.路径相关 原来我们打包的东西都存放到了dist目录下,并没有进行分类存储,乱成一团,这一节我们就要处理一下打包的路径,让打包后的目录看起来更加优雅 9.1.代码准备 我们先建立起这样一个目录结构 . ├── node_modules ├── src | ├── assets | └── css | └── index.css | └── img | └── noding.jpg | └── js | └── index.js | └── index.html ├── .babelrc ├──…

7.使用字体 7.1.安装字体库-font-awesome 我们通过npm来安装字体 npm install font-awesome --save 这个时候,我们的package.json配置文件变成这样: { "name": "code", "version": "1.0.0", "description": "", "main": "index.js&…

6.使用图片 6.1.尝试在css中引入图片 在src目录下新建css文件夹,并且在css文件夹下创建app.css文件,在src目录下新建images文件夹,放入一张图片,在app.css中引入这张图片 body{ background: url('../images/nodeing.jpg') } 在index.js文件中引入app.css这个模块 import module_1 from './module_1' import module_2 from './module_2' impo…

3.插件 在前端迅速发展的今天,许多没有太多技术含量并且感觉是在浪费时间的事情,就可以交给构建工具来做,例如:我们去手动创建index.html,手动引入打包好的js文件等操作,都可以叫个webpack来做,帮助我们提升效率,因此,你只需要理解,插件其实就是webpack的一些扩展功能,旨在帮助我们提示效率的工具 3.1.html-webpack-plugin插件 这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件 1.插件安装 npm install html-webpack-…

1.webpack简介 webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler).它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源 1.1.webpack安装 在安装webpack之前你需要先安装Node.js,最理想的Node.js版本是长期支持版本(LTS - Long Term Support) 查看Node.js版本 node -v 1.1.1.全局安装 npm install -g webpack 查看版本 webpac…

webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 文中的文件夹如果没有说创建,并且项目默认没有的是需要你手动增加的 不会特别细致,但是足够入门 资源 视频教程 我的个人博客 什么是webpack Web浏览器使用HTML,CSS和JavaScript.随着项目的发展,跟踪和配置所有这些文件变得非常复杂,解决这个问题就需要一个新的工具 类似webpa…

前言 我个人对更严格类型限制没有积极的看法,毕竟各类转类型的骚写法写习惯了. 然鹅最近的一个项目中,是 TypeScript+ Vue,毛计喇,学之...-真香! 1. 使用官方脚手架构建 npm install -g @vue/cli # OR yarn global add @vue/cli 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 Manuallyselec…

勿在浮沙筑高台,无论什么技术,掌握核心精神和api,是很重要的. 但是入门过程也可能不是一帆风顺的,这里有八个入门任务,看看你完成了没有: http://code.tutsplus.com/articles/the-best-way-to-learn-python--net-26288…

13.模块化 13.1.什么是模块化 模块化是一种处理复杂系统分解为更好的可管理模块的方式.通俗的讲就是把一个复杂的功能拆分成多个小功能,并且以一种良好的机制管理起来,这样就可以认为是模块化.就像作家把书分成很多章节来写一样,程序员写代码分模块来写也是一种良好的习惯.从本质上来讲,一个模块就是一堆代码而已 使用模块化方式写代码,有非常多的优点,例如,可维护性好.避免全局变量污染.可复用性好等,下面我们来看看es5中如何实现模块化封装 var module1 = (function () { va…