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

一、vue.js单文件组件

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

Vue.component('button-counter',{
    data:function(){
        return{
            counter:0
        }   
    },
    template: `
 
{{counter}}
`
})

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

• 全局定义 (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样式制作用于当前的组件模块

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

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

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

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

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

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} 局部注册子组件，只能在当前的父组件中去使用这个子组件，这是简写形式，即为可以使用的标签名