Vue Hello World

main.js

  /* 导入 node_modules 中的 Vue 模块 */
  import Vue from 'vue'

  /* 导入 Vue 组件 App */
  import App from './App.vue'

  /* 创建 Vue 实例 */
  new Vue({
      /* 定义 render 函数 */
      render: function (createElement) {
          return createElement(App);
      }
  /* 将创建的Vue 组件 App 元素挂载到 body 的根路径下 */
  }).$mount('#app')
  

App.vue

<template>
<div>
    <p>
        <button @click="helloBtnClick">{{ mssage }}</button> World
    </p>
</div>
</template>


<script>
export default {
    data: function () {
        return {
            mssage: "Hello",
        };
    },
    methods: {
        helloBtnClick: function () {
            alert("Hello World");
        },
    },
};
</script>


<style>
p  {
    text-align: center;
}
</style>

安装 vue 和 CLI 工具

npm install vue
npm install -g @vue/cli
npm install -g @vue/cli-service-global

预览和构建

vue serve main.js   # 预览
vue build main.js   # 构建