一、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>
