[JavaScript知识库]vuecli脚手架学习（一）

一、脚手架安装和文件结构

1.VueCLI的安装和文件目录

安装脚手架之前，首先安装node.js。
脚手架安装指令：

npm install -g @vue/cli

脚手架文件结构：

├── node_modules 
	├── public
	│   ├── favicon.ico: 页签图标
	│   └── index.html: 主页面
	├── src
	│   ├── assets: 存放静态资源
	│   │   └── logo.png
	│   │── component: 存放组件
	│   │   └── HelloWorld.vue
	│   │── App.vue: 汇总所有组件
	│   │── main.js: 入口文件
	├── .gitignore: git版本管制忽略的配置
	├── babel.config.js: babel的配置文件
	├── package.json: 应用包配置文件 
	├── README.md: 应用描述文件
	├── package-lock.json：包版本控制文件

2.关于不同版本的vue

（1） vue.js与vue.runtime.xxx.js的区别：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
（2）因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。

//render函数
render：(createElement)=>{
    return createElement；
}

3.vue.config.js配置文件

（1）使用指令：vue inspect > output.js 可以查看到Vue脚手架的默认配置；
（2）使用vue.config.js可以对脚手架进行个性化定制，详情见：vue中文官网。

二、ref属性

功能： 被用来给元素或子组件注册引用信息（id的替代者）。
作用范围： 应用在html的标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象VC（vue component）。
使用方式：

//打标识
//用在html标签获取DOM元素的方式：
<h1 ref="xxx">....</h1>
//应用在组件标签上获取组件实例对象
<school ref="" />

//获取
console.log(this.$refs.xxx)

三、props配置

功能： 让组件接收外部传过来的数据。
例：传递数据：

<demo name="张三" sex="male" :age="18">

注：年龄处传递String类型，需要使用v-bind来处理Number类型。
接收数据：

//方式一：
props:["name","sex","age"]
//方式二：
props:{
  name:"张三",
  sex:"male",
  age:18
}
//方式三：
props:{
  name:{
    type:String //类型
    required:true //必要性
    default:"李四" //默认值
  }
}

四、mixin混入

功能： 可以把多个组件共用的配置提取成一个混入对象。
使用方式：

//第一步定义混入：
{
  data(){......}
  methods(){......}
  ......
}
//第二步使用混入：
//全局混入：
Vue.mixin(xxx);
//局部混入：
mixins:['xxx'];

五、插件

功能： 用于增强vue。
本质： 包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

obj.install = function(Vue,options){
  //1.添加全局过滤器
  Vue.filter(....)
  //2.添加全局指令
  Vue.directive(....)
  //3.配置全局混入
  Vue.mixin(....)
  //4.添加实例方法
  Vue.prototype.$myMethod = function(){...}
  Vue.prototype.$myProperty = xxxx
}
//使用插件
Vue.use(filter,directive,mixin)

六、scoped样式

功能： 给CSS等标签添加样式，让样式在局部生效。
写法：

//例:style标签
<style scoped></style>