Vue脚手架

Vue Cli脚手架使用

一、通过一个脚手架创建一个新项目

可以使用VScode的终端操作，但必须给一个管理员权限

1、创建（两种方法）

vue create 项目名
vue ui（UI是user interface–图形化界面的创建方式，在图形化界面中创建）

1.1 一般可以创建vue2即可

1.2 创建好后可以在package.json文件下，看到

在这里插入图片描述

有三个命令，一般在开发中常用的是第一个**serve——它可以帮我们打开一个本地的静态资源服务器，将项目直接跑起来，方便我们在开发中去使用**

2、使用`serve`将项目跑起来

注意：要执行这个命令，必须要在当前项目的目录下操作，如不是，可以通过以下操作跳转

在这里插入图片描述

接下来即可使用npm run serve运行此项目了

在这里插入图片描述

运行成功，点击网址即可显示出当前框架页面

在这里插入图片描述

3、使用`build`将项目打包

代码在实际操作时，在开发中会有好多的文件，但在最终呈现给用户的时候，不能是多个零碎的文件，所以需要再vue中进行一个打包处理——build（前提也是终端在当前项目的目录下）

接下来即可使用npm run build来执行

在这里插入图片描述

执行成功，这样在文件的目录下及会出现一个dist文件，里面便是打包好的项目文件

此时打包好后的项目的.html文件：

在这里插入图片描述

中的js和css文件的路径都是以/开头的，此时运行需要以一种服务器的方式，进行代码访问，此时需要安转npm工具

使用npm i serve -g

serve——可以帮助我们去快速启动一个静态资源服务器来执行，该目录下的一个代码运行
i——安装的简写、-g——进行一个全局安装

4、尝试运行带包好后的`dist`项目

也是在该项目下

运行代码serve dist

在这里插入图片描述

执行成功，可以点击网址，进入并预览

在这里插入图片描述

和打包前运行的效果一样

二、目录的解释

在这里插入图片描述

1、`node_modules`目录

是当前项目安装的所有包（不需要进行改动），里面是一些第三方工具，安装好直接用就ok

2、`public`目录

里面保存的是一些不参与编译的资源

3、`src`目录

保存的是一些需要编译的资源

保存的是图片，这个图片在项目中会被编译为base64格式进行展示

保存的是所有的自定义组件功能

App.vue文件

根组件

main.js文件

这是Vue应用的一个入口文件，会对Vue文件做一个基础的配置

其余的很多都是配置文件

其中的vue.config.js是vue-cli的项目的配置文件，里面会有一些相关配置的定义，如果你想要做一些配置更改的话，就可以在这个地方做一个相应的处理

三、`Vue`组件化开发的方式

1、组件的作用与本质

作用：组件是用来区封装页面部分功能的一种方式（组件是Vue的基本构建块），它允许开发者将界面分解为独立的、可复用的部分，每个部分都包含自己的逻辑和样式。
本质：从本质上讲，Vue 组件是 JavaScript 对象，包含模板、数据、计算属性、方法和生命周期钩子。它们通过 Vue 实例管理，结合 Vue 的响应式系统，使得组件在数据变化时能够自动更新视图。

2、组件的处理与使用

在Vue中使用一个以.vue为后缀的文件，这种文件成为单文件组件（一个组件可以封装这一块功能的结构、样式和逻辑这么几个部分），所以没有.vue文件都包含了三个部分

在这里插入图片描述

template、script和style

例如，我们可以在style中修改css样式

在这里插入图片描述

此时，我们再次运行后发现页面改变（我们将内部的HelloWorld组件做了修改）

在这里插入图片描述

vue组件在使用时相当于一个html标签（自定义标签），但实质上是一个单独的Vue实例

示例：

在这里插入图片描述

在App.vue中，先在script中导入HelloWorld组件，并将该组件定义为根组件App.vue的一个子组件（根组件没有父组件）

import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld}
}

导入组件：import HelloWorld from './components/HelloWorld.vue'; 导入了一个名为 HelloWorld 的组件。

导出组件配置：export default { ... } 语句将一个对象作为默认导出，这个对象包含了：

name: 定义组件的名称为 'App'。
components: 这个对象中列出了当前组件使用的子组件。在这里，将 HelloWorld 组件注册为 App 组件的一个子组件。

四、组件通信

组件内部是独立的，但组件与组件之间也是有关联性的（数据的交互）

1、父传子

父组件中的一些数据，希望在子组件中进行访问的话，使用props进行接收

示例：

父组件中，给子组件添加一个msg属性

在这里插入图片描述

子组件要接收，使用props

2、子传父

将子组件中的数据传递响应给父组件，使用$emit（）用于触发自定义事件进行接收

自定义事件设定：this.$emit('自定义事件名', 该事件要传输的数据)
父组件的监听：@上面的自定义事件名 = "相应的处理程序名（函数，但这里不用加括号）"

示例：

子组件中：

在这里插入图片描述

父组件中：

在这里插入图片描述

定义了一个点击累加事件

在这里插入图片描述

五、组件插槽

将自定义标签变成双标签，并在内部（插槽）可以加入一些内容

在父组件中将自定义标签内写入内容（文字，HTML等）
在子组件的template中使用双标签slot（内部为当父组件在使用子组件时的一个默认插槽内容，也就是如果自定义标签不写内容的话，会在子组件中的插槽展示slot定义的默认内容）
具名插槽：如果在子组件中想多加一些插槽，定义多个slot若要单个操作单个插槽,则需给slot定义name（类似于id）<slot name='sl'></slot>，则在父组件中定义，需要<template v-slot:sl> </template>或者简写<template #sl> </template>