Vue全家桶-前端工程化

一、模块化相关规范

1.模块化概述

传统开发模式的主要问题:

命名冲突，文件依赖

通过模块化解决上述问题:

模块化就是把单独的一个功能封装到一个模块(文件)中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。

模块化开发的好处:方便代码重用，从而提升开发效率，并且方便后期的维护。

2.浏览器端模块化规范

①AMD

Require.js (http://www.requirejs.cn/)

②CMD

Sea.js (http://seajs.github.io/seajs/docs/)

3.服务器端模块化规范

①CommonJS

模块化分为单文件模块与包

模块成员导出:module.exports和exports

模块成员导入:require('模块标识符')

4.大一统的模块化规范-ES6模块化

在ES6模块化规范诞生之前，JavaScript社区已经尝试并提出了AMD, CMD,CommonJS等模块化规范。

但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，例如

AMD和CMD适用于浏览器端的JavaScript模块化。

CommonJS适用于服务器端的JavaScript模块化

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。

ES6模块化规范中的定义:

每个js文件都是一个独立的模块

导入模块成员使用import关键字

暴露模块成员使用exolport关键字

①Node.js中通过babel体验ES6模块化

⑴npm install --save-dev @babel/core @babel/click @babel/preset-env @babel/node

⑵npm install --save @babel/polyfill

(3)项目根目录创建文件 babel.config.js

(4)babel.config.js文件内容如下面代码

const presets = [

    ["@babel/env", {

        targets : {

        edge: "17",

        firefox : "60",

        chrome : "67",

        safari : "11.1"

        }

    }]

];

module.exports = { presets };

⑸通过npx babel-node index.js执行代码

5.ES6模块化的基本语法

①默认导出与默认导入

默认导出语法: export default 默认导出的成员

默认导入语法: import 接收名称 from '模块标识符'

//导入模块成员

import m1 from './m1.js'

console.log(m1);

//打印输出的结果为:

// {a:10,c:20,show:[Function:show]}

//当前文件为m1.js

//定义私有成员a和c

let a = 10

let c = 20

//外界访问不到变量d，因为它没有暴露出去

let d = 30

function show () {

      //将本模块中的私有成员暴露出去，供其他模块使用

export default {

    a,

    c,

    show

}

注意:每个模块中，只允许使用唯一的一次 export default,否则会报错。

②按需导出与按需导入

按需导出语法: export let s1 = 10

按需导入语法: import { s1 } from '模块标识符'

//导入模块成员

import { s1,s2 as ss2,say} from './m1.js'

console.log(s1)//aaa

console.log(ss2)//ccc

console.log(say)//[Function : say]

//当前文件模块为m1.js

//向外按需导出变量s1,s2,say

export let s1 = 'aaa'

export let s2 = 'ccc'

export function say = function () {}

注意:每个模块中，可以使用多次按需导出

③直接导入并执行模块代码

有时候，我们只想单纯执行某个模块中的代码，并不需要得到模块中向外暴露的成员，此时，可以直接导入并执行模块代码。

//直接导入并执行模块代码

import './m2.js'

//当前文件模块m2.js

//在当前模块中执行一个for循环操作

for(let i = 0; i < 3; i++) {

    consol.log(i)

}

二、webpack

1.当前web开发面临的问题

文件依赖关系错综复杂

静态资源请求效率低

模块化支持不友好

浏览器对高级JavaScript特性兼容程度较低

etc...

2.webpack概述

webpack是一个流行的前端项目构建工具(打包工具)，可以解决当前web开发中所面临的困境。

webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。

目前大多数企业中的前端项目，都是基于webpack进行打包构建的。

webpack的基本使用:

①创建列表隔行变色项目

⑴新建项目空白目录，并运行 npm init -y命令，初始化包管理配置文件package.json

⑵新建src源代码目录

⑶新建src -> index.html首页

⑷初始化首页基本的结构

⑸运行 npm install jQuery -S命令，安装jQuery

(6)通过模块化的形式，实现列表隔行变色效果

②在项目中安装和配置webpack

⑴运行 npm install webpack-cli -D命令，安装webpack相关的包

⑵在项目根目录中，窗帘名为webpack.config.js的webpack配置文件

⑶在webpack的配置文件中，初始化如下基本配置:

module.exports = {

    mode : 'development' //mode用来指定构建模式

}

⑷在package的配置文件中scripts节点下，新增dev脚本如下:

"scripts": {

    "dev" : "webpack" //script节点下的脚本，可以通过npm run 执行

}

⑸在终端中运行npm run dev命令，启动webpack进行项目打包。

③配置打包的入口与出口

webpack的4.x版本中默认约定:

打包的入口文件为src -> index.js

打包的输出文件为dist ->main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息:

const path = require('path')//导入node.js中专门操作路径的模块

module.exports = {

  entry : path.join(__dirname, './src/index.js') //打包入口文件的路径

output: {

  path: path.join(__dirname, './dist'),//输出文件存放路径

  filename: 'bundle.js' //输出文件的名称

  }

}

④配置webpack的基本使用

⑴运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具

⑵修改package.json -> scripts中的dev命令如下:

"scripts" : {

    "dev": "webpack-dev-server" //script节点下的脚本，可以通过npm run运行

⑶将src -> index.html中，script脚本的引用路径，修改为"/buldel.js"

⑷运行npm run dev 命令重新进行打包

⑸在浏览器中访问http://localhost:8080地址，查看自动打包效果

注意:webpack-dev-server会启动一个实时打包的http服务器

webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不见的。

⑤配置html-webpack-plugin生成预览页面

⑴运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件

⑵修改webpack.config.js文件头部区域，添加如下配置信息

//导入生成预览页面的插件，得到一个构造函数

const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({//创建插件的实例对象

    template:'./src/index.html',//指定要用到的模板文件

    filename : 'index.html'  //指定生成的文件的名称，该文件存在于内存中，在目录中不显示

})

⑶修改webpack.config.js文件中向外暴露的配置对象，新增如下配置节点:

module.exports = {

    plugins: [ htmlPlugin] //plugins数组是webpack打包期间会用到的一些插件列表

}

⑥配置自动打包相关的参数

//package.json中的配置

//--open 打包完成后自动打开浏览器页面

//--host配置IP地址

//--port配置端口

"scripts": {

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

}

3.webpack中的加载器

①通过loader打包非js模块

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。

loader加载器可以协助webpack打包处理特定的文件模块，比如:

less-loader可以打包处理.less相关的文件

sass-loader可以打包处理.scss相关的文件

url-loader可以打包处理css中的url路径相关的文件。

②loader的调用过程

将要被webpack打包处理的文件模块-是否为js模块，

4.webpack中加载器的基本使用

CSS

LESS

SCSS

PostCSS

JavaScript

Image/Font

Vue

①打包处理css文件

⑴运行npm i style-loader css-loader -D命令，安装处理css 文件的loader

⑵在webpack.config.js的module -> rules数组中，添加loader规则如下:

//所有第三方文件模块的匹配规则

module: {

    rules : [

      { test : /\.css$/, use : ['style-loader','css-loader']}

    ]

}

其中，test表示匹配的文件类型，use表示对应要调用的loader

注意:

use数组中指定的loader顺序是固定的

多个loader的调用顺序是:从后往前调用。

②打包处理less文件

⑴运行npm i less-loader less -D命令

⑵在webpack.config.js的module -> rules数组中，添加loader规则如下:

//所有第三方文件模块的匹配规则

module: {

  rules:[

    { test: /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']}

  ]

}

③打包处理scss文件

⑴运行npm i sass-loader node-sass -D命令

⑵在webpack.config.js的module -> rules数组中，添加loader规则如下:

//所有第三方文件模块的匹配规则

module: {

  rules:[

    { test: /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']}

  ]

}

④配置postCss自动添加css的兼容前缀

⑴运行npm i postcss-loader autoprefixer -D命令

⑵在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置:

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件

module.exports = {

  plugins: [autoprefixer]  //挂载插件

}

⑶在webpack.config.js的module -> rules 数组中，修改css 的loader规则如下:

module: {

  rules:[

    { test: /\.css$/, use : ['style-loader', 'css-loader', 'postcss-loader']}

  ]

}

⑤打包样式表中的图片和字体文件

⑴运行 npm i url-loader file-loader -D命令

⑵在webpack.config.js的 module -> rules数组中，添加loader规则如下:

module: {

  rules: [

      {

        test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,

        use: 'url-loader?limit=16940'

      }

  ]

}

其中?之后的是loader的参数项。limit用来指定图片的大小，单位是字节byte,只有小于limit大小的图片，才会被转化为base64图片。

⑥打包处理js文件中的高级语法

⑴安装babel转换器相关的包:npm i babel-loader @babel/core @babel/runtime -D

(2)安装babel语法插件相关的包:npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

⑶在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下:

module.export = {

    presets : ['@babel/preset-env'],

    plugins: ['@babel/plugin-transform-runtime ', '@babel/plugin-proposal-class-properties ']

}

(4) 在webpack.config.js的module -> rules数组中，添加loader规则如下:

//exclude 为排除项，表示babel-loader不需要处理node_modules 中的js文件

{test:/\.js$/, use: 'babel-loader', exclude: /node_modules/}

三、Vue单文件组件

1.传统组件的问题和解决方案

问题:

全局定义嗯组件必须保证组件的名称不重复。

字符串模板缺乏语法高亮，在HTML有多行的时候，需要用到丑陋的\。

不支持CSS意味着当HTML和JavaScript组件化时，CSS明显被遗漏。

没有构建步骤限制，只能使用HTML和ES5JavaScript,而不能使用预处理器(如babel)

解决方案:

针对传统组件的问题，Vue提供了一个解决方案-使用Vue单文件组件。

2.Vue单文件组件的基本用法

单文件组件的组成结构

template 组件的模板区域

script 业务逻辑区域

style 样式区域

<template>

  这里用于定义Vue组件的模块内容

</template>

<script>

  //这里用于定义Vue组件的业务逻辑

  export default {

      data :() {  return {}  },  //私有数据

      methods: {}  //处理函数

      //...其他业务逻辑

  }

</script>

<style scoped>

  这里用于定义组件的样式

</style>

3.webpack中配置的vue组件加载器

①运行npm i vue-loader vue-template-compiler -D命令

②在webpack.config.js配置文件中，添加vue-loader的配置项如下:

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

module.exports = {

    module: {

      rules:[

          //...其他规则

        { test: /\.vue$/,loader: 'vue-loader' }

      ]

},

  plugins : [

  //...其他插件

  new VueLoaderPlugin() //请确保引入这个插件

  ]

}

4.在webpack项目中使用vue

①运行npm i vue -S安装vue

②在 src -> index.js入口文件中，通过import Vue from 'vue'  来导入vue构造函数

③创建vue的实例对象，并指定要控制的el 区域

④通过render函数渲染App根组件

//1.导入Vue构造函数

import Vue from 'vue'

//2.导入App根组件

import App from './comonents/App.vue'

const vm = new Vue({

    //3.指定vm实例要控制的页面区域

  el: '#app',

  //4.通过render函数，把指定的组件渲染到 el 区域中

    render : h => h(App)

})

5.webpack打包发布

上线之前需要通过webpack将应用进行整体打包，通过package.json文件配置打包命令:

//在package.json文件中配置webpack打包命令

//该命令默认加载项目根目录中的webpack.config.js配置文件

"scripts": {

    //用于打包的命令

    "build" : "webpack -p",

    //用于开发调试的命令

    "dev" : "webpack-dev-server --open --host 127.0.0.1 --port 3000",

}

四、Vue脚手架

1.Vue脚手架的基本用法

Vue脚手架用于快速生成Vue项目基础架构，其官网地址:  http://click.vuwjs.org/zh/

使用步骤:

①安装3.x版本Vue脚手架

npm install -g @vue/cli

基于3.x版本的脚手架创建vue项目

//⑴基于交互式命令行 的方式，创建 新版 vue项目

vue create my-project

//⑵基于 图形化界面的方式，创建 新版vue项目

vue ui

//⑶基于2.x的旧模板，创建 旧版vue项目

npm install -g @vue/cli-init

vue init webpack my-project

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

.git 

node_modules --------依赖包目录

public-------静态资源目录

src------组件源码目录

.gitinore

babel.config.js ----babel配置文件

package.json

package-lock.json

README.md

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

①通过package.json配置项目

//必须是符合规范的json语法

"vue" : {

    "devServer" : {

        "port" : "8888",

        "open" : true

      }

}

注意:不推荐使用这种方式，因为package.json主要用来管理包的配置信息，为了方便维护，推荐将vue脚手架相关的配置，单独定义到vue.config.js配置文件中。

②通过单独的配置文件配置项目

⑴在项目的根目录创建文件vue.config.js

⑵在该文件中进行相关配置，从而覆盖男人嘛配置

//vue.config.js

module.exports = {

  devServer : {

      port : 8888

  }

}

五、Element-UI的基本使用

Element-UI:一套为开发者，设计师，和产品经理准备的基于vue 2.0的桌面端组件库。

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

1.基于命令行方式手动安装

①安装依赖包npm i element-ui -S

②导入Element-UI相关资源

//导入组件库

import ElementUI from 'element-ui';

//导入组件相关样式

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

//配置Vue插件

Vue.use(ElementUI);

2.基于图形化界面自动安装

①运行vue ui命令，打开图形化界面

②通过Vue项目管理器，进入具体的项目配置面板

③点击 插件 -> 添加插件，进入插件查询面板

④搜索vue-cli-plugin-element并安装

⑤配置插件，实现按需导入，从而减少打包后项目的体积。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 160,026评论 4赞 364
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,655评论 1赞 296
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 109,726评论 0赞 244
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,204评论 0赞 213
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,558评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,731评论 1赞 222
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,944评论 2赞 314
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,698评论 0赞 203
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,438评论 1赞 246
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,633评论 2赞 247
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,125评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,444评论 3赞 255
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,137评论 3赞 238
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,103评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,888评论 0赞 197
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,772评论 2赞 276
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,669评论 2赞 271