2024年前端最全vue脚手架项目的详解_如何理解vue脚手架的实现逻辑，2024年我们程序员该如何进阶和规划

最新推荐文章于 2024-05-28 22:38:26 发布
最新推荐文章于 2024-05-28 22:38:26 发布
阅读量883 收藏 8
点赞数 18
分类专栏： 程序员 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411323/article/details/138502606
版权

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

HTML 和静态资源

HTML

Index 文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。

插值

因为 index 文件被用作模板，所以你可以使用 lodash template 语法插入内容：

  • <%= VALUE %> 用来做不转义插值；
  • <%- VALUE %> 用来做 HTML 转义插值；
  • <% expression %> 用来描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE\_URL %>favicon.ico">

处理静态资源

静态资源可以通过两种方式进行处理：

  • 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
  • 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require('./image.png')，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

在其内部，我们通过 webpack 的 Assets Modules 配置，用版本哈希值和正确的公共基础路径来决定最终的文件路径，并将小于 8KiB 的资源内联，以减少 HTTP 请求的数量。

URL 转换规则
  • 如果 URL 是一个绝对路径 (例如 /images/foo.png)，会原样保留。
  • 如果 URL 以 . 开头，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。
  • 如果 URL 以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源：
<img src="~some-npm-package/foo.png">
  • 如果 URL 以 @ 开头，也会被看作模块依赖。如果你的 webpack 配置中给 @ 配置了 alias，这就很有用了。所有 vue-cli 创建的项目都默认配置了将 @ 指向 <projectRoot>/src。 (仅作用于模版中)
public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

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

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

  • 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
<link rel="icon" href="<%= BASE\_URL %>favicon.ico">
  • 在模板中，你首先需要向你的组件传入基础 URL：
data () {
  return {
    publicPath: process.env.BASE\_URL
  }
}

然后：

<img :src="`${publicPath}my-image.png`">
何时使用 public 文件夹
  • 你需要在构建输出中指定一个文件的名字。
  • 你有上千个图片，需要动态引用它们的路径。
  • 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

使用图片资源

执行 npm run serve 会把vue项目在内存中打包。

执行 npm run build 会把vue项目打包到dist文件内。

图片资源要放在 assets 或者 pubilc 中。

放在public中

放在pubilc中，打包的时候会直接复制pubilc中的图片，放在pubilc中的图片相当于放在服务器根目录的资源

  • 在组件中使用：<template>、<script>都是使用 /开头，比如 /img/icon-home.png
<template>
	<div>
   	<img src="/img/head.png" alt="" />
    <img :src="imgUrl" alt="" />
    <img :src="`${publicPath}img/head.png`">
    
    <div class="box" style="background-image:url('/img/head.png');">box</div>
    <div class="box" :style="{background:'url('+ imgUrl +')'}">box</div>
  </div>
</template>

<script>
  // 在模板中，你首先需要向你的组件传入基础 URL：
export default {
  data () {
    return {
      imgUrl:'/img/head.png',
      // process.env 属性返回的是一个包含用户环境信息的对象
      // process.env.BASE_URL  获取基础路径
      // process.env.NODE_ENV 获取开发环境
      publicPath: process.env.BASE_URL
    }
  }
}

</script>

放在assets中

assets中，打包的时候会把图片经过webpack处理，把图片当做一个模块

  • 在<template>中使用，可以使用 ./ 或者 …/ 开头的路径，比如：./img/home.png
  • 在<script>中，可以使用 import 导入的方式，导入之后需要在data或者computed中定义变量接收
  • 在<style>中使用，可以使用 ./ 或者 …/ 开头的路径，比如：./img/home.png

路径别名@：@ 在vue-cli中是指向 <projectRoot>/src的别名

<template>
	<div>
    
    <img alt="Vue logo" src="@/assets/logo.png" />
    <img alt="Vue logo" src="./assets/logo.png" />
    <img :src="imgurl" alt="" />
    <img :src="img" alt="" />
   	
    <div :style="{background:'url('+imgurl+')'}">box2</div>
  </div>
</template>

<script>
import timg from '@/assets/img/timg.jpg'; //导入图片
export default {
	name: 'App',
	data() {
		return {
			imgurl: timg,
      img: require('@/assets/logo.png')
		};
	},
}
</script>


<style>
  div{
    background-image: url('./assets/img/timg.jpg');
  }
</style>

使用CSS

引用静态CSS资源

  • 所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。
  • 可以根据本地的文件结构用相对路径来引用静态资源。
// main.js

// 引入本地静态资源
import '@/styles/base.scss';
import '@/styles/base.css';

CSS预处理器

使用sass
  1. 安装模块
npm install -D sass-loader sass
  1. 在style标签中添加 lang=“scss”，注意是 ‘scss’ 不是 ‘sass’
<style lang="scss">

</style>
使用less
  1. 安装模块
npm install -D less-loader less
  1. 在style标签上添加 lang=“less”
<style lang="less">

</style>
其他

使用less或者sass的时候如果报错：this.getOptions is not a function 原因：

  • sass中 sass-loader安装的的版本过高，解决：重新安装较低版本
 npm uninstall sass-loader -D
 npm uninstall node-sass -D
 
 npm install sass-loader@10.1.1 -D
 npm install node-sass@5.00 -D
  • less中 less-loader 版本过高，解决：重新安装较低版本
npm uninstall less-loader -D
npm install less-loader@5.0.0 -D

组件的样式 Scoped

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：

<style scoped>
.example {
 color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

混用本地和全局样式

你可以在一个组件中同时使用有 scoped 和非 scoped 样式：

  • 本地样式：使用带有scoped属性的style标签
  • 全局样式：
    • 使用不带 scoped 属性的style标签
    • 使用base.css在main.js或者index.html中导入
<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

子组件的根元素

子组件的根元素使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

深度作用选择器

深度作用选择器（也叫样式穿透）是类似于 >>> 或 /deep/ 或::v-deep这样的操作符。如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /\* ... \*/ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /\* ... \*/ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

深度作用选择器的主要作用是为了修改第三方组件的样式。

动态生成的内容

通过 v-html 创建的 DOM 内容不受 scoped 样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式。

还有一些要留意

  • Scoped 样式不能代替 class。考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。
  • 在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。

修改第三方组件中的样式

情况一：修改子组件的根标签样式

在父组件即使使用scoped，在父组件中依然可以设置子组件根标签的样式。

目的：这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

情况二：修改子组件根标签内部标签样式
  • 方式一：使用不带 scoped 属性的style标签，设置为全局样式影响子组件
  • 方式二：使用带 scoped 属性的style标签，需要使用样式穿透：>>> 或者 /deep/ 或者 ::v-deep
设置全局样式

使用sytle标签不带scoped属性设置为全局样式，因为第三方组件最终会被渲染成原生html标签，所以直接修改原生html标签即可，通过标签名或者渲染之后的class值选择器都可以 ：

<style>
  button:hover, .el-button:focus{
    background-color: #80008010 ;
    color: #800080;
    border: 0.5px solid #80008044;
  }
</style>

sytle标签不带scoped属性：如果第三方组件中已经对标签设置了样式，使用第一种方式失效，因为标签名选择器优先级较低，此时，添加!important提高优先级，即可使样式生效：

<style>
  input{
    border-color: red !important;
  }
</style>
设置样式穿透

有些样式，提高优先级也不生效，因为style标签有scoped属性，产生了样式隔离，当前组件设置的样式有时不能在第三方组件生效, 此时可以用 vue 样式穿透。

  • 样式穿透：摆脱样式隔离限制, 一般用来修改第三方组件中的样式。
  • 基本结构: 当前组件标签选择器 >>> 第三方组件标签选择器。
  • CSS预处理器无法正确解析 >>>。使用 /deep/ 或 ::v-deep 操作符取而代之。
<style>
  .search-box >>> .el-input {
    width: 400px;
  }
</style>

vue.config.js

配置文件

从vue-cli 3.0 ，Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：

vue inspect > output.js

修改webpack打包选项，修改服务器配置等，需要手动在项目根目录下添加一个配置文件vue.config.js，当项目启动时，vue-cli会把这个配置文件合并到原本的配置文件中。

新版本的vue-cli会在项目根目录自动创建 vue.config.js，vue对webpack的配置做了很多的修改，但是vue把webpack的配置文件隐藏了，我们想要修改webpack的配置，都写在 vue.config.js 文件中，当项目启动或者打包的时候会把我们自己在 vue.config.js 添加的配置合并到vue添加配置中，详情见：vue.config.js配置。

注意：如果修改了 vue.config.js 需要重启项目，从新加载配置文件。

常见配置

你使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  // 是否使用lint警告,如果不想使用，改为false即可,如下。（关键词eslint，语法检查）
  // lintOnSave: false, 
  lintOnSave: process.env.NODE\_ENV === 'development', 
  // 项目发布部署的路径，默认为 /
  publicPath：'/', 
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
  indexPath: 'index.html',
  pages: {
		index: {
			// 项目的入口文件是src目录下 main.js
			entry: 'src/main.js',
			// 打包项目根据提供的模板生成html文件
			template: 'public/index.html',
			// 打包项目在 dist/index.html 的输出
			filename: 'index.html',
			// 当使用 title 选项时，template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
			title: '掘金',
		},
	},
  // 生产环境去除log语句
  chainWebpack: config => {
		config.optimization.minimizer('terser').tap(args => {
			args[0].terserOptions.compress.drop_console = true;
			return args;
		});
	},
})

设置代理服务器

方式一：设置单个代理

  1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
  2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
  3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer:{
    proxy:'http://127.0.0.1:3000'
  }
}

方式二：设置多个代理

  1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
  2. 缺点：配置略微繁琐，请求资源时必须加前缀。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer:{
    proxy:{
      // 代理1
      // 当你请求是以/api开头的时候，则我帮你代理访问到http://127.0.0.1:3000
      '/api': {
        target: 'http://127.0.0.1:3000',
        // secure: false,// 如果是https接口，需要配置这个参数
        // ws: true, //是否代理websockets， 默认值为true
        
        /\*
 changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:3000
 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
 changeOrigin默认值为true
 \*/

        changeOrigin: true, // 设置请求头中的host地址，默认值为true
        //地址中的 /api 仅仅是一个请求转发标志，真正的接口中没有/api，所以在转发时重写请求路径，把/api删掉。
        pathRewrite: {'^/api' : ''}
      },
      // 代理2
      '/douyu':{
        target: 'http://open.douyucdn.cn',
         pathRewrite: {'^/douyu' : ''}
      }
    }

}

斗鱼接口文档

基础url地址：

  • http://open.douyucdn.cn

获取房间列表 —首页

  • 请求方法： GET
  • /api/RoomApi/live
  • 参数1：offset 跳过多少条：0 30 60…
  • 参数2：limit 请求条数的限制，默认是30

房间详情页：— 房间详情页面

  • 请求方法： GET
  • /api/RoomApi/room/房间id

获取所有的游戏分类—全部分类页面

  • 请求方法： GET
  • /api/RoomApi/game

获取某一个分类下的房间列表—某个分类下的房间列表页

  • 请求方法： GET
  • /api/RoomApi/live/房间分类的id

模式和环境变量

软件开发环境

软件开发环境(Software Development Environment，SDE)是指在基本硬件和宿主软件的基础上，为支持系统软件和应用软件的工程化开发和维护而使用的一组软件，简称SDE。它由软件工具和环境集成机制构成，前者用以支持软件开发的相关过程、活动和任务，后者为工具集成和软件的开发、维护及管理提供统一的支持。

项目部署环境一般可分为三种：生产环境，测试环境，开发环境

  • 开发环境：开发环境时程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。
  • 测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器上，是开发环境到生产环境的过度环境。测试环境一般是部署到公司私有的服务器或者局域网服务器上，主要用于测试是否存在bug，一般会不让用户和其他人看到，并且测试环境会尽量与生产环境相似。
  • 生产环境：生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。

上述环境也可以说是系统开发的三个阶段：开发 -> 测试 -> 上线，其中生产环境也就是通产说的真实的环境，最后交给用户的环境。

环境变量

项目开发过程中和项目发布上线后，根据开发环境和生产环境设置不同的请求地址，比如：

  • http://127.0.0.1:8080/douyu 是开发过程的开发地址
  • http://open.douyucdn.cn 是项目上线之后的正式地址

在发送请求的时候，开发过程中使用开发地址，项目打包之后使用正式地址。

比如在使用axios，开发的时候 baseURL设置为http://127.0.0.1:8080/douyu，打包项目的时候baseURL应该替换成 http://open.douyucdn.cn，处理这个问题可以使用 process.env.NODE_ENV 获取环境信息或者设置环境文件.env

模式

模式是 Vue CLI 项目中一个重要的概念。

vue-cli3中已经基于webpack把process.env.NODE_ENV配置好了，默认情况下，一个 Vue CLI 项目有三个模式：

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

可以使用 process.env.NODE_ENV 获取模式

执行 npm run serve 指令 process.env.NODE_ENV 打印的值为 development 是开发环境

执行 npm run build 指令 process.env.NODE_ENV 打印的值为 production 是生产环境

使用 process.env.NODE_ENV

使用 process.env.NODE_ENV 可以判断是开发环境还是生产环境

  • 执行 npm run serve，项目是运行在开发环境，process.env.NODE_ENV的值为 development
  • 执行 npm run build，项目是运行在生产环境，process.env.NODE_ENV的值为 production
axios.defaults.baseURL = process.env.NODE\_ENV !== 'production' 
   ? 'http://127.0.0.1:8080/douyu' : 'http://open.douyucdn.cn';

使用 .env 文件

文件命名

你可以在你的项目根目录中放置下列文件来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

mode的常用值是 development 或者 production

文件名必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件，根据响应的指令，加载对应的文件

.env 							  全局默认配置文件，不论什么环境都会加载的配置文件

.env.development		执行 npm run serve 开发环境下加载的配置文件

.env.production 		执行 npm run build 生产环境下加载的配置文件

image-20220324232008848

文件内容
命名方式

一个环境文件只包含环境变量的“键=值”对：

**注意：**属性名必须以VUE_APP_开头，比如VUE_APP_XXX

VUE_APP_NAME = 张三
环境文件加载优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

在客户端侧代码中使用环境变量

.env：

VUE_APP_NAME = 张三

.env.development：

VUE\_APP\_NAME= 李四
VUE\_APP\_AGE=18
VUE\_APP\_URL=http://127.0.0.1:3000

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

  • NODE_ENV 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
  • BASE_URL 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。
文件的加载

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

  • 执行 npm run serve 命令，会自动加载 .env.development 文件
  • 执行 npm run build命令，会自动加载 .env.production 文件

注意：.env 文件无论是开发还是生成都会加载的公用文件

使用 process.env 获取属性，这是全局属性，任何地方均可使用。

按照上述 .env 和 .env.development 文件的内容，如过我们运行npm run serve 在就先加载.env文件，之后加载.env.development文件，两个文件有同一个项，则后加载的文件就会覆盖掉第一个文件，也即是 .env.development 文件覆盖掉了.env文件的VUE_APP_NAME选项。将会有以下输出：

 process.env.NODE_ENV 		 输出：development

 process.env.VUE_APP_NAME 	输出：李四

 process.env.VUE_APP_AGE	  输出：18

 process.env.VUE_APP_URL	  输出：http://127.0.0.1:3000

create-vue

现在官方推荐使用 create-vue 来创建基于 Vite 的新项目。

创建项目

创建Vue3项目：

npm create vue@3

如果您需要支持IE11，您可以创建Vue 2项目:

npm create vue@2



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png)

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)

**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)

**前端资料汇总**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)
2401_84411323
关注
  • 18
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1380
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
怎么把HTML网页重构为VUE,基于vue cli重构多页面脚手架过程详解
weixin_39862484的博客
07-03 2297
官方提供的项目生成工具vue-cli没有对多页面webApp的支持，但是在实际的项目中，我们需要这样的脚手架，参考了很多大牛的方法，这里提供了一种我的单页面脚手架转换为多页面脚手架的方案，供大家参考。不好的地方也请大家指正。准备使用vue-cli生成一个你需要的单页面项目脚手架，然后我们就要开始我们的改装工程了。重构过程步骤一 改变目录结构step1 在src目录下面新建views文件夹,然后再v...
二、Vue脚手架工程
敲代码的小小酥的博客
03-14 1710
一、webpack介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。 二、Vue组件介绍 1. 背景 在实际项目开发中，整个前端工程，只允许有一个Vue对象，这也是Vue官方所推荐的。在第一节所学的内容中，我们直接在一个页面new Vue了。那么在前
vue使用命令行构建完项目后_Vue工程化-如何安装vue脚手架并使用脚手架创建项目详解，以及项目目录结构和各文件的解释说明...
weixin_29107289的博客
12-30 97
Vue工程化Vue工程化是为了应付在单页面开发里面的大型项目，它提供全套的解决方案，使用Vue全家桶完成整个项目的开发，期间可能会使用到第三方的框架。在进行工程化开发的时候，Vue需要借用于webpack来实现工程化，因为SPA本质上只有一个页面，所有页面跳转都是虚拟的，通过组件来进行的，而这些组件也不能够直接在浏览器里面运行，所以需要借助于webpack来进行编译。webpack与vue的结合配...
Vue项目-手机app瑞幸咖啡详解（全网最细） 从脚手架搭建到前后端数据交互（二）
qq_38256266的博客
08-30 3004
后续来啦！2.10、潮品页2.10.1、获取所有商品的分类2.10.2、展示某类型的所有商品（瀑布流）2.11、我的页面2.11.1、展示某一类型的商品2.11.2、获取个人信息2.12、待付款页2.13、购物车页2.13.1、显示购物车三、项目中遇到的一些问题四、项目中一些技术的实现4.1、拦截器4.2、vueX4.3、路由4.4、路由守卫4.5、反向代理4.6、mock数据五、项目开发体会 2.10、潮品页 潮品页面也就是从首页跳转到的二级页面，通过点击首页商品分类的更多实现跳转，静态页面效果如下：
探究Vue 的脚手架-详细版
pymxb1991的专栏
08-05 1351
从cli介绍到 安装vue/cli 到vue-create xxx 创建项目详解 jsconfig.json 详解 package.json 详解 vue.config.js 详解 public 文件夹 放置所有的静态资源 把Vue 认识透彻
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
Ly
11-22 1万+
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
Vue+Vue-Cli安装配置使用全过程详解
qq_53878224的博客
10-24 286
这里我看的是另一个博主的文章，写的非常详细，遇到问题可以看看讨论区推荐如express之类的模块用镜像安装。打开之前设置的node_global文件夹，在命令行中全局安装如果出现"Unhandled rejection Error:EACCES:permission denied"，说明操作权限不足，需要重新安装可采用如下代码。（不是很推荐，因为可能会出现一些错误）检查是否安装完成，如果终端输出版本号，表示 Node.js 已安装。
Vue详解
热门推荐
yinuo_chao的博客
05-19 1万+
Vue详解 Vue.js目前最火的一个前端框架。点击跳转Vue详解视频 在谷底也要开花！ P00 前言：回顾SSM阶段 P01 前端核心分析 Vue：前端体系、前后端分离 1、概述 Vue（读音 /vju`/，类似于 view）是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router：跳转，vue-resource：通信，vuex：管理）或既有项目
vue2，vue3已经生成好的脚手架（空项目包）
07-19
vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序...
基于脚手架创建Vue项目实现步骤详解
10-15
主要介绍了基于脚手架创建Vue项目实现步骤详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用vue脚手架（vue-cli）搭建一个项目详解
10-17
主要介绍了vue脚手架（vue-cli）搭建项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue脚手架搭建项目的兼容性配置详解
12-12
使用vue-cli搭建项目，面临着解决ie兼容性问题(ie9+)，因为ie浏览器并不支持es6语法等。 首先安装babel-polyfill，解决ie不支持promise对象的问题 npm install --save-dev babel-polyfill 安装成功之后,在main.js...
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 570
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1098
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 1153
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 554
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
最新发布
smileKH的博客
05-28 251
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
vue脚手架前端项目实战
07-27
非常抱歉，我不能提供一个完整的项目实战，但是我可以给你一些关于使用Vue脚手架创建前端项目的一般指导。 首先，你需要安装Node.js和npm，然后通过npm安装Vue脚手架。你可以使用以下命令进行安装： ``` npm install -g @vue/cli ``` 安装完成后，你可以使用Vue脚手架创建一个新的项目。你可以通过以下命令创建一个新的Vue项目： ``` vue create project-name ``` 其中，`project-name`是你想要创建的项目的名称。在创建项目的过程中，你可以选择使用默认的配置或者手动选择一些配置选项，如Babel、CSS预处理器等。 创建项目后，你可以进入项目目录并启动开发服务器。使用以下命令： ``` cd project-name npm run serve ``` 这将启动开发服务器，并在本地主机上运行你的项目。你可以在浏览器中访问`http://localhost:8080`来查看你的应用程序。 接下来，你可以开始编写你的Vue组件和页面。Vue组件是Vue应用程序的构建块，它们可以嵌套和重用。你可以在`src/components`目录下创建Vue组件，并在需要的地方引用它们。 除了组件之外，你还可以创建路由和状态管理等功能。使用Vue Router来管理应用程序的路由，使用Vuex来管理应用程序的状态。 在开发过程中，你可以使用Vue的热重载功能，它会在你进行代码更改时自动重新加载应用程序。此外，Vue脚手架还为你提供了一些开发工具和插件，如代码格式化、测试工具等。 最后，当你完成了项目的开发，你可以使用以下命令构建生产版本的应用程序： ``` npm run build ``` 这将在`dist`目录下生成一个打包好的应用程序。你可以将这些文件部署到服务器上进行生产环境的使用。 希望这些指导对你有所帮助！如果你有任何进一步的问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值