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

news2024/9/24 11:14:02

前言

本篇文章讲述前端工程化从模块化到如今的脚手架的发展，以及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 的桌面端组件库icon-default.png?t=O83Ahttps://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思维导图可获取完整知识导图~

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2160206.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

黑马智数Day2

黑马智数Day2

表单基础校验实现 基础双向绑定 v-model <el-input v-model"formData.username" /> <script> export default {name: Login,data() {return {formData: {username: ,password: ,remember: }}} } </script> 表单校验配置 按照业务要求编写校验规…
阅读更多...
231. 2 的幂 简单递归 python除法的类型

231. 2 的幂 简单递归 python除法的类型

已解答 简单 相关标签 相关企业 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1a; 输入&…
阅读更多...
【ollama 在linux 上离线部署 本地大模型】

【ollama 在linux 上离线部署 本地大模型】

本文继续来讲如何在linux上部署离线本地智能大模型&#xff0c;前篇如下&#xff1a;window上部署离线大模型 首先还是安装ollama linux版本&#xff0c;如果完全离线的话&#xff0c;可以从github上下载一个linux 版本的压缩包传上去 git hub上搜索ollama 找到右下角 找到li…
阅读更多...
Centos/fedora/openEuler 终端中文显示配置

Centos/fedora/openEuler 终端中文显示配置

注意&#xff1a;这里主要解决的是图形界面、远程登录界面的中文乱码问题 系统原生的终端&#xff08;如虚拟机系统显示的终端&#xff09;&#xff0c;由于使用的是十分原始的 TTY 终端&#xff0c;使用点阵字体进行显示&#xff0c;点阵字体不支持中文&#xff0c;因此无法显…
阅读更多...
用友与万里汇达成战略合作，共创出海企业司库管理新篇章

用友与万里汇达成战略合作，共创出海企业司库管理新篇章

新加坡 2024年9月23日 在全球数字化浪潮的推动下&#xff0c;中国企业正加速融入全球贸易体系&#xff0c;面对复杂多变的国际市场环境&#xff0c;寻求更高效、便捷的跨境贸易解决方案成为众多出口企业的迫切需求。 9月23日&#xff0c;用友网络科技股份有限公司&#xff08…
阅读更多...
KDD2024 时序论文

KDD2024 时序论文

1、Generative Pretrained Hierarchical Transformer for Time Series Forecasting paper: https://dl.acm.org/doi/abs/10.1145/3637528.3671855 code&#xff1a;GitHub - SiriZhang45/FRNet: Code Implementation of FRNet 2、Fredformer: Frequency Debiased Transforme…
阅读更多...
[Redis][持久化][上][RDB]详细讲解

[Redis][持久化][上][RDB]详细讲解

目录 0.前言1.RDB0.是什么&#xff1f;1.触发机制2.流程说明3.RDB文件的处理4.RDB的优缺点 0.前言 Redis ⽀持 RDB 和 AOF 两种持久化机制&#xff0c;持久化功能有效地避免因进程退出造成数据丢失问题&#xff0c;当下次重启时利⽤之前持久化的⽂件即可实现数据恢复 RDB ->…
阅读更多...
展锐平台的手机camera 系统isptool 架构

展锐平台的手机camera 系统isptool 架构

展锐平台的isptool 主要用于支持展锐各代芯片isp的各效果模块快速tuning和参数生成打包。 具体需要&#xff1a; 一、工具段能在线实时预览到调试sensor经过isp 处理后的图像&#xff0c;也就是各模块的参数在当下实时生效&#xff0c;通过工具能在PC 上在线观看到修改的效果。…
阅读更多...
[笔记]2024大厂变频器，电机参数一览

[笔记]2024大厂变频器，电机参数一览

注意中心高&#xff0c;在用铁心规格&#xff0c;功率换算表 温升曲线在预防性维护过程能用到 注意各类电流参数,上面双极对&#xff0c;下面3极对。 另一种极对数 4极对的电机参数可参考&#xff0c;不常用。 emc滤波&#xff0c; Sto,通讯接口 颜色区分的接口设计 一组新强…
阅读更多...
基于MaxScale搭建MariaDB读写分离集群的方法【2024年最新版】

基于MaxScale搭建MariaDB读写分离集群的方法【2024年最新版】

1、什么是MaxScale MaxScale是MariaDB数据库的一个中间件&#xff0c;为MariaDB提供代理服务&#xff0c;主要可以实现读写分离和一定的负载均衡功能&#xff0c;其中读写分离可将读操作和写操作分离到不同的数据库服务器上&#xff0c;以提高系统的整体性能和扩展性&#xff…
阅读更多...
Pandas的入门操作-DataFrame对象

Pandas的入门操作-DataFrame对象

目录 类型 通过 pd.read_csv(xxx)返回df 将Series对象通过to_frame()转成df 使用列表 加元组返回df 使用字典返回df DataFrame对象的常用属性和方法 常用属性 常用方法 实例 DataFrame对象的运算 加载数据 字符串的运算 字符串和数字(会报错) 根据下表获取数据 类…
阅读更多...
第 1 章：Vue 核心

第 1 章：Vue 核心

1. Vue 简介 1.1. 官网 英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/&#xff1a;中文官网里面【教程】和【API】是比较重要的。用到api就去查询&#xff0c;实践当中记忆更牢靠。 风格指南&#xff1a;官方推荐写的一个代码风格cookbook&#xff1a;编写v…
阅读更多...
浙江省计算机三级网络及安全技术资料(最后有我考完后的想法）

浙江省计算机三级网络及安全技术资料(最后有我考完后的想法）

还有一周就要考试了&#xff0c;网上几乎找不到浙江省的计算机三级网络及安全技术的复习资料&#xff0c;大部分都是全国计算机三级的复习资料&#xff0c;气得我直接对着大纲一部分一部分找过去。以后的友友们需要的自取&#xff0c;为了能够顺利通过浙江省计算机三级考试&…
阅读更多...
『功能项目』按钮的打开关闭功能【73】

『功能项目』按钮的打开关闭功能【73】

本章项目成果展示 我们打开上一篇72QFrameWork制作背包界面UGUI的项目&#xff0c; 本章要做的事情是制作打开背包与修改器的打开关闭按钮 首先打开UGUICanvas复制button按钮 重命名为ReviseBtn 修改脚本&#xff1a;UIManager.cs 将修改器UI在UGUICanvas预制体中设置为隐藏 运…
阅读更多...
FP7208：升压汽车车灯方案 高效稳定的电力支持

FP7208：升压汽车车灯方案 高效稳定的电力支持

前言 近年来随着汽车的不断普及&#xff0c;车灯方面也在不断发展&#xff0c;车灯对于汽车不仅是外观件更是汽车主动安全的重要组成部分。灯光在保证照亮前部道路的同时&#xff0c;还要确保不对对面车辆产生眩目影响。同时需要针对不同路况和不同载荷引起的灯光偏离进行调整&…
阅读更多...
Linux：文件描述符详解

Linux：文件描述符详解

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 Linux中的所有进程&#xff0c;都拥有自己的文件描述符(File Descriptor, FD)&#xff0c;它是操作系统在管理进程和文件时的一种抽象概念。每个文件描述符由一个非负整…
阅读更多...
胤娲科技：DeepMind的FermiNet——带你穿越“薛定谔的早餐桌”

胤娲科技：DeepMind的FermiNet——带你穿越“薛定谔的早餐桌”

当AI遇上量子迷雾&#xff0c;FermiNet成了你的“量子导航仪” 想象一下&#xff0c;你早晨醒来&#xff0c;发现家里的厨房变成了薛定谔的实验室&#xff0c;你的咖啡杯和吐司同时处于“存在与不存在”的叠加态。 你伸手去拿&#xff0c;却不确定会不会摸到冰冷的空气或是热腾…
阅读更多...
文献笔记 - Reinforcement Learning for UAV Attitude Control

文献笔记 - Reinforcement Learning for UAV Attitude Control

这篇博文是自己看文章顺手做的笔记 只是简单翻译和整理 仅做个人参考学习和分享 如果作者看到觉得内容不妥请联系我 我会及时处理 本人非文章作者&#xff0c;文献的引用格式如下&#xff0c;原文更有价值 Koch W, Mancuso R, West R, et al. Reinforcement learning for UA…
阅读更多...
前端——表单和输入

前端——表单和输入

今天我们来学习web前端中的表单和输入 表单 HTML 表单用于收集用户的输入信息&#xff0c;用表单标签来完成服务器的一次交互。 HTML 表单表示文档中的一个区域&#xff0c;此区域包含交互控件&#xff0c;将用户收集到的信息发送到 Web 服务器。 HTML 表单通常包含各种输入…
阅读更多...
【android10】【binder】【3.向servicemanager注册服务】

【android10】【binder】【3.向servicemanager注册服务】

系列文章目录 可跳转到下面链接查看下表所有内容https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501文章浏览阅读2次。系列文章大全https://blog.csdn.net/handsomethefirst/article/details/138226266?spm1001.2014.3001.5501 目录 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023