初始化脚手架

脚手架简介（CLI）

1、脚手架官方名称：CLI（command line interface）

2、Vue脚手架是Vue官方提供的标准化开发工具（开发平台）

CLI的安装与配置

CLI初始化具体步骤：

1、第一步（仅第一次执行）：全局安装@vue/li

npm install -g @vue/cli

2、第二步：切换到你想要创建项目的目录，然后使用命令创建项目

vue create xxx

（注意选择Vue2还是Vue3版本）

3、第三步：启动项目（要先切换到项目中，创建完有提示）

npm run serve

备注：

1、安装淘宝镜像可以解决下载缓慢的问题：(在CLI初始化具体步骤第一步之前操作)

npm config set registry https://registry.npm.taobao.org

2、Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：

vue inspect > output.js

3、关闭项目：

按Ctrl + C，一下不行就多下

4、打包项目：（将vue文件转化为能直接放在服务器上运行的html、css、js文件）

npm run build

CLI结构

案例演示：

展示src中的文件：

（1）main.js

/*
	该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//管比vue产生的提示
Vue.config.productionTip = false

//创建vue实例对象 -- vm
new Vue({
	el:'#app',
	//下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),
})

(2) App.vue

<template>
	<!-- 组件的结构 -->
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	import School from './components/School'
	import Student from './components/Student'
	
	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>

（3）components文件包含School.vue和Student.vue

School.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学校名称：{{schoolName}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>
	</div>
</template>

<script>
	//组件交互相关的代码（数据、方法等等）
	export default {
		name:'School',
		data(){
			return {
				schoolName:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods:{
			showName(){
				alert(this.schoolName)
			}
		},
	}
	
</script>

<style>
	/* 组件的样式 */
	.demo{
		background-color: orange;
	}
</style>

(4)Student.vue

<template>
	<!-- 组件的结构 -->
	<div class="demo">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	//组件交互相关的代码（数据、方法等等）
	export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>

render函数

1、作用：将App组件放入容器，相当于如下代码的作用

template:'<App></App>',
cmponents:{App},

2、render是Vue提供的进行调用的，不使用template解析模板。

假如，我们引入的是不完整的vue.js,比如vue.runtime.js；vue.runtime.js不能解析模板，那么可以使用render，因为render不需要解析模板。

3、render函数的参数：

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

简写为：

render: h => h(App),

关于不同版本的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函数取指定具体的内容。

Vue的默认配置：

1、配置文件存放在vue.config.js中；

2、使用vue inspect > output.js可以查看到VUe脚手架的默认配置；

3、使用vue.config.js可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh/config/

4、关闭语法检查：在vue.config.js中进行如下修改：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false //关闭语法检查
})

Vue2--Vue脚手架初识与配置