Vue项目 快速上手（如何新建Vue项目，启动Vue项目，Vue的生命周期，Vue的常用指令）_vue项目创建和启动

# 安装Vue CLI，如果已安装请跳过此步
npm install -g @vue/cli
 
# 创建一个新的Vue项目
vue create my-project
 
# 进入项目目录
cd my-project
 
# 启动Vue项目
npm run serve

在Vue文件中使用常见的Vue指令：

<template>
  <div>
    <!-- 文本插值 -->
    <p>{{ message }}</p>
 
    <!-- 条件渲染 -->
    <div v-if="isCondition">条件为真时渲染</div>
 
    <!-- 事件绑定 -->
    <button @click="onClick">点击我</button>
 
    <!-- 属性绑定 -->
    <img v-bind:src="imageSrc" alt="图片">
 
    <!-- 双向绑定 -->
    <input v-model="inputValue">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!',
      isCondition: true,
      imageSrc: 'path/to/image.jpg',
      inputValue: ''
    };
  },
  methods: {
    onClick() {
      alert('按钮被点击');
    }
  }
};
</script>

Vue的生命周期钩子：

export default {
  created() {
    // 实例被创建后调用
  },
  mounted() {
    // el被新创建的vm.$el替换，并挂载到实例上去之后调用
  },
  beforeDestroy() {
    // 实例销毁之前调用
  }
};