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

一、学习目标

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

二、项目环境配置步骤

1、安装node.js

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

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

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

2、安装插件

• 安装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是项目名称，是随意取的)

3、创建项目

创建项目过程中，除了vue-router是yes之外，其他的全部是no。

4、环境配置

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

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

三、项目目录结构分析

目录/文件	说明
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.1、单文件组件定义

说明：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.2、导入子组件

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

1、创建子组件 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.3、计算属性

我们再定义需要通过简单的逻辑判断后，才能最终确定值得变量，不需要在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.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(子级组件)

五、总结

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

转载于:https://www.cnblogs.com/zhangqigao/p/9604100.html