vue.js单文件组件开发，vue-cli脚手架创建项目

一、vue.js单文件组件

在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件。

Vue.component('button-counter',{
    data:function(){
        return{
            counter:0
        }   
    },
    template: `<div> <h1>{{counter}}</h1></div>`
})

这种方式在很多中小规模的项目中运作的很好，但当在更复杂的项目中，下面这些缺点将变得非常明显：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step)

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

二、运行单文件组件

1.安装

（1）版本

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

（2）环境要求

安装node.js

Node.js 是一个开源与跨平台的 JavaScript 运行时环境，内核基于 Chrome V8 引擎.

安装npm

npm 是 "node package manager" 是一个基于node.js的包管理器，是node.js社区最流行，支持第三方包最多的包管理器

安装vue-cli

Vue CLI 是一个基于 Vue.js 进行快速开发的标准工具。

可以使用下列任一命令安装这个新的包： -g表示全局安装

npm install -g @vue/cli
# OR
yarn global add @vue/cli

（3）创建一个项目：

vue ui是通过可视化窗口创建项目

  vue create my-project
  # OR
  vue ui

my-project项目

当创建好以后，会有一个my-project文件，文件列表为：

node-modules 放置一些默认自带的包文件
public文件放置html文件，也可以放一些css文件
src文件放整个项目的源代码，包括.js文件、.vue文件和一些静态资源
assets 放置静态资源，例如图片
components 放置.vue文件，也是一些子组件
App.vue为根组件，可以看做是父组件
main.js 是整个项目执行的入口
其他的都是一些配置文件

（4）运行该项目

该需要执行的项目文件夹目录下面，执行以下代码

//运行项目
npm run serve

2.单文件组件的暴露与导入

（1）一个组件的语法格式

style标签中的scoped表示这段style样式制作用于当前的组件模块

<template>
    //组件的内容
</template>

<script scoped>
    //组件要执行的javascript代码
</script>

<style>
    //组件内容的css样式
</style>

（2）子组件的暴露 BookList.vue

export default {}es6新语法，将组件暴露出去

<template>
  <div>
    <h3>图书管理系统</h3>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>作者</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="booklist in bookLists" :key="booklist.id">
          <td>{{booklist.id}}</td>
          <td>{{booklist.name}}</td>
          <td>{{booklist.author}}</td>
          <td>
            <input type="number" v-model.number="booklist.price" />
          </td>
          <td>
            <input type="number" v-model.number="booklist.quantity" />
          </td>
          <td>
            <button v-on:click="deleteBook(index)">删除</button>
          </td>
        </tr>
        <tr>
          <td>总价格：￥{{}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
//将组件暴露出去
export default {
  //里面的内容相当于创建一个组件的内容块
  data: function() {
    return {
      bookLists: [
        { id: 1, name: "红楼梦", author: "施耐庵", price: 35, quantity: 20 }
      ]
    };
  }
};
</script>

<!-- scoped表示这段style样式制作用于当前的组件模块 -->
<style lang="stylus" scoped>
    
</style>

（3）父组件接收组件，注册组件

全局注册在程序入口 main.js

import BookList from './components/BookList.vue' 导入自定义组件BookList.vue
Vue.component('book-list',BookList); 全局注册子组件，即在任何一个子组件中都可以使用该组件，<book-list>即为可以使用的标签名

import Vue from 'vue' //ES6 规范导入模块方式
import App from './App.vue' //导入自定义APP.vue
import BookList from './components/BookList.vue'  //导入自定义BookList.vue

// 阻止启动生产消息,常用作指令 没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息 开发环境下,Vue 会提供很多警告
Vue.config.productionTip = false

//全局注册一个子组件,('标签名',子组件对象);  import BookList from './components/BookList.vue'
Vue.component('book-list',BookList);

//创建一个vue示例
new Vue({
  //render渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode
  render: h => h(App),
  //如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例
}).$mount('#app') //.$mount('#app'), 挂载app这个父组件，同el: "#app"，同样的意思

局部注册在主组件App.vue

1.import InputGroup from './components/InputGroup.vue'导入自定义组件InputGroup.vue
2.components: {InputGroup} 局部注册子组件，只能在当前的父组件中去使用这个子组件，这是简写形式，<InputGroup>即为可以使用的标签名

<template>
  <div id="root">
    <!-- 在main.js中定义了全局组件后，在这里就可以使用这个子组件了 -->
    <book-list></book-list>
    <!-- 使用局部定义的子组件 -->
    <InputGroup></InputGroup>
  </div>
</template>

<script>
// 局部引用接收InputGroup.vue
import InputGroup from './components/InputGroup.vue'

export default {
  name: 'root',
  //局部注册，创建一格子组件，给子组件一个标签名字，在这里可以以json数据的形式添加很多组件
  components: {
    /**
     * 'input-group': InputGroup,     ->   InputGroup: InputGroup,    ->    InputGroup
     * 三种写法表达意思一样
     */
    InputGroup
  }
}
</script>

<style>
#root {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  width: 1200px;
  margin: 0 auto;
}
</style>