【Vue系列五】—Vue学习历程的知识分享！

前言

本篇文章讲述前端工程化从模块化到如今的脚手架的发展，以及Webpack、Vue脚手架的详解！

一、模块化

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

传统开发问题存在命名冲突和文件依赖关系不明确

浏览器模块化方案

AMD ==>require.js
CMD ==>sea.js

服务器模块化方案

CommonJS

模块分为单文件模块与包
模块成员导出：module.exports 和 exports
模块成员导入：require

ES6模块化方案

浏览器和服务器通用的方案

每个 JS 文件都是一个独立的模块
导入模块成员使用 import 关键字
暴露模块成员使用 export 关键字

默认导出与导入

export default{ }
import xxx from 'xxx'
一个模块中 export default 只允许使用一次！
没有导出的话，import 会得到一个空对象

按需导出与导入

javascript 复制代码

// 按需导出可以写多次
export function say() {
    console.log('say ~~~');
}

// 默认导出只能写一次
// ...
export default {
    a,
    c,
    show
};




import m1, {say} from './m1';

直接导入模块会执行其中的代码

二、Webpack

前端项目构建工具（打包工具）

当前web开发面临的困境

文件依赖关系错中复杂
静态资源请求效率低
模块化支持不友好
浏览器对高级 JS 兼容程度低
etc...

基本使用

初始化包管理配置文件 npm init
新建src源文件目录
新建src/index.html首页
初始化首页基本结构

配置Webpack

安装webpack相关的包 npm i webpack webpack-cli-D
项目根目录创建webpack.config.js配置文件
在配置文件中，初始化基本配置
package.json中配置scripts
使用npm run dev 打包项目

入口和出口

默认入口为 src/index.js
默认出口为 dist/main.js

javascript 复制代码

const path = require('path');

module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode: 'development'
};

自动打包功能

安装

javascript 复制代码

npm i webpack-dev-server -D

修改package.json中的script

javascript 复制代码

{
    "scripts": {
        "dev": "webpack-dev-server"
    }
}

将index.html中的JS路径修改为/bundle.js
访问本地路径

配置devServer

javascript 复制代码

module.exports = {
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8888
    }
};

生成预览页面

安装

npm i html-webpack-plugin -D
配置webpack.config.js

javascript 复制代码

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

const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/index.html', // 指定用到的模板文件
    filename: 'index.html' // 在内存中生成文件的名称
});

删除index.html文件中引入的js文件

三、webpack处理样式

处理css

安装

npm i style-loader css-loader -D
配置modules下的rules

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

使用

处理less

安装

javascript 复制代码

npm i less-loader less -D

配置modules下的rules

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
};

处理sass

安装

javascript 复制代码

npm i sass-loader node-sass -D

配置modules下的rules

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
};

处理css前缀

安装

javascript 复制代码

npm i postcss-loader autoprefixer -D

配置 postcss.config.js

项目根目录新建文件：postcss.config.js

javascript 复制代码

const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [autoprefixer]
};

修改webpack.config.js中modules下的css的rules

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
        ]
    }
};

package.json中做支持情况的配置
测试

处理图片和字体

安装

npm i url-loader file-loader -D
配置modules下的rules

javascript 复制代码

// 单位是字节(1kb = 1024byte)，小于 limit 大小的图片会被转为 base64
// 右键图片属性可以查看图片的字节大小
module.exports = {
    module: {
        rules: [
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=16940'
            }
        ]
    }
};

四、webpack处理JS的语法

安装

babel 转换器相关的包

cnpm i babel-loader @babel/core -D
cnpm i @babel/runtime -S

babel 语法插件相关的包

cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

配置根目录的babel.config.js

javascript 复制代码

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
};

配置modules下的rules

javascript 复制代码

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

五、单文件组件

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

问题

全局定义的组件必须保证组件的名称不重复
字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS 意味着当 HTML 和 JS 组件化时，CSS 明显被遗漏
没有构建步骤限制，只能使用 HTML 和 ES5 JS，而不能使用预处理器（Babel）

解决方案

Vue 提供了一个解决方案，使用 Vue 单文件组件

template
script
style

集成Vue

安装

javascript 复制代码

npm i vue-loader vue-template-compiler -D

配置modules下的rules和plugins

javascript 复制代码

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [new VueLoaderPlugin()]
};

使用Vue

安装
引入Vue框架
创建Vue实例对象，并制定要控制的el区域
通过render函数渲染App根组件

六、Vue脚手架

可以用来快速生成 Vue 项目的基础架构

安装

npm install -g @vue/cli
创建项目

javascript 复制代码

1.    基于交互式命令行
vue create my-project
2.    基于图形化界面
vue  ui
3.    基于旧版本，创建旧版本vue项目
npm install -g @vue/cli-init

vue init webpack my-project

配置

七、Element-UI

一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库

入口：Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/2.13/#/zh-CN

安装

npm i element-ui -S
导入相关资源

javascript 复制代码

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

看文档使用

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！