了解什么叫组件
把某个界面或者说某个小功能，封装起来就叫组件（就是对html css js的一个综合封装），组件也是Vue的实例，所以它也有自己的data和methods以及生命周期钩子等
组件开发特点：可复用，同时会简化代码结构，易于维护，同时利于多人协同开发等。
安装单文件组件所需要依赖
安装vue-cli 脚手架
- 在cmd命令窗口输入（在任意的路径都可以）
npm install -g @vue/cli
- 安装成功检测在cmd命令窗口输入：
vue -V // 如果安装成功会返回：@vue/cli 4.0.5类似这样的版本信息
安装出错解决方案(如果 vue -V无法显示版本信息，说明安装失败)
解决方案
更换网络环境：有线，换无线，无线换4G
更换安装的工具
cnpm安装 ：
- 先安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
- cnpm安装vue-cli：
cnpm install -g @vue/cli
yarn安装 :
- 先安装yarn
npm install -g yarn
- yarn安装vue-cli
yarn global add @vue/cli
- 清除npm缓存之后，重新安装
npm cache clean -f //清除npm缓存
重新执行安装的命令
-
在用脚手架搭建vue项目时，提示：无法加载文件 C:\Users\电脑用户名\AppData\Roaming\npm\vue.ps1,因为在此系统禁止运行脚本
这是你笔记本禁止运行脚本，解决办法
命令： set-ExecutionPolicy RemoteSigned
开启步骤
安装单文件组件依赖包（安装完成vue-cli后进行这一步）
- 正常安装
npm install @vue/cli-service-global -g
- cnpm安装的用：
cnpm install @vue/cli-service-global -g
- yarn安装的用：
yarn global add @vue/cli-service-global
注意：如果 前面用yarn的人就一直用yarn,不要用yarn装完vue-cli,又用npm装其它插件，这样有可能 会出问题，尽量都是同步一个安装，就是以前用npm,后面就一直用npm,以前用yarn 后面就一直用yarn
组件结构讲解
把每个组件都放到一个独立的.vue文件里，
文件的后缀是：
.vue文件此文件三大部分：
template模板 、script脚本 、style样式
template
- 写html结构的
- 注意这里的html部分必须用一个标签全包住
script
- 写逻辑的，data、methods、生命周期钩子、计算属性等等代码都写在这个部分
- 注意这里的data不再是一个对象，在组件里，data将会是一个函数,return一个对象。
style
写样式的
-
如何 导入外部css,
- 在css中的导入(主体使用)：
@import url(./babel.css);
- 快捷键快速生成：
<vue>
单文件组件的运行
在cmd窗口该vue文件根目录下输入vue serve index.vue 这里index.vue是需要运行的单文件组件的路径
vue serve index.vue
注意点
- template里面的html部分必须用一个标签全包住
- 组件里没有el，组件是无需挂载到哪的，里面已经有template是它的使用的html了
- data在组件里面是一个function,return 一个对象
<template>
<!-- 组件html区域
在组件里面的html都必须有一个独立的标签包住所有标签
-->
<div>
<button>按钮</button>
<button>{{msg}}</button>
</div>
</template>
<script>
export default {
// 不再需要el去确定使用范围
// 组件 里面的data将是一个函数 return一个对象
//data:function(){return {}}
data() {
return {
msg: "hello"
};
},
methods: {
alertEvent(value) {
alert(value);
}
},
created() {
//这里面语法检测比较严格，直接写console会报错
window.console.log(this);
// this.alertEvent(123);
}
};
</script>
<style>
/* 如果需要引入 外部css
在css中的导入：
@import url(./babel.css);
在js中的导入
import "./babel.css"
*/
/* @import url(./babel.css); */
@import "./babel.css";
button {
width: 100px;
}
</style>
