# 安装Vue CLI，如果已安装请跳过此步
npm install -g @vue/cli
# 创建一个新的Vue项目
vue create my-project
# 进入项目目录
cd my-project
# 启动Vue项目
npm run serve在新建的Vue项目中，理解Vue的生命周期很重要，Vue的生命周期钩子包括：created, mounted, updated, destroyed等。
export default {
data() {
return {
message: 'Hello Vue!'
};
},
created() {
console.log('组件已创建，但DOM还未生成');
},
mounted() {
console.log('DOM已挂载，组件现在可见');
},
updated() {
console.log('组件DOM已更新');
},
destroyed() {
console.log('组件已销毁');
}
};Vue的常用指令包括：v-if, v-else, v-show, v-for, v-bind, v-model等。
<template>
<div>
<!-- 条件渲染 -->
<div v-if="condition">条件为true时显示</div>
<div v-else>条件为false时显示</div>
<!-- 循环渲染 -->
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
<!-- 绑定属性 -->
<img v-bind:src="imageSrc">
<!-- 双向绑定 -->
<input v-model="message">
</div>
</template>
<script>
export default {
data() {
return {
condition: true,
items: [{ id: 1, text: 'Item 1' }],
message: 'Hello Vue!',
imageSrc: 'path_to_image.jpg'
};
}
};
</script>