第8章-项目环境配置及单文件组件

1、学习目标

• 掌握项目环境配置的方法
• 可以灵活掌握单文件组件的使用方法

2、项目环境配置步骤

一、安装node.js

node做用：搭建后台环境框架

下载地址：https://nodejs.org/en/download

node安装成功后： node -v 查看node.js安装的版本。

二、安装插件

• 安装vue-cli：npm install -g vue-cli (Vue-cli是Vue的脚手架工具，-g表示在全局下安装vue-cli)
• 安装webpack： npm install webpack -g  (包管理工具，主要是打包和解包用的)
• 建立项目：vue init webpack my-vue(my-vue是项目名称，是随意取的)

三、建立项目

建立项目过程当中，除了vue-router是yes以外，其余的所有是no。

四、环境配置

• 切换到所建立的项目目录下： cd my-vue
• 安装启动模块：npm install
• 启动项目：npm run dev

五、最后在浏览器上输入：http://localhost:8080。测试vue项目是否启动成功。

3、项目目录结构分析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。咱们初学可使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是咱们要开发的目录，基本上要作的事情都在这个目录里。里面包含了几个目录及文件： assets: 放置一些图片，如logo等。 components: 目录里面放了一个组件文件，能够不用。 App.vue: 项目入口文件，咱们也能够直接将组件写这里，而不使用 components 目录。 main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你能够添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

【扩展】：cnpm安装：npm install -g cnpm -registry=https://registry.npm.taobao.org

4、单文件组件

4.一、单文件组件定义

说明：my-vue项目下 ->src -> components 下的 -> HellWorld.vue中去定义

//定义模板
<template>
    <div>
        html结构
    </div>
</template>

//定义组件
<script>
   export default {
　　　　name: 'HellWorld', //name默认的HellWorld.vue组件文件的名称
       组件配置项(data、methods等)
   }
</script>

//定义样式
<style>
#p .class{样式}
</style>

 实战如图：

4.二、导入子组件

说明：以前咱们说 父组件中 有 子组件，经过父子关系，而后子组件的模板要在 父组件的模板的中才能使用，那咱们再一个项目中，如何才能实现父子组件的关系呢。由于在项目中，每个组件都是单独的，都是一个 xxx.vue的文件。因此咱们今天就来学习一下。

一、建立子组件 item.vue

<template>
  <div>
    <img src="../assets/logo.png"/>
    <span>首页</span>
  </div>
</template>

<script>
    export default {
        name: "item" 
    }
</script>

<style>
</style>

2.父组件(hello.vue)中导入子组件(item.vue)

说明：子组件的别名是本身随便起的，这个不用刻意的去理解。import 子组件别名 from 组件路径

<!--suppress ALL -->
<template>
    <!--调用子组件-->
    <Item></Item>
</template>

<script>
    import Item from './item' //引入组件 import 子组件别名 from 组件路径
    export default {
      name: "hello",
      components: {Item} //设置子组件
    }
</script>

<style scoped>

这边注意了，这边导入子组件能够导入多个。

<script>
    import Item from './item' //引入组件 import 子组件别名 from 组件路径
    import  Hello from './HelloWorld'
    ....

    export default {
      name: "hello",
      components: {Item,Hello，....} //设置子组件
    }
</script>

具体如图：

其余的使用方式，在父子组件使用是如出一辙的，只不过局部语法，好比，使用正向传值(父组件的值传递给子组件)，逆向传值(子组件的值传递给父组件)，具名槽口(slot)，和匿名槽口等等。

4.三、计算属性

咱们再定义须要经过简单的逻辑判断后，才能最终肯定值得变量，不须要在data中直接定义而后计算。两种方式均可以。

语法以下：

<template>
  <div class="itemWarp" @click="fn">
     <!--根据下面的computed的计算属性，获取bol的值-->
    <span v-show="bol"></span>
  </div>
</template>

<script>
    export default {
      name: "item",
      //在computed关键字定义计算属性
      computed: {
        bol: function () {  //经过function函数中的计算 获取返回 bol的值
          //逻辑判断语句
          //返回true或者false 传递给bol这个变量
          if (this.mark == this.sel){
            return false;
          }
          return true;
        }
      }
</script>

4.四、具体使用

说明：使用正向传值(父组件的值传递给子组件)，逆向传值(子组件的值传递给父组件)，具名槽口(slot)，和匿名槽口等知识。

 父级HelloWorld.vue文件

<!--suppress ALL -->
<template>
  <div class="tabbarWarp">
    <!--sel:正向传值,change=getVal是逆向传值，getVal后面不能加括号-->
    <Item txt="首页" mark="1" :sel="selected" @change="getVal">
      <img src="../assets/logo.png" slot="nomalImg"/>
    </Item>
  </div>
</template>
<!--定义组件-->
<script>
  import Item from  "./item"

  export default {
    name: "HelloWorld",
    components: {Item},
    data: function () {
      return {
        selected: 1
      }
    },
    methods: {
      //节后子组件传递过来的值
      getVal: function (val) {
        this.selected = val;

      }
    }
  }
</script>
<!--定义样式-->
<style>
  .tabbarWarp{width: 100%;height: 64px;position: fixed;left: 0;}
</style>

HelloWorld.vue(父级组件)

子级组件item.vue文件

<template>
  <div class="itemWarp" @click="fn">
    <!--slot槽口是不能使用指令的，须要在槽口外层再包一层增长指令-->
    <span v-show="bol"><slot name="nomalImg"></slot></span>
    <span v-show="!bol"><slot name="activeImg"></slot></span>
    <span>{{ txt }}</span>
  </div>
</template>

<script>
    export default {
      name: "item",
      props: ['txt', 'mark','sel'], //mark外部传入的一个值,sel接收正向传值
      //计算属性，定义须要经过简单的逻辑判断后，才能最终肯定值得变量
      computed: {
        bol: function () {
          //逻辑判断语句
          //返回true或者false
          if (this.mark == this.sel){
            return false;
          }
          return true;
        }
      },
      methods: {
        fn: function () {
            console.log(this.mark);
            console.log(this.sel);
            //逆向传值，将当前点击的item的mark值传递给父级，赋值给selected
            this.$emit('change',this.mark);
        }
      }
    }
//给每一个item添加一个mark，做为惟一标识
//声明一个变量selected来作记录被选中item的mark
//1 2 3 4 5 selected:3
</script>

<style>
</style>

item.vue(子级组件)

5、总结

1. 组件都是写在components下，都是以vue结尾。
2. 它的使用语法跟咱们以前学习的是同样的用法，只是局部上的差异
3. 单文件组件在.vue文件中同时设置组件的HTML结构，JS代码和CSS样式