Vue —— 进阶脚手架（零）（初始化【附案例】）

Vue全家桶 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶（零）	初始化脚手架
Vue2.x - 进阶（一）	refs属性、props配置项
Vue2.x - 进阶（二）	混入 mixin、插件 plugins、样式 scoped
Vue2.x - 进阶（三）	本地存储
Vue2.x - 进阶（四）	组件的自定义事件
Vue2.x - 进阶（五）	全局事件总线、消息订阅与发布
Vue2.x - 进阶（六）	过渡与动画
Vue2.x - 进阶（七）	解决开发环境 Ajax 跨域问题
Vue2.x - 进阶（八）	默认插槽、具名插槽和作用域插槽
Vue2.x - 周边（Vuex、Vue-router）	Vuex、Vue-router
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

初始化脚手架

1. 全局安装：

	npm install -g @vue/cli

2. 创建项目（注意创建项目的时候指定好目录）

	vue create xxx

3. 启动项目

	npm run serve

一、简单案例

1. 模块暴露方式：默认暴露。

默认暴露：export default {}

2. 模块化引入方式：简便形式（针对默认暴露）

import Demo from "./js/Demo.js"

3. 实例：学校、学生、App 组件

school.vue：学校组件。

	<template>
	  <div>
	    <h3>学校名称：{{ name }}</h3>
	    <h3>学校地址：{{ address }}</h3>
	    <button @click="add">点我提示学校名</button>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "schoolName",
	  data() {
	    return {
	      name: "清华大学",
	      address: "北京",
	    };
	  },
	  methods: {
	    add() {
	      alert(this.name);
	    },
	  },
	};
	</script>

student.vue：学生组件。

	<template>
	  <div>
	    <h3>学生姓名：{{ name }}</h3>
	    <h3>学生年龄：{{ age }}</h3>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "studentName",
	  data() {
	    return {
	      name: "张三",
	      age: 20,
	    };
	  },
	};
	</script>

App.vue：App 组件。

	<template>
	  <div>
	    <School />
	    <Student />
	  </div>
	</template>
	
	<script>
	import School from "./components/School.vue";
	import Student from "./components/Student.vue";
	
	export default {
	  components: {
	    School,
	    Student,
	  },
	};
	</script>

不积跬步无以至千里 不积小流无以成江海