Vue 第二天

第一天的时候学了简单的环境搭建和Vue项目的创建，今天先复习一下Vue项目的创建，多练习，才能理解的更透彻。

Vue项目搭建：

• 在硬盘上找到一个合适的文件夹放工程，比如：E:\vueDemo，和昨天搭建的第一个Vue项目放在了同一级目录下，执行命令：

  • vue init webpack secondvue
    

• 初始化一些设置后，此处省略…

• 安装项目依赖：

  • npm install
    

• 启动项目：

  • npm run dev
    

• 访问 http://localhost:8080 ，看到下图所示：

• 到这里，一个简单的Vue项目就搭建好了

执行的 vue init webpack secondvue 命令中，webpack 会将 secondvue 这个项目在开发和完成阶段帮我们自动打包代码，比如将 js 统一合成一个文件，将 css 文件统一合并压缩等。也就是说 webpack 在编译时会将 .vue 文件中的 html、js、css 都抽出来合成新的单独的文件。

• 开发完成后，执行：

  • npm run build
    

    会编译我们的源代码生成最终的发布代码，在dist目录下。

组件库：

组件库是把一个按钮、导航、列表之类的元素封装起来，方便日常使用，调用方法只需直接写上 <qui-button></qui-button> 或者 <qui-nav></qui-nav> 这样的代码就可以了。

今天就练习一个组件库的首页，包括三个子页面，按钮页面、列表页面、导航页面，点击进去会由路由来配置。

入口页App.vue

<template>
  <div id="app">
    <h1 class="page-title"><a href="#/">开发组件库</a></h1>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
  @import "./assets/css/App.css";
</style>

入口页代码中，h1标签是一个公用元素，也就是说每个子页面都会带着这个h1，它的作用就是方便我们快速回到首页，子页面的内容会注入到 router-view 中。style标签中，可以直接写样式，也可以直接引入一个样式文件，scoped关键字标识这个样式是私有的 ，也就是说， 即使两个组件写着一样的 #app{} 样式也不会冲突，程序会加上命名空间，这也就是为什么在script标签中有个name参数。

首页index.vue

<template>
  <div class="mod-module mod-parallel">
    <div class="img-list type-full">
      <div class="img-box">
        <p class="img-item">
          <a class="page-link" href="#/btn">按钮</a>
        </p>
      </div>
      <div class="img-box">
        <p class="img-item">
          <a class="page-link" href="#/list">列表</a>
        </p>
      </div>
      <div class="img-box">
        <p class="img-item">
          <a class="page-link" href="#/nav">导航</a>
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
  @import "./css/index.css";
</style>

首页代码写了几个跳转链接调到对应的子页面，程序运行的时候，会将 template 标签里面的内容都注入到 App.vue 页面中的 router-view 标签中，从而实现无刷新的路由跳转。

接下来先不急写其他子页面，因为子页面只是引用对应的组件，所以先写组件。

按钮组件quiButton.vue：

<template>
  <button class="qui-btn">
    <span> {{msg}} </span>
  </button>
</template>

<script>
export default {
  data: function () {
    return {
      msg: '下载'
    }
  }
}
</script>

<style scoped>
  @import "./css/reset.import.css";
  @import "./css/qui-btn.import.css";
</style>

按钮组件就是一个正常的button标签，script标签中暴露这个组件的data属性（data是Vue的属性值）。当按钮组件被初始化的时候，msg自定义属性会被绑定到 <span>标签中的 {{msg}}

中，两个花括号用来绑定属性。如果不是组件的话，正常data写法可以直接写成一个对象，比如： data:{ msg : '下载'} ，但由于组件是会在多个地方引用的，JS中直接共享对象会造成引用传递，也就是修改了msg后所有按钮的msg都会跟着修改，所以这里用function来每次返回一个对象实例。

使用按钮组件pageQuiButton.vue：

写完按钮组件后，写一个调用它的pageQuiButton子页面。

<template>
  <div id="pageQuiButton">
    <!--使用-->
    <qui-btn msg="确认" class="small"></qui-btn>
  </div>
</template>
<script>
import quiBtn from '../components/quiButton' /* 引用 */

export default {
  name: 'pageQuiButton',
  components: {
    'qui-btn': quiBtn /* 注册自定义标签 */
  }
}
</script>

先看script标签，首先引入按钮组件赋值给quiBtn，使用的时候直接将quiBtn作为对象的一部分写进components属性，这是Vue用来存储引用组件的关键字，同时对应我们自定义的标签 qui-btn ，完成这些操作之后，就可以在template中使用自定义的按钮组件 <qui-btn> 上面也说了用msg属性来自定义按钮的文案。

路由配置：

接下来把路由配置好，就可以看到页面中具体效果了

在 src/router/index.js 配置：

import Vue from 'vue'
import Router from 'vue-router'
// 引用页面模板 =》 供路由使用
import index from '../pages/index'
import pageQuiButton from '../pages/pageQuiButton'
import HelloWorld from '@/components/HelloWorld'
import page from '@/pages/page'
import page1 from '@/pages/page1'
import page2 from '@/pages/page2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/btn',
      name: 'btn',
      component: pageQuiButton
    },
    {
      path: '/page',
      name: 'page',
      component: page,
      children: [
        {
          path: '/',
          component: page1
        },
        {
          path: '/page2',
          component: page2
        }
      ]
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

页面效果：

点击 确认 按钮后：

一口不能吃个胖子，今天先学习这些，还要在巩固巩固学的东西

总结：

1. 页面路由的配置
2. 按钮组件自定义属性props
3. 按钮组件点击事件