vue——单文件组件

需要 安装Vue CLi 执行 npm install -g @vue/cli 命令

切换到要创建项目的目录执行 vue create XXX 命令创建脚手架

编写代码

1、创建.vue文件编写自定义组件

<template><div class="school"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div>
</template><script>export default {name: 'SchoolTest',data(){return {name: 'XXX学校',address: 'XXX市'}}}
</script>
<style>.school{background-color: #9B859D;}
</style>

2、创建 根组件 例如 App.vue

<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM" ref="btn">点击我输出上方的DOM元素</button><SchoolTest></SchoolTest></div>
</template><script>// 引入School子组件import SchoolTest from './components/School.vue'export default {name: 'AppTest',components: {SchoolTest},data(){return{msg: '欢迎学习Vue',}},methods: {showDOM(){console.log(this.$refs)}}}
</script>

vue生成组件文档。3、创建 main.js 文件 作为项目入口

// 引入Vue
import Vue from 'vue'
// 引入App根组件
import App from "./App.vue"
// 关闭Vue的生产提示
Vue.config.productionTip = false,
// 创建vm
new Vue({el: '#app',	//容器	自动找到public目录下的index.html文件render: h => h(App)// 相当于// render: function (createElement) {// return createElement(//   'h' + this.level,   // tag name 标签名称//   this.$slots.default // 子组件中的阵列// )}
})

进入创建的脚手架目录 执行 npm run serve 命令启动项目

当执行完 npm run serve 命令后直接运行main.js