Vue CLI 是 Vue.js 的官方脚手架工具，它利用构建工具 Webpack 和先进的包管理工具（如 npm 或 yarn），简化了开发者创建、开发及维护 Vue.js 项目的过程。通过丰富的命令行界面（CLI），Vue CLI 提供了高效项目搭建、依赖管理、代码编写、开发、测试与部署等全方位支持。
安装 Vue CLI
确保开发环境已安装 Node.js 和 NPM 后，使用以下命令轻松安装 Vue CLI：
npm install -g vue-cli或，如果你更习惯使用 yarn：
yarn global add vue-cli安装完成后，通过执行以下命令验证 Vue CLI 是否成功安装：
vue --version这将显示 Vue CLI 的版本信息。
创建 Vue 项目利用 Vue CLI 创建新项目只需几步：
- 在项目根目录下创建新文件夹。
- 在命令行中执行以下命令：
vue create my-project这里，my-project 为你的项目命名。执行命令后，Vue CLI 会引导你配置项目，包括应用特性、路由、样式与 ESLint 设置。
创建完毕后，项目将放置于与命令行指定的项目名一致的文件夹内。使用 cd 命令进入新项目文件夹：
cd my-projectVue CLI 创建的项目会在 src 文件夹中包含应用的 root Vue 组件。组件结构通常包括：
- 模板：HTML 样式和结构的定义。
- 脚本：组件行为与逻辑。
- 样式：CSS 样式定义。
以下是一个简单的 App.vue 组件示例，展示了基本模板、脚本与样式：
<template>
<div>
<h1>{{ greeting }}</h1>
<button @click="sayHello">Say Hello</button>
</div>
</template>
<script>
export default {
data() {
return {
greeting: 'Welcome to Vue!'
};
},
methods: {
sayHello() {
alert('Hello!');
}
}
};
</script>
<style>
h1 {
color: blue;
}
</style>Vue 生命周期指组件在其整个生命周期过程中经历的关键阶段，掌握这些阶段有助于开发者更精准地控制组件行为。以下是一个简单 Vue 实例，展示了关键生命周期钩子：
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: 'TitleComponent',
data() {
return {
title: 'Vue Lifecycle Example'
};
},
mounted() {
console.log('Component is now mounted.');
},
beforeMount() {
console.log('Component is about to be mounted.');
},
beforeUpdate() {
console.log('Component is about to be updated.');
},
updated() {
console.log('Component has been updated.');
}
};
</script>构建简单待办事项应用，演示 Vue CLI 的基本使用与 Vue 组件的深度理解。项目结构和代码示例如下：
项目结构
my-to-do-app/
src/
components/
TodoList.vue
App.vue
main.js
public/
index.html
package.jsonApp.vue 主组件
<template>
<div>
<h1>To-Do List</h1>
<TodoList v-model="tasks" />
<button @click="addTask">Add Task</button>
</div>
</template>
<script>
import TodoList from './components/TodoList.vue';
export default {
components: {
TodoList
},
data() {
return {
tasks: []
};
},
methods: {
addTask() {
this.tasks.push({ text: 'New Task', done: false });
}
}
};
</script>TodoList.vue 待办事项组件
<template>
<ul>
<li v-for="task in tasks" :key="task.text">
<input type="checkbox" v-model="task.done" />
<span @click="removeTask(task)">{{ task.text }}</span>
</li>
</ul>
</template>
<script>
export default {
props: {
tasks: {
type: Array,
required: true
}
},
methods: {
removeTask(task) {
this.$emit('task-removed', task);
}
}
};
</script>main.js 主应用脚本
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: h => h(App)
}).$mount('#app');HTML 文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My To-Do App</title>
</head>
<body>
<div id="app"></div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Vue CLI 会在构建时自动将 main.js 添加为 <script> 标签 -->
</body>
</html>通过本案例，加深了 Vue CLI 使用与 Vue 组件构建的实践理解。实际开发中，可扩展更多功能，如更复杂的事件处理、状态管理与后端 API 交互等。
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
