目标

1.能够了解模块化的相关规范

2.了解webpack

3.了解使用Vue单文件组件

4.能够搭建Vue脚手架

5.掌握Element-UI的使用

1.模块化的分类

A.浏览器端的模块化

  1.     1).AMD(Asynchronous Module Definition,异步模块定义)
  2.     代表产品为：Require.js
  3.     2).CMD(Common Module Definition,通用模块定义)
  4.     代表产品为：Sea.js

B.服务器端的模块化

  1.     服务器端的模块化规范是使用CommonJS规范：
  2.     1).使用require引入其他模块或者包
  3.     2).使用exports或者module.exports导出模块成员
  4.     3).一个文件就是一个模块，都拥有独立的作用域

C.ES6模块化

  1.     ES6模块化规范中定义：
  2.         1).每一个js文件都是独立的模块
  3.         2).导入模块成员使用import关键字
  4.         3).暴露模块成员使用export关键字

小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。

ES6模块化是浏览器端和服务器端通用的规范.

2.在NodeJS中安装babel

A.安装babel

  1. 打开终端，输入命令：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
  2. 安装完毕之后，再次输入命令安装：npm install --save @babel/polyfill

B.创建babel.config.js

  1. 在项目目录中创建babel.config.js文件。
  2. 编辑js文件中的代码如下：
  3.     const presets = [
  4.         ["@babel/env",{
  5.             targets:{
  6.                 edge:"17",
  7.                 firefox:"60",
  8.                 chrome:"67",
  9.                 safari:"11.1"
  10.             }
  11.         }]
  12.     ]
  13.     //暴露
  14.     module.exports = { presets }

C.创建index.js文件

  1. 在项目目录中创建index.js文件作为入口文件
  2. 在index.js中输入需要执行的js代码，例如：
  3.     console.log("ok");

D.使用npx执行文件

  1. 打开终端，输入命令：npx babel-node ./index.js

3.设置默认导入/导出

A.默认导出

  1. export default {
  2.     成员A,
  3.     成员B,
  4.     .......
  5. },如下：
  6. let num = 100;
  7. export default{
  8.     num
  9. }

B.默认导入

  1. import 接收名称 from "模块标识符"，如下：
  2. import test from "./test.js"

注意：在一个模块中，只允许使用export default向外默认暴露一次成员，千万不要写多个export default。

如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象

4.设置按需导入/导出

A.按需导出

  1. export let num = 998;
  2. export let myName = "jack";
  3. export function fn = function(){ console.log("fn") }

B.按需导入

  1. import { num,fn as printFn ,myName } from "./test.js"
  2. //同时导入默认导出的成员以及按需导入的成员
  3. import test,{ num,fn as printFn ,myName } from "./test.js"

注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出

5.直接导入并执行代码

  1. import "./test2.js";

6.webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。

webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

7.webpack的基本使用

A.创建项目目录并初始化

  1. 创建项目，并打开项目所在目录的终端，输入命令：
  2.     npm init -y

B.创建首页及js文件

  1. 在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li
  2. 在项目目录中创建js文件夹，并在文件夹中创建index.js文件

C.安装jQuery

  1. 打开项目目录终端，输入命令:
  2. npm install jQuery -S

D.导入jQuery

  1. 打开index.js文件，编写代码导入jQuery并实现功能：
  2. import $ from "jquery";
  3. $(function(){
  4.     $("li:odd").css("background","cyan");
  5.     $("li:odd").css("background","pink");
  6. })

注意：此时项目运行会有错误，因为import $ from "jquery";这句代码属于ES6的新语法代码，在浏览器中可能会存在兼容性问题

所以我们需要webpack来帮助我们解决这个问题。

E.安装webpack

  1. 1).打开项目目录终端，输入命令:
  2. npm install webpack webpack-cli -D
  3. 2).然后在项目根目录中，创建一个 webpack.config.js 的配置文件用来配置webpack
  4. 在 webpack.config.js 文件中编写代码进行webpack配置，如下：
  5. module.exports = {
  6.     mode:"development"//可以设置为development(开发模式)，production(发布模式)
  7. }
  8. 补充：mode设置的是项目的编译模式。
  9. 如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些
  10. 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些
  11. 3).修改项目中的package.json文件添加运行脚本dev，如下：
  12. "scripts":{
  13.     "dev":"webpack"
  14. }
  15. 注意：scripts节点下的脚本，可以通过 npm run 运行，如：
  16. 运行终端命令：npm run dev
  17. 将会启动webpack进行项目打包
  18. 4).运行dev命令进行项目打包，并在页面中引入项目打包生成的js文件
  19. 打开项目目录终端，输入命令:
  20. npm run dev
  21. 等待webpack打包完毕之后，找到默认的dist路径中生成的main.js文件，将其引入到html页面中。
  22. 浏览页面查看效果。

8.设置webpack的打包入口/出口

  1. 在webpack 4.x中，默认会将src/index.js 作为默认的打包入口js文件
  2.                  默认会将dist/main.js 作为默认的打包输出js文件
  3. 如果不想使用默认的入口/出口js文件，我们可以通过改变 webpack.config.js 来设置入口/出口的js文件，如下：
  4. const path = require("path");
  5. module.exports = {
  6.     mode:"development",
  7.     //设置入口文件路径
  8.     entry: path.join(__dirname,"./src/xx.js"),
  9.     //设置出口文件
  10.     output:{
  11.         //设置路径
  12.         path:path.join(__dirname,"./dist"),
  13.         //设置文件名
  14.         filename:"res.js"
  15.     }
  16. }

9.设置webpack的自动打包

  1. 默认情况下，我们更改入口js文件的代码，需要重新运行命令打包webpack，才能生成出口的js文件
  2. 那么每次都要重新执行命令打包，这是一个非常繁琐的事情，那么，自动打包可以解决这样繁琐的操作。
  3. 实现自动打包功能的步骤如下：
  4.     A.安装自动打包功能的包:webpack-dev-server
  5.             npm install webpack-dev-server -D
  6.     B.修改package.json中的dev指令如下：
  7.         "scripts":{
  8.             "dev":"webpack-dev-server"
  9.         }
  10.     C.将引入的js文件路径更改为：<script src="/bundle.js"></script>
  11.     D.运行npm run dev，进行打包
  12.     E.打开网址查看效果：http://localhost:8080
  14. 注意：webpack-dev-server自动打包的输出文件，默认放到了服务器的根目录中.

补充：

在自动打包完毕之后，默认打开服务器网页，实现方式就是打开package.json文件，修改dev命令：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"

10.配置html-webpack-plugin

  1. 使用html-webpack-plugin 可以生成一个预览页面。
  2. 因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面
  3. 还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录。
  4. 实现默认预览页面功能的步骤如下：
  5.     A.安装默认预览功能的包:html-webpack-plugin
  6.         npm install html-webpack-plugin -D
  7.     B.修改webpack.config.js文件，如下：
  8.         //导入包
  9.         const HtmlWebpackPlugin = require("html-webpack-plugin");
  10.         //创建对象
  11.         const htmlPlugin = new HtmlWebpackPlugin({
  12.             //设置生成预览页面的模板文件
  13.             template:"./src/index.html",
  14.             //设置生成的预览页面名称
  15.             filename:"index.html"
  16.         })
  17.     C.继续修改webpack.config.js文件，添加plugins信息：
  18.         module.exports = {
  19.             ......
  20.             plugins:[ htmlPlugin ]
  21.         }

11.webpack中的加载器

  1. 通过loader打包非js模块：默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器才能打包
  2.     loader加载器包含：
  3.         1).less-loader
  4.         2).sass-loader
  5.         3).url-loader:打包处理css中与url路径有关的文件
  6.         4).babel-loader:处理高级js语法的加载器
  7.         5).postcss-loader
  8.         6).css-loader,style-loader
  10. 注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用
  12. A.安装style-loader,css-loader来处理样式文件
  13.     1).安装包
  14.         npm install style-loader css-loader -D
  15.     2).配置规则：更改webpack.config.js的module中的rules数组
  16.     module.exports = {
  17.         ......
  18.         plugins:[ htmlPlugin ],
  19.         module : {
  20.             rules:[
  21.                 {
  22.                     //test设置需要匹配的文件类型，支持正则
  23.                     test:/\.css$/,
  24.                     //use表示该文件类型需要调用的loader
  25.                     use:['style-loader','css-loader']
  26.                 }
  27.             ]
  28.         }
  29.     }
  30. B.安装less,less-loader处理less文件
  31.     1).安装包
  32.         npm install less-loader less -D
  33.     2).配置规则：更改webpack.config.js的module中的rules数组
  34.     module.exports = {
  35.         ......
  36.         plugins:[ htmlPlugin ],
  37.         module : {
  38.             rules:[
  39.                 {
  40.                     //test设置需要匹配的文件类型，支持正则
  41.                     test:/\.css$/,
  42.                     //use表示该文件类型需要调用的loader
  43.                     use:['style-loader','css-loader']
  44.                 },
  45.                 {
  46.                     test:/\.less$/,
  47.                     use:['style-loader','css-loader','less-loader']
  48.                 }
  49.             ]
  50.         }
  51.     }
  52. C.安装sass-loader,node-sass处理less文件
  53.     1).安装包
  54.         npm install sass-loader node-sass -D
  55.     2).配置规则：更改webpack.config.js的module中的rules数组
  56.     module.exports = {
  57.         ......
  58.         plugins:[ htmlPlugin ],
  59.         module : {
  60.             rules:[
  61.                 {
  62.                     //test设置需要匹配的文件类型，支持正则
  63.                     test:/\.css$/,
  64.                     //use表示该文件类型需要调用的loader
  65.                     use:['style-loader','css-loader']
  66.                 },
  67.                 {
  68.                     test:/\.less$/,
  69.                     use:['style-loader','css-loader','less-loader']
  70.                 },
  71.                 {
  72.                     test:/\.scss$/,
  73.                     use:['style-loader','css-loader','sass-loader']
  74.                 }
  75.             ]
  76.         }
  77.     }
  79.     补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：
  80.     https://segmentfault.com/a/1190000010984731?utm_source=tag-newest
  82. D.安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）
  83. 1).安装包
  84.     cnpm install postcss-loader autoprefixer -D
  85. 2).在项目根目录创建并配置postcss.config.js文件
  86. const autoprefixer = require("autoprefixer");
  87. module.exports = {
  88.     plugins:[ autoprefixer ]
  89. }
  90. 3).配置规则：更改webpack.config.js的module中的rules数组
  91. module.exports = {
  92.     ......
  93.     plugins:[ htmlPlugin ],
  94.     module : {
  95.         rules:[
  96.             {
  97.                 //test设置需要匹配的文件类型，支持正则
  98.                 test:/\.css$/,
  99.                 //use表示该文件类型需要调用的loader
  100.                 use:['style-loader','css-loader','postcss-loader']
  101.             },
  102.             {
  103.                 test:/\.less$/,
  104.                 use:['style-loader','css-loader','less-loader']
  105.             },
  106.             {
  107.                 test:/\.scss$/,
  108.                 use:['style-loader','css-loader','sass-loader']
  109.             }
  110.         ]
  111.     }
  112. }
  114. E.打包样式表中的图片以及字体文件
  115. 在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理
  116. 使用url-loader和file-loader来处理打包图片文件以及字体文件
  117. 1).安装包
  118.     cnpm install url-loader file-loader -D
  119. 2).配置规则：更改webpack.config.js的module中的rules数组
  120. module.exports = {
  121.     ......
  122.     plugins:[ htmlPlugin ],
  123.     module : {
  124.         rules:[
  125.             {
  126.                 //test设置需要匹配的文件类型，支持正则
  127.                 test:/\.css$/,
  128.                 //use表示该文件类型需要调用的loader
  129.                 use:['style-loader','css-loader']
  130.             },
  131.             {
  132.                 test:/\.less$/,
  133.                 use:['style-loader','css-loader','less-loader']
  134.             },
  135.             {
  136.                 test:/\.scss$/,
  137.                 use:['style-loader','css-loader','sass-loader']
  138.             },{
  139.                 test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
  140.                 //limit用来设置字节数，只有小于limit值的图片，才会转换
  141.                 //为base64图片
  142.                 use:"url-loader?limit=16940"
  143.             }
  144.         ]
  145.     }
  146. }
  148. F.打包js文件中的高级语法：在编写js的时候，有时候我们会使用高版本的js语法
  149. 有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码
  150. 我们需要安装babel系列的包
  151. A.安装babel转换器
  152.     cnpm install babel-loader @babel/core @babel/runtime -D
  153. B.安装babel语法插件包
  154.     cnpm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
  155. C.在项目根目录创建并配置babel.config.js文件
  157.     module.exports = {
  158.         presets:["@babel/preset-env"],
  159.         plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
  160.     }
  161. D.配置规则：更改webpack.config.js的module中的rules数组
  162. module.exports = {
  163.     ......
  164.     plugins:[ htmlPlugin ],
  165.     module : {
  166.         rules:[
  167.             {
  168.                 //test设置需要匹配的文件类型，支持正则
  169.                 test:/\.css$/,
  170.                 //use表示该文件类型需要调用的loader
  171.                 use:['style-loader','css-loader']
  172.             },
  173.             {
  174.                 test:/\.less$/,
  175.                 use:['style-loader','css-loader','less-loader']
  176.             },
  177.             {
  178.                 test:/\.scss$/,
  179.                 use:['style-loader','css-loader','sass-loader']
  180.             },{
  181.                 test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
  182.                 //limit用来设置字节数，只有小于limit值的图片，才会转换
  183.                 //为base64图片
  184.                 use:"url-loader?limit=16940"
  185.             },{
  186.                 test:/\.js$/,
  187.                 use:"babel-loader",
  188.                 //exclude为排除项，意思是不要处理node_modules中的js文件
  189.                 exclude:/node_modules/
  190.             }
  191.         ]
  192.     }
  193. }

12.Vue单文件组件

传统Vue组件的缺陷：

全局定义的组件不能重名，字符串模板缺乏语法高亮，不支持css(当html和js组件化时，css没有参与其中)

没有构建步骤限制，只能使用H5和ES5，不能使用预处理器（babel）

解决方案：

使用Vue单文件组件，每个单文件组件的后缀名都是.vue

每一个Vue单文件组件都由三部分组成

1).template组件组成的模板区域

2).script组成的业务逻辑区域

3).style样式区域

代码如下：

  1. <template>
  3.     组件代码区域
  5. </template>
  7. <script>
  9.     js代码区域
  11. </script>
  13. <style scoped>
  15.     样式代码区域
  17. </style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

配置.vue文件的加载器

A.安装vue组件的加载器

npm install vue-loader vue-template-compiler -D

B.配置规则：更改webpack.config.js的module中的rules数组

const VueLoaderPlugin = require("vue-loader/lib/plugin");

const vuePlugin = new VueLoaderPlugin();

module.exports = {

......

plugins:[ htmlPlugin, vuePlugin ],

module : {

rules:[

...//其他规则

{

test:/.vue$/,

loader:"vue-loader",

  1.             }
  2.         ]
  3.     }
  4. }

13.在webpack中使用vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue

并使用vue来引用vue单文件组件。

A.安装Vue

npm install vue -S

B.在index.js中引入vue：import Vue from "vue"

C.创建Vue实例对象并指定el，最后使用render函数渲染单文件组件

const vm = new Vue({

el:"#first",

render:h=>h(app)

})

14.使用webpack打包发布项目

在项目上线之前，我们需要将整个项目打包并发布。

A.配置package.json

"scripts":{

"dev":"webpack-dev-server",

"build":"webpack -p"

}

B.在项目打包之前，可以将dist目录删除，生成全新的dist目录

15.Vue脚手架

Vue脚手架可以快速生成Vue项目基础的架构。

A.安装3.x版本的Vue脚手架：

npm install -g @vue/cli

B.基于3.x版本的脚手架创建Vue项目：

1).使用命令创建Vue项目

命令：vue create my-project

选择Manually select features(选择特性以创建项目)

勾选特性可以用空格进行勾选。

是否选用历史模式的路由：n

ESLint选择：ESLint + Standard config

何时进行ESLint语法校验：Lint on save

babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)

是否保存为模板：n

使用哪个工具安装包：npm

2).基于ui界面创建Vue项目

命令：vue ui

在自动打开的创建项目网页中配置项目信息。

3).基于2.x的旧模板，创建Vue项目

npm install -g @vue/cli-init

vue init webpack my-project

C.分析Vue脚手架生成的项目结构

node_modules:依赖包目录

public：静态资源目录

src：源码目录

src/assets:资源目录

src/components：组件目录

src/views:视图组件目录

src/App.vue:根组件

src/main.js:入口js

src/router.js:路由js

babel.config.js:babel配置文件

.eslintrc.js:

16.Vue脚手架的自定义配置

  1. A.通过 package.json 进行配置 [不推荐使用]
  2.     "vue":{
  3.         "devServer":{
  4.             "port":"9990",
  5.             "open":true
  6.         }
  7.     }
  8. B.通过单独的配置文件进行配置，创建vue.config.js
  9.     module.exports = {
  10.         devServer:{
  11.             port:8888,
  12.             open:true
  13.         }
  14.     }

17.Element-UI的基本使用

Element-UI:一套基于2.0的桌面端组件库

官网地址：http://element-cn.eleme.io/#/zh-CN

A.安装：

npm install element-ui -S

B.导入使用：

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

  1. Vue.use(ElementUI)

web前端工程化的更多相关文章

  1. web前端工程化/构建自动化

    前端工程化 前端工程化的概念在近些年来逐渐成为主流构建大型web应用不可或缺的一部分,在此我通过以下这三方面总结一下自己的理解. 为什么需要前端工程化. 前端工程化的演化. 怎么实现前端工程化. 为什 ...

  2. 一张图告诉你移动Web前端所有技术（工程化、预编译、自动化）

    你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML5.CSS 3.JavaScript ...

  3. 一张图掌握移动Web前端所有技术（大前端、工程化、预编译、自动化）

    你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa  跨终端技术:HTML 5.CSS 3.JavaScri ...

  4. 前端工程化的的理解，浅谈web工程化的开发流程

    1. 什么是前端工程化 自有前端工程师这个称谓以来,前端的发展可谓是日新月异.相比较已经非常成熟的其他领域,前端虽是后起之秀,但其野蛮生长是其他领域不能比的.虽然前端技术飞快发展,但是前端整体的工程生 ...

  5. web前端工程师在移动互联网时代里的地位问题

    支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...

  6. 架构设计：前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

  7. Silence.js高效开发移动Web前端类库

    基于Zepto的轻量级移动Web前端JavaScript类库. 编写这个类库原因及目的: 采用MVC设计模式,使代码工程化结构化. 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Aj ...

  8. web前端的发展态势

     以前 作为一个java程序员写的代码主要还是后台的代码,虽然开始的时候前后端都写,但是也是用别人造好的轮子来用,学学html,css,js,jquery,再找一个前端ui框架学学,上手之后我们就可以 ...

  9. 前后端分离之Web前端架构设计

    架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...

随机推荐

  1. 命令——tree

    tree——以树形结构显示目录文件 [root@centos71 ~]# yum provides tree Loaded plugins: fastestmirror Loading mirror ...

  2. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  3. HDU 3613 Best Reward ( 拓展KMP求回文串 || Manacher )

    题意 : 给个字符串S,要把S分成两段T1,T2,每个字母都有一个对应的价值,如果T1,T2是回文串,那么他们就会有一个价值,这个价值是这个串的所有字母价值之和,如果不是回文串,那么这串价值就为0.问 ...

  4. windows及linux下 golang开发环境配置

    windows环境: 1.系统以及软件包版本: OS: windows 8.1  64位  x64处理器 GO:安装包:go1.7.3.windows-amd64.mis IDE:压缩包:liteid ...

  5. UE4 质心相关

    Add force 始终给质心施加力,即使手动偏移了质心(Center of mass)也不例外. Add force at location local 相对于物体的原始质心位置增加一个偏移值后的位 ...

  6. UE4 Pro Tips（keeps updating）

    Consolidate 功能 :在工程范围内用一种资源替换另外一种或多种资源具体操作:同时在编辑器中选中两个或多个资源,右键>Asset Actions>Replace Reference ...

  7. qbzt day1 上午

    内容提要 模拟,贪心 在讲这些东西之前,我们先来了解一个东西:high level 这个东西大体上就是你做题之前要先想清楚自己要写什么,怎么写,然后再写,不要有一点写一点 1.模拟 模拟算法算是很水的 ...

  8. vim推荐的光标移动配置文件?

    http://roclinux.cn/?p=1466 inoremap jk inoremap ... 参考较好的vim设置文件 : 共享粘贴板: set clipboard+=unnamed 除了映 ...

  9. Powershell 邮件发送

    目录 目录 前言 Send-MailMessage NETMail 使用OutLook发送邮件 前言 最近领导想在winServer2012上搞个自动发送邮件的计划任务,下面有几种发送邮件的方式. 如 ...

  10. Value Iteration Algorithm for MDP

    Value-Iteration Algorithm: For each iteration k+1: a. calculate the optimal state-value function for ...