【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...

基本使用

  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

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思维导图可获取完整知识导图~

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

相关推荐
该用户已不存在20 分钟前
这6个网站一旦知道就离不开了
前端·后端·github
Ai行者心易24 分钟前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端·后端
东东23332 分钟前
前端开发中如何取消Promise操作
前端·javascript·promise
掘金安东尼37 分钟前
官方:什么是 Vite+?
前端·javascript·vue.js
柒崽38 分钟前
ios移动端浏览器,vh高度和页面实际高度不匹配的解决方案
前端
渣哥1 小时前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴1 小时前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长1 小时前
tailwindcss出现could not determine executable to run
前端·tailwindcss
louiseailife1 小时前
央国企RPA选型新标准:安全、稳定、智能化成关键
经验分享
Moonbit1 小时前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员