初始化脚手架

说明

1Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
2最新的版本是 4.x
3文 Vue CLI

具体步骤

1如果下载缓慢请配置npm淘宝镜像

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

2全局安装 @vue/cli

npm install -g @vue/cli

3切换到创建项目的目录，使用命令创建项目vue create xxx
4选择使用vue的版本
5启动项目npm run serve
6打包项目npm run build
7暂停项目 Ctrl+C
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行 vue inspect > output.js

脚手架文件结构

.文件目录
├── 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: 包版本控制文件

src/components/School.vue

<template>
    <div class="demo">
					<h3>学校名称：{{schoolName}}</h3>
					<h3>学校地址：{{address}}</h3>
					<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>

src/components/Student.vue

<template>
    <div class="demo">
					<h3>学生名称：{{name}}</h3>
					<h3>学生年龄：{{age}}</h3>
  			</div>
</template>

<script>
   export default {
		name:'Student',
		data() {
			return {
				name: 'sx',
				age: 18
			}
		}
	}
</script>

<style>
	.demo{
		background-color:orange;
	}
</style>

src/App.vue

<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

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

src/main.js

// 引入完整版的vue
//import Vue from 'vue/dist/vue'
//
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
new Vue({
	el:'#app',
	// 箭头函数,传入组件,创建App组件中的标签元素。
	render:h=>h(App),
})

//完整版的vue渲染方式 
// new vue({
// 	el:'#root',
// 	template:'<App></App>',
// 	components:{
// 		app
// 	}
// })

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个图书配置,含义让ie浏览器已最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--BASE_URL 配置页签图表。  -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页页面标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 浏览器不支持js,noscrit中的文字渲染出来。 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

render 函数

关于不同版本的函数

vue.js与vue.runtime.xxx.js的区别

a.vue.js 是完整版的Vue，包含：核心功能+模板解析器
b.vue.runtime.xxx.js 是运行版的Vue，只包含核心功能，没有模板解析器
esm 就是 ES6 module

因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

vue.config.js 配置文件

vue inspect > output.js可以查看到Vue脚手架的默认配置
使用vue.config.js可以对脚手架进行个性化定制，和package.json同级目录，详见配置参考 | Vue CLI

Vue CLI 初始化脚手架