【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 会得到一个空对象

按需导出与导入

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

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




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

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

二、Webpack

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

当前web开发面临的困境

• 文件依赖关系错中复杂

• 静态资源请求效率低

• 模块化支持不友好

• 浏览器对高级 JS 兼容程度低

• etc...

基本使用

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

配置Webpack

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

入口和出口

• 默认入口为 src/index.js

• 默认出口为 dist/main.js

const path = require('path');

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

自动打包功能

• 安装

npm i webpack-dev-server -D

• 修改package.json中的script

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

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

配置devServer

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

生成预览页面

• 安装

  npm i html-webpack-plugin -D

• 配置webpack.config.js

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

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

• 使用

处理less

• 安装

npm i less-loader less -D

• 配置modules下的rules

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

处理sass

• 安装

npm i sass-loader node-sass -D

• 配置modules下的rules

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

处理css前缀

• 安装

npm i postcss-loader autoprefixer -D

• 配置 postcss.config.js

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

const autoprefixer = require('autoprefixer');

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

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

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

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

• 测试

处理图片和字体

• 安装

  npm i url-loader file-loader -D

• 配置modules下的rules

// 单位是字节(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

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

• 配置modules下的rules

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

• 安装

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

• 配置modules下的rules和plugins

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

• 创建项目

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

• 导入相关资源

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

• 看文档使用

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

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

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