Vue的实例、生命周期与Vue脚手架（vue-cli）实例详(12)

|-- build       // 项目构建(webpack)相关代码
| |-- build.js      // 生产环境构建代码
| |-- check-version.js    // 检查node、npm等版本
| |-- dev-client.js    // 热重载相关
| |-- dev-server.js    // 构建本地服务器
| |-- utils.js      // 构建工具相关
| |-- webpack.base.conf.js   // webpack基础配置
| |-- webpack.dev.conf.js   // webpack开发环境配置
| |-- webpack.prod.conf.js   // webpack生产环境配置
|-- config       // 项目开发环境配置
| |-- dev.env.js     // 开发环境变量
| |-- index.js      // 项目一些配置变量
| |-- prod.env.js     // 生产环境变量
| |-- test.env.js     // 测试环境变量
|-- src        // 源码目录
| |-- components      // vue公共组件
| |-- store       // vuex的状态管理
| |-- App.vue      // 页面入口文件
| |-- main.js      // 程序入口文件，加载各种公共组件
|-- static       // 静态文件，比如一些图片，json数据等
| |-- data       // 群聊分析得到的数据用于数据可视化
|-- .babelrc       // ES6语法编译配置
|-- .editorconfig     // 定义代码格式
|-- .gitignore      // git上传需要忽略的文件格式
|-- README.md      // 项目说明
|-- favicon.ico 
|-- index.html      // 入口页面
|-- package.json      // 项目基本信息

<template>
 <div id="app1">
  <input v-model="msg" v-on:click="sayhi"/>
  <p>
   <h2>{{msg}}</h2>
  </p>
 </div>
</template>

<script>
 export default {
  name: 'Hi',
  data() {
   return {
    msg: 'My First vue-cli app!'
   }
  },
  methods:{
   sayhi:function(){
    alert(this.msg);
   }
  }
 }
</script>
<style>
 #app1 {
  font-family: "microsoft yahei";
  color: dodgerblue;
  font-size: 20px;
 }
</style>

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './Hi'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})