初始化脚手架
- 全局安装：
npm install -g @vue/cli
- 创建项目（注意创建项目的时候指定好目录）
vue create xxx
- 启动项目
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>
不积跬步无以至千里 不积小流无以成江海
