【前端52_Vue】工程化：快速安装脚手架、创建项目、安装插件、开发需要知道的：静态文件的引入、路径转换规则、CSS：预处理器、Scoped、数据访问相关：数据模拟、代理

2024-05-10 09:32
文章标签 javascript 数据 访问 安装 路径 快速 css 模拟 vue 创建 scoped 前端 代理 处理器 静态 插件 frontend 引入 52 脚手架 工程化 转换规则

本文主要是介绍【前端52_Vue】工程化：快速安装脚手架、创建项目、安装插件、开发需要知道的：静态文件的引入、路径转换规则、CSS：预处理器、Scoped、数据访问相关：数据模拟、代理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 工程化 Vue cli
    • 简介
    • 快速开发
      • 全局安装 vue/cli-service-global
      • 单个 vue 的预览
    • 创建项目
      • 命令行创建
      • Vue UI
    • 安装插件
    • 开发需要知道的
      • 静态文件的引入
      • 路径转换规则
      • 何时使用绝对 / 相对路径？
      • 使用 `public` 文件夹的注意事项（尽量不用）
    • CSS 相关
      • 预处理器
      • 自动化导入样式
      • Scoped CSS
      • 深度选择器
        • scoped 中的穿透
        • `scss` 中使用穿透
      • CSS Module
    • 数据访问相关
      • 数据模拟
      • 代理
    • 写在最后

工程化 Vue cli

简介

工程化，它的全称叫做：command line interface

引入工程化的目的是：让项目有系统性的工程管理、优化、以及压缩等

你想啊，如果是单 html 这样的文件去做前端项目的话，会有很多弊端

  • 如果是团队开发，你改这别人改哪儿的，合并代码的时候一堆报错，导致邻里不和谐
  • 维护起来十分复杂，一坨屎谁写的，删掉！
  • 不好优化，比方说压缩一下静态资源啦，压缩生产代码啦等等

所以，工程化应运而生

快速开发

全局安装 vue/cli-service-global

要想起一个 vue 项目，我们需要安装全局依赖

npm install -g @vue/cli-service-global

单个 vue 的预览

我们可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发
请添加图片描述

创建项目

命令行创建

安装完Vue cli脚手架之后，可以在终端通过如下命令创建项目

vue create 你的项目名

在这里插入图片描述

自定义有如下选项（以后可能更多）

是否用 babel、是否用TS、PWA、路由管理、状态管理、CSS 预编译器、代码风格以及格式化工具、单元测试、端对端测试

这些都是比较常用的，不清楚的可以百度一下
在这里插入图片描述

选择完之后，回车即可，创建完项目之后是这个样子，可以看到一个项目的概览
在这里插入图片描述

Vue UI

或者通过页面交互的形式来创建项目，在终端里输入如下命令

vue ui

然后再 create 菜单中配置你的项目的一些变化，跟命令行中的设置差不多，配置好后，点击创建项目即可

请添加图片描述

同时终端会有变化
在这里插入图片描述

创建好项目后，浏览器会自动弹出 Vue ui 的 dashbord （仪表盘），页面大概长这个样子

在这里插入图片描述

可以通过 inspect 检查的功能查看 vue cli 脚手架 自动给我们配置的 webpack 配置

在这里插入图片描述

安装插件

Vue CLI 使用了一套基于插件的架构。插件可以修改 webpack 的内部配置，也可以向 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令。

这里举个例子：

vue add router

在这里插入图片描述

开发需要知道的

静态文件的引入

开发时难免遇到静态资源，如何引入呢？

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源 将被 webpack 处理。

后面跟的随机数是文件的 hash，webpack 静态处理了这些资源并打包

在这里插入图片描述

如果想用绝对地址，也就是服务器下的资源，可以把静态资源放到 public 文件夹下，这样就不会被 webpack 打包处理了。

在这里插入图片描述

路径转换规则

  • 如果 URL 是一个绝对路径 (例如 /images/foo.png )，它将会被保留不变。

    <img alt="Vue logo" src="/assets/logo.png">
<img alt="Vue logo" src="http://image.xx.com/logo.png">

  • 如果 URL 以 . 开头会作为一个相对模块请求被解释并基于文件系统相对路径

    <img alt="Vue logo" src="./assets/logo.png">

  • 如果 URL 以 ~ 开头会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源（也就是说node_module 里的东西也能拿出来引用，并不常见）:

    <img src="~some-npm-package/foo.png">

  • 如果 URL 以 @ 开头会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 src 的别名 ，记为@ （你可以理解 @ 就是 src 文件夹的路径，它也是相对路径，所以会被 webpack 处理）。

    import Hello from '@/components/Hello.vue'

何时使用绝对 / 相对路径？

通过 webpack 的处理并获得如下好处:

  • 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
  • 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
  • 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

如下情况考虑使用 public 文件夹

  • 你需要在构建输出中指定一个固定的文件名字。
  • 你有上千个图片，需要动态引用它们的路径。
  • 有些库可能和 webpack 不兼容，除了将其用一个独立的

使用 public 文件夹的注意事项（尽量不用）

  • 如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀

    官网的 vue cli 说明

    以下举个栗子🌰
    在这里插入图片描述

  • 在 public/index.html 等通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀
    在这里插入图片描述

  • 在模板中，先向组件传入 BASE_URL

    data () {return {publicPath: process.env.BASE_URL}
}

    然后这样使用

    <img :src="`${publicPath}my-image.png`">

这里举个例子

在这里插入图片描述

CSS 相关

预处理器

如果你用了其他的 css 预处理语言，但是没有安装，就会报错啊~

报错图片如下：

在这里插入图片描述

安装一下

# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus

不过我安装 node-sass 安装失败了，问题不详（我猜测应该是 scss-loader 版本的问题），解决办法是重新创建个项目，哪里会让你选择 css 预编译器，

自动化导入样式

自动化导入样式文件 (用于颜色、变量、mixin 等)，可以使用 style-resources-loader 这个依赖，我们先安装以下

npm i -D style-resources-loader

然后再 vue.config.js 中配置一下

// vue.config.js
const path = require("path");
function addStyleResource(rule) {rule.use("style-resource").loader("style-resources-loader").options({patterns: [path.resolve(__dirname, "./src/styles/imports.scss")],});
}module.exports = {lintOnSave: false,chainWebpack: (config) => {const types = ["vue-modules", "vue", "normal-modules", "normal"];types.forEach((type) =>addStyleResource(config.module.rule("scss").oneOf(type)));},
};

生效的样子如下：
在这里插入图片描述

Scoped CSS

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素

其原理是通过使用 PostCSS 来实现以下转换:

<template><div class="red" data-v-f3f3eg9>hi</div>
</template><style>
.red[data-v-f3f3eg9] {color: red;
}
</style>

下图是我做的实验啊。
在这里插入图片描述

在这里插入图片描述

深度选择器

深度选择器是在 scoped 生效的

scoped 中的穿透

可以通过 >>> 穿透，意思就是：在父组件控制子组件的元素样式。其原理应该是交集选择器，证据如下：

在这里插入图片描述
使用场景

  • 修改三方的样式库，比方说 element UI
scss 中使用穿透

说是有两种方法，但是 /deep/ 这种不好使，查了一下应该是 sass-load 版本的问题

<style scoped lang="scss">
#app {// 第 1 种方法/deep/ a {color: rgb(196, 50, 140)}// 第 2 种方法::v-deep a {color: rgb(196, 50, 140)}
}
</style>

在这里插入图片描述

CSS Module

CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。 vue-loader 提供了与 CSS Modules 的 集成，可以作为模拟 scoped CSS 的替代方案。

首先这样写 style，需要用 module 来声明出来

<style module lang="scss">
.red {color: #f00;
}
.bold {font-weight: bold;
} </style>

模板中通过 $style.xx 访问

<a :class="$style.red">awesome-vue</a>
<a :class="{[$style.red]:isRed}">awesome-vue</a>
<a :class="[$style.red, $style.bold]">awesome-vue</a>

在 JavaScript 中也可以访问

<script>
export default {
created () {
// -> "red_1VyoJ-uZ"
// 一个基于文件名和类名生成的标识符 console.log(this.$style.red)
} }
</script>

例子如下：

在这里插入图片描述

数据访问相关

数据模拟

在这里插入图片描述

代理

做代理，浏览器是看不到的，但并不是说没有做这个代理，我们仍然访问的是本地 8080 端口，然而找不到这个静态资源，于是去代理服务器寻找

在这里插入图片描述

在这里插入图片描述

写在最后

今天突然发现一下多了 9 个粉丝，我的天，什么情况，我买水军了？

好兄弟们有啥想法可以提出来哦，有用的话点个赞让我知道一下也行啊，感激不尽 desu。

请添加图片描述

这篇关于【前端52_Vue】工程化：快速安装脚手架、创建项目、安装插件、开发需要知道的：静态文件的引入、路径转换规则、CSS：预处理器、Scoped、数据访问相关：数据模拟、代理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/976060。

相关文章

Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...
Linux下利用select实现串口数据读取过程

Linux下利用select实现串口数据读取过程

《Linux下利用select实现串口数据读取过程》文章介绍Linux中使用select、poll或epoll实现串口数据读取,通过I/O多路复用机制在数据到达时触发读取,避免持续轮询,示例代码展示设... 目录示例代码（使用select实现）代码解释总结在 linux 系统里，我们可以借助 select、
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
idea+spring boot创建项目的搭建全过程

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,：本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2