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目录
保存的是一些需要编译的资源
assets目录
保存的是图片，这个图片在项目中会被编译为base64格式进行展示
components目录
保存的是所有的自定义组件功能
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>