【Vue系列】Vue-cli（Vue脚手架）详细教程

1. 创建Vue脚手架

1.1 首先系统需要全局安装Vue脚手架

npm install -g @vue/cli

1.2 创建Vue脚手架工程

进入你想创建vue脚手架的目录，然后输入命令

vue create xxx项目名

需要注意的是工程名字不能大写，这里我们选择选择Vue2，敲下回车，那么vue将会为我们创建vue脚手架

 显示如图所示说明创建成功

如图命令所示 我们进入myvue工程，执行命令
npm run serve
然后浏览器访问http://localhost:8080/

 到这里 我们的vue脚手架工程就跑起来了，关闭为Ctrl+C

2. Vue脚手架的文件结构说明

├── 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：包版本控制文件
├── vue.config.js: 是一个可选的配置文件

3. 修改默认配置

Vue-cli官网配置参考:https://cli.vuejs.org/zh/config/#publicpath

在工程根目录下创建文件vue.config.js

 这里我们演示配置一下语法检查

3.1 配置前

会发现，默认语法检查是开启的，然后我们写了一个function没有被使用的话就会导致整个项目启动不了，所以在实际开发中，会带来很多障碍，所以我们将它关闭。

3.2 配置后

在vue.config.js中，加入以下代码

4. render函数

在入口文件main.js中，render函数

为什么用render，而不用template ``语法？

因为考虑到引用的是残缺版的vue，无法解析template配置项的vue

	关于不同版本的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内部做了什么:

举个例子：

render(createElement){
    return createElement('h1','你好啊')
}

//或者这种写法
render: q=>q('h1','你好啊')

 总结：

        render函数是vue中生成虚拟dom的底层api，可用于在组件封装中使用js编写动态模板，实现js的完全编程能力。

        vue中在一些复杂场景下使用template模板不太方便，例如需要引入大量子组件时，使用template模板会使代码重复冗余，这时用render函数就可以轻松解决问题。

5. 标签中的ref属性

5.1 ref属性的作用

ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：

   1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
      获取：this.$refs.xxx

作用就相当于给一个表情加了个id=“xxx” 然后通过document.getElementById(“xxx”)的效果一样。

5.2 示范

编写一个School.vue组件，然后在App.vue中引入

 我们访问网页 会发现，拿得到Dom元素，测试成功!

 

6. props配置 

6.1 功能

让组件接收外部传递过来的数据,从而达到组件复用的目的
(1).传递数据

<Demo name="xxx"/>

(2).接收数据

第一种方式(只接收):

props:['name']

         会发现以上会出现一个问题，如果我们需要传递18而显示19的话，那就需要做一下调整，因为默认传递过去的是一个字符串类型的数据，所以会造成字符串的拼接，所以我们得在传递的属性上面加 : 或者 v-bind ，他就会将表达式中的值正真的传递过去而不是以字符串的形式。

第二种方式(限制类型): 

props{
	name:String
}

 会发现传递字符串的话就会报错，一样通过：或者v-bind解决

 第三种方式(限制类型、限制必要性、指定默认值)

props:{
	name:{
    	   type:String, //类型
    	   required:true, //是否必传
    	   default:'老王'//默认值
    }
}

备注：props是只读的，不能修改,Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
如图所示:

总结：