Vue第七章：项目环境配置及单文件组件 vue脚手

蔚落 2023-09-29 16:24 8阅读 0赞

## 第七章：项目环境配置及单文件组件 vue脚手架 ##

### 回顾： ###

组件之间的通信

父传子：正向传递 vue允许 自动触发

props

1.先在子组件中定义期待的属性名和类型

2.在父组件中调用子组件的位置 添加 v-bind:自定义属性名

注意：props只读属性 ====》data()\{ 属性 \}

子传父：逆向传递 vue允许 主动触发

自定义事件 click blur focus… 监听自定义事件触发的函数

1.在子组件中定义函数 ===》 this.$emit( ‘自定义事件名’ ，传递的参数 );

2.在父组件中调用子组件的位置 < son @自定义事件名= ‘fn()’>< /son> 添加一个绑定一个自定义事件

fn(val)函数中 val就是传递来的参数

xxx.vue === 》 组件

### 本章任务： ###

*  使用@vue/cli快速搭建项目
    
     *  目前 学习的是vue2.x 脚手架工具 @vue/cli 4.x vue-cli@2
     *  后期学习vue3.x 脚手架工具 可以 是@vue/cli 4.x 也可以是新推出的 vite

![在这里插入图片描述][f28f420bdd5e4e89968eef925b1fbfe2.png_pic_center]

*  制作多彩照片墙效果  
    ![在这里插入图片描述][f827f0797fdf43a3988c2929e5bc67da.png_pic_center]

### 本章目标 ###

*  掌握项目环境配置方法
 *  能够灵活掌握单文件组件的使用方法
 *  掌握单文件组件中父子组件的通信

### 一、vue-cli简介 ###

#### 1.1 什么是vue-cli ####

官网文档：https://cli.vuejs.org/zh/guide/

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，简化了我们创建webpack-vue项目的过程。

提供：

*  通过 `@vue/cli` 实现的交互式的项目脚手架。
 *  通过 `@vue/cli` \+ `@vue/cli-service-global` 实现的零配置原型开发。
 *  一个运行时依赖 (
    
        @vue/cli-service
    
    )，该依赖：
    
     *  可升级；
     *  基于 webpack 构建，并带有合理的默认配置；
     *  可以通过项目内的配置文件进行配置；
     *  可以通过插件进行扩展。
 *  一个丰富的官方插件集合，集成了前端生态中最好的工具。
 *  一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

##### CLI #####

CLI (`@vue/cli`) 是一个全局安装的 npm 包，提供了终端里的 `vue` 命令。它可以通过 `vue create` 快速搭建一个新项目，或者直接通过 `vue serve` 构建新想法的原型。你也可以通过 `vue ui` 通过一套图形化界面管理你的所有项目。

#### 1.2 为什么要用vue-cli创建项目 ####

*  使用Vue.js开发大型应用时，有很多工作是繁琐而且重复的，业务逻辑复杂，对前端工程化又有要求，想要便捷高效开发项目
    
     *  代码的目录结构整理
     *  项目构建和部署
     *  热加载
     *  代码的单元测试等
 *  在Vue.js生态中我们可以使用vue-cli脚手架工具来快速构建项目

#### 1.3 基于vue-cli创建项目 ####

安装 node.js 、 npm 、 cnpm

##### [安装@vue/cli — 手册][vue_cli _] #####

1.  安装命令 ： `npm install -g @vue/cli`
2.  检查命令：`vue --version`

![在这里插入图片描述][d348f79261744c65b47a656f3c05a029.png_pic_center]

![在这里插入图片描述][59f156fe133e4033a2bdb711593fd1d9.png_pic_center]

1.  创建项目命令：`vue create 项目名`
    
    **注意项目名不能出现大写字母！！！** 如果项目名带有大写字母，会出现如下错误提示。

![在这里插入图片描述][edf6f913fb0c48e1abd23fdd50e43d8e.png_pic_center]

1.  选择预设项

![在这里插入图片描述][66788d9cac8d45178c20b8fb369cb280.png_pic_center]

按上下键调整：选择第三个 `Manually select features` 手动选择 自定义预设

1.  手动选择
    
    `Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) //选择将来项目中用到的依赖 空格：选择 a：全选 i：反选`

![在这里插入图片描述][5251b99fc85342eca2dedbf3c4f8ec98.png_pic_center]

选择完毕按下 `enter`键

1.  选择2.x 的vue版本

![在这里插入图片描述][2c39eb280f17429d908b4bf1baa77e35.png_pic_center]

1.  是否使用历史的路由版本 选择 n

![在这里插入图片描述][54e7964f3aad4808b1988f3ceacbecdf.png_pic_center]

1.  css预处理器选择less

![在这里插入图片描述][ab5d139be938460c935ff8616e366343.png_pic_center]

1.  选择配置信息所处的位置

![在这里插入图片描述][2fa4b2c4fe56410fa431829cd9f690f5.png_pic_center]

![在这里插入图片描述][b5d0f313fd114021af2d38304174cd81.png_pic_center]  
![在这里插入图片描述][bfa90117a41b4a0e9af3d3d0ca9c4a7c.png_pic_center]

项目创建过程中。。。。 我的心在等待。。。

![在这里插入图片描述][2439ba343eee4a089be193958d6b7330.png_pic_center]

显示这样的页面，表示项目创建成功；

**项目目录解析：**

![在这里插入图片描述][e74908124411412fa78a8dd9a55b627e.png_pic_center]

1.  按照上边提示分别输入命令 ，表示运行创建好的项目。

![在这里插入图片描述][842573c91a13479a8ef1532a48cbc5d4.png_pic_center]

浏览器输入路径：访问该项目。出现如下页面

![在这里插入图片描述][707c2e0e0f15412da3aa8c2ddb308a68.png_pic_center]

#### 1.4 练习：构建项目 ####

### 二、单文件组件 xxx.vue ###

#### 2.1 为什么要使用单文件组件 ####

在很多 Vue 项目中，我们使用 `Vue.component` 来定义全局组件，紧接着用 `new Vue({ el: '#container '})` 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

*  **全局定义 (Global definitions)** 强制要求每个 component 中的命名不得重复
 *  **字符串模板 (String templates)** 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 `\`
 *  **不支持 CSS (No CSS support)** 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
 *  **没有构建步骤 (No build step)** 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为解决上述问题提供了方法

#### 2.2 单文件组件的定义 ####

在components文件夹下 新建文件扩展名为 MyCom.vue的文件，文件包含以下内容：

//单文件组件的定义
    /*
        其中包含 css ,js , html模板内容
     */
    <template>
      <div>
          <h1>我是第一个组件中的数据</h1>
      </div>
    </template>
    
    //组件的js
    <script>
    export default {
        props: {
    
        },
        data () {
            return {
                
            }
        },
        methods: {
            
        },
        computed: {
            
        }
    }
    </script>
    //组件的css样式
    <style lang="less" scoped>
        h1{
            background-color: red;
            color: blue;
            font-size: 200px;
        }
    </style>

**注意：scoped属性表示 该样式只在当前组件中生效。**

修改main.js中内容：

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    //引入自定义的aaa.vue组件
    import aaa from './components/aaa'
    
    Vue.config.productionTip = false
    
    new Vue({
        
      router,
      store,
      render: h => h(aaa)//使用aaa.vue组件
    }).$mount('#app')

打开浏览器，运行观察效果：

![在这里插入图片描述][eee58500439f428286585d6dba99534a.png_pic_center]

单文件组件的特点

*  完整语法高亮
 *  模块化处理
    
     *  template中书写HTML结构
     *  script中书写组件的配置项
 *  组件作用域的 CSS 【scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域】

##### 2.2.1 分析vue项目默认启动后打开的页面是怎么打开的？（执行流程） #####

通过main.js把App.vue中的内容渲染到html页面上！

![在这里插入图片描述][10e629354771468dbcf85f22e6f61aad.png_pic_center]

##### 2.2.2 main.js中的render函数理解 #####

`render` 函数 ：此处为什么要使用render函数来进行页面的渲染，为什么不直接使用template模板引入呢？

\*\*因为：\*\*通过 `import Vue from 'vue'`引入的是精简版的vue.js 并不是完整版的vue.js 完整版的vue.js包含 核心代码和模板解析器，最终项目上线时，模板解析器其实是不需要的，所以vue会搞精简版的vue.js供用户使用。 如果直接使用template模板引入，这个精简版的vue.js是无法对模板进行解析的，但是可以通过提供的render函数进行解析。

**相当于：**

new Vue({
    	template:`<h1>你好哈哈哈</h1>`
    }) 等同于代码
    
    //render函数要有返回值
    new Vue({
    	render:function(createElement){ return createElement('h1','你好哈哈哈')}
    	就等同于代码
    	render:createElement=>createElement('h1','你好哈哈哈')
    	就等同于代码
    	render:h=>h(App) 直接渲染根组件
    })

$mount()方法的作用等同于 el:""绑定区域。

##### 2.2.3 cli脚手架构建项目的webpack的配置相关： #####

vue脚手架隐藏了所有的webpack相关配置，如果想查看具体的配置可以执行 `vue inspect > output.js` 这样会在目录下生成一个文件output.js 里边包含所有的配置信息。

如果想做自定义的配置请参考vue官网vue-cli官方文档：  
![在这里插入图片描述][36f58ece3dde4bb2ab125fd9ca191632.png_pic_center]

\*\*练习案例：\*\*自定义组件显示到首页。

##### 2.2.4 vue-cli项目中定义全局组件： #####

在main.js中通过Vue.component()方法注册全局组件。

![在这里插入图片描述][f03300efa28041b197eb91fbe18c4c68.png_pic_center]

`Vue.config.productionTip = false` 这行代码是在服务启动成功后 会在浏览器的控制台有一个 提示代码。

如果值为false 不显示 如下红框中代码 如果为true就显示如下代码。

![在这里插入图片描述][6b38463d85a04dccb7fb7942ea893d7c.png_pic_center]

#### 2.3 单文件组件中script 标签理解 ####

*  不使用.vue 单文件时，我们是通过 Vue 构造函数创建一个 Vue 根实例来启动vue 项目
 *  在.vue文件中，export default 后面的对象就相当于 new Vue() 构造函数中的接受的对象  
    需要注意data 的书写方式不同，在 .vue 组件中data 必须是一个函数，它return返回一个对象，这个返回的对象的数据，供组件实现

#### 2.4 单文件组件使用-案例 ####

页面中有一个input输入框，当进行输入的时候，输入框下面的内容会进行大写的同步显示  
当输入完成后，按enter键就会弹出输入的内容

![在这里插入图片描述][041d45a470034cdf80f6bd1ee8106985.png_pic_center]

#### 2.5 父组件传值子组件 ####

*  传值仍然通过props来实现
 *  实现步骤
    
     *  在父组件中导入子组件
     *  在父组件的components中注册
     *  在模板中进行调用
     *  通过v-bind指令把值传递到子组件中
     *  子组件通过props进行接收

![在这里插入图片描述][224bd081c1f4470a80361d61d928a6f1.png_pic_center]

#### 2.6 子组件传值父组件 ####

实现步骤

1.  子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
2.  将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.  在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

![在这里插入图片描述][4889b2d7fdd34616b31a4fb212516ced.png_pic_center]

#### 2.7 不相关组件之间的传递数据 ####

![在这里插入图片描述][d1920638f645402aa3786eae6365971e.png_pic_center]

*  **eventBus传递数据** 总线传值
    
    实现步骤：
    
    1.  创建父组件index.vue
    
        <template>
          <div id="max">
              <h1>这里是父组件</h1>
              
              <son1></son1>
              <son2></son2>
          </div>
        </template>
        
        <script>
        import son1 from '@/components/son1.vue'
        import son2 from '@/components/son2.vue'
        import Son1 from './son1.vue'
        import Son2 from './son2.vue'
        export default {
            components: {
                son1,
                son2
            }
        }
        </script>
        
        <style lang='less' scoped>
            #max{
                width: 800px;
                height: 400px;
                border: 2px solid red;
                text-align: center;
            }
        </style>
    
    1.  创建两个子组件son1.vue和son2.vue
        
            #son1.vue 文件
            <template>
              <div class="son1">
                <p>这里是子组件1</p>
                <button @click="sendMsg">把son1Data传递给son2组件</button>
              </div>
            </template>
            
            <script>
            import bus from '@/components/eventBus.js'
            export default {
                data () {
                    return {
                        son1Data:'son1组件的数据'
                    }
                },
                methods: {
                    sendMsg(){
                       bus.$emit('send', this.son1Data)
                    }
                }
            };
            </script>
            
            <style lang="less" scoped>
                .son1{
                    width: 300px;
                    height: 300px;
                    border:1px solid blue;
                    float: left;
                }
            </style>
        
            # son2.vue文件
            <template>
              <div class="son1">
                <p>这里是子组件2</p>
                接收到son1组件传递来的数据：{
                   {msg}}
              </div>
            </template>
            
            <script>
            import bus from '@/components/eventBus.js'
            export default {
              data () {
                return {
                  msg:''
                }
              },
              created () {
                //$on()方法 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
                bus.$on('send', val=>{
                  this.msg = val;
                })
              }
            };
            </script>
            
            <style lang="less" scoped>
                .son1{
                    width: 300px;
                    height: 300px;
                    border:1px solid green;
                    float: right;
                }
            </style>
    2.  项目中单独创建一个eventBus.js文件
        
            //导入vue实例的构造函数
            import Vue from 'vue';
            export default new Vue()
    3.  把main.js入口文件的主页面改成index.vue 运行页面观察效果  
        ![在这里插入图片描述][4a233e51c4434b9baf908474368d1c86.png_pic_center]
 *  **常规传值(子组件A把数据传递给父组件，父组件在把数据传递给子组件B)**
    
    参考父子组件 子父组件传值，一样。

#### 案例操作—多彩照片墙 ####

需求说明  
使用Vue脚手架Vue-cli快速搭建项目  
使用父组件向子组件传递图片的地址  
在子组件中接收图片地址，使用v-for指令遍历渲染显示图片  
![在这里插入图片描述][6dc2efa9c2b840b49d8132f6c42f6fb0.png_pic_center]

### 三、作业： ###

1.  封装移动端头部和tabber

![在这里插入图片描述][508370e7c3f2490e85cf7812039e40de.png_pic_center]

s  
//导入vue实例的构造函数  
import Vue from ‘vue’;  
export default new Vue()  
\`\`\`

1.  把main.js入口文件的主页面改成index.vue 运行页面观察效果
    
    \[外链图片转存中…(img-BCMm1QYe-1655182235125)\]

*  **常规传值(子组件A把数据传递给父组件，父组件在把数据传递给子组件B)**
    
    参考父子组件 子父组件传值，一样。

#### 案例操作—多彩照片墙 ####

需求说明  
使用Vue脚手架Vue-cli快速搭建项目  
使用父组件向子组件传递图片的地址  
在子组件中接收图片地址，使用v-for指令遍历渲染显示图片

### 三、作业： ###

1.  封装移动端头部和tabber
2.  多彩照片墙

[f28f420bdd5e4e89968eef925b1fbfe2.png_pic_center]: https://img-blog.csdnimg.cn/f28f420bdd5e4e89968eef925b1fbfe2.png#pic_center
[f827f0797fdf43a3988c2929e5bc67da.png_pic_center]: https://img-blog.csdnimg.cn/f827f0797fdf43a3988c2929e5bc67da.png#pic_center
[vue_cli _]: https://cli.vuejs.org/zh/
[d348f79261744c65b47a656f3c05a029.png_pic_center]: https://img-blog.csdnimg.cn/d348f79261744c65b47a656f3c05a029.png#pic_center
[59f156fe133e4033a2bdb711593fd1d9.png_pic_center]: https://img-blog.csdnimg.cn/59f156fe133e4033a2bdb711593fd1d9.png#pic_center
[edf6f913fb0c48e1abd23fdd50e43d8e.png_pic_center]: https://img-blog.csdnimg.cn/edf6f913fb0c48e1abd23fdd50e43d8e.png#pic_center
[66788d9cac8d45178c20b8fb369cb280.png_pic_center]: https://img-blog.csdnimg.cn/66788d9cac8d45178c20b8fb369cb280.png#pic_center
[5251b99fc85342eca2dedbf3c4f8ec98.png_pic_center]: https://img-blog.csdnimg.cn/5251b99fc85342eca2dedbf3c4f8ec98.png#pic_center
[2c39eb280f17429d908b4bf1baa77e35.png_pic_center]: https://img-blog.csdnimg.cn/2c39eb280f17429d908b4bf1baa77e35.png#pic_center
[54e7964f3aad4808b1988f3ceacbecdf.png_pic_center]: https://img-blog.csdnimg.cn/54e7964f3aad4808b1988f3ceacbecdf.png#pic_center
[ab5d139be938460c935ff8616e366343.png_pic_center]: https://img-blog.csdnimg.cn/ab5d139be938460c935ff8616e366343.png#pic_center
[2fa4b2c4fe56410fa431829cd9f690f5.png_pic_center]: https://img-blog.csdnimg.cn/2fa4b2c4fe56410fa431829cd9f690f5.png#pic_center
[b5d0f313fd114021af2d38304174cd81.png_pic_center]: https://img-blog.csdnimg.cn/b5d0f313fd114021af2d38304174cd81.png#pic_center
[bfa90117a41b4a0e9af3d3d0ca9c4a7c.png_pic_center]: https://img-blog.csdnimg.cn/bfa90117a41b4a0e9af3d3d0ca9c4a7c.png#pic_center
[2439ba343eee4a089be193958d6b7330.png_pic_center]: https://img-blog.csdnimg.cn/2439ba343eee4a089be193958d6b7330.png#pic_center
[e74908124411412fa78a8dd9a55b627e.png_pic_center]: https://img-blog.csdnimg.cn/e74908124411412fa78a8dd9a55b627e.png#pic_center
[842573c91a13479a8ef1532a48cbc5d4.png_pic_center]: https://img-blog.csdnimg.cn/842573c91a13479a8ef1532a48cbc5d4.png#pic_center
[707c2e0e0f15412da3aa8c2ddb308a68.png_pic_center]: https://img-blog.csdnimg.cn/707c2e0e0f15412da3aa8c2ddb308a68.png#pic_center
[eee58500439f428286585d6dba99534a.png_pic_center]: https://img-blog.csdnimg.cn/eee58500439f428286585d6dba99534a.png#pic_center
[10e629354771468dbcf85f22e6f61aad.png_pic_center]: https://img-blog.csdnimg.cn/10e629354771468dbcf85f22e6f61aad.png#pic_center
[36f58ece3dde4bb2ab125fd9ca191632.png_pic_center]: https://img-blog.csdnimg.cn/36f58ece3dde4bb2ab125fd9ca191632.png#pic_center
[f03300efa28041b197eb91fbe18c4c68.png_pic_center]: https://img-blog.csdnimg.cn/f03300efa28041b197eb91fbe18c4c68.png#pic_center
[6b38463d85a04dccb7fb7942ea893d7c.png_pic_center]: https://img-blog.csdnimg.cn/6b38463d85a04dccb7fb7942ea893d7c.png#pic_center
[041d45a470034cdf80f6bd1ee8106985.png_pic_center]: https://img-blog.csdnimg.cn/041d45a470034cdf80f6bd1ee8106985.png#pic_center
[224bd081c1f4470a80361d61d928a6f1.png_pic_center]: https://img-blog.csdnimg.cn/224bd081c1f4470a80361d61d928a6f1.png#pic_center
[4889b2d7fdd34616b31a4fb212516ced.png_pic_center]: https://img-blog.csdnimg.cn/4889b2d7fdd34616b31a4fb212516ced.png#pic_center
[d1920638f645402aa3786eae6365971e.png_pic_center]: https://img-blog.csdnimg.cn/d1920638f645402aa3786eae6365971e.png#pic_center
[4a233e51c4434b9baf908474368d1c86.png_pic_center]: https://img-blog.csdnimg.cn/4a233e51c4434b9baf908474368d1c86.png#pic_center
[6dc2efa9c2b840b49d8132f6c42f6fb0.png_pic_center]: https://img-blog.csdnimg.cn/6dc2efa9c2b840b49d8132f6c42f6fb0.png#pic_center
[508370e7c3f2490e85cf7812039e40de.png_pic_center]: https://img-blog.csdnimg.cn/508370e7c3f2490e85cf7812039e40de.png#pic_center