Vue CLI学习入门：从零开始搭建你的第一个Vue项目

2024/11/8 0:02:48

本文主要是介绍Vue CLI学习入门：从零开始搭建你的第一个Vue项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

Vue CLI是Vue.js官方提供的脚手架工具，帮助开发者快速搭建Vue应用，内置多种常用工具和插件，提高开发效率。本文将详细介绍Vue CLI学习入门的相关内容，包括安装、创建项目、路由配置和资源管理等。

Vue CLI简介

Vue CLI是什么

Vue CLI是Vue.js官方提供的脚手架工具，它可以帮助开发者快速搭建Vue应用。通过Vue CLI，你可以轻松创建基于Vue的应用原型，它内置了各种常用的工具和插件，使得开发效率大大提高。Vue CLI不仅支持ES2015+语法，还集成了模块化打包、热重载、单元测试等功能，使得前后端开发更为便捷。

Vue CLI的作用和优势

快速启动项目：Vue CLI提供了多种模板，可以一键创建适合的项目结构，节省了大量的配置时间。
灵活的构建选项：Vue CLI允许开发者按照自己的需求调整构建配置，支持多种插件和工具的集成。
热重载功能：开发过程中，代码修改即时在浏览器中反映，提高了开发效率。
开发和生产环境的自动切换：Vue CLI内置了环境变量配置，可以方便地切换开发和生产环境。
自动化单元测试：Vue CLI集成了Jest等测试框架，使得单元测试变得简单直接。

如何安装Vue CLI

安装Node.js：Vue CLI依赖于Node.js环境，首先确保你的电脑上已经安装了Node.js。可以通过Node.js官网（https://nodejs.org/）下载安装。
全局安装Vue CLI：使用npm命令安装Vue CLI到全局环境中。
```
npm install -g @vue/cli
```
验证安装：安装完成后，可以通过以下命令验证Vue CLI是否安装成功。
```
vue --version
```
输出版本号即表示安装成功。

创建第一个Vue项目

使用Vue CLI创建新项目

创建新项目：使用vue create命令创建一个新项目。以“my-vue-app”为例。
```
vue create my-vue-app
```
选择预设模板或功能列表：运行上述命令后，会弹出如下选项：
```
? Please pick a preset (Use arrow keys)
> default (babel, eslint)
 default (Vue Router, pinia, ESLint, prettier)
 manual (customize features)
```
选择一个预设（preset），或者选择“manual”来手动配置你的项目。
选择配置：如果选择“manual”，会依次询问你是否需要使用特定的功能。例如：
```
Use history mode for router? (Use arrow keys)
> No
 Yes
```
按照提示选择需要的功能，最后会生成一个基本的项目结构。

项目目录结构解析

项目创建完成后，项目文件夹结构大致如下：

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

node_modules/：存放项目依赖的模块。
public/：存放静态资源文件，如index.html和favicon.ico。
src/：存放项目的源代码文件。
.gitignore：控制git忽略哪些文件。
babel.config.js：项目配置文件，用于设置转译规则。
package.json：包含项目配置和依赖信息。
README.md：项目说明文件。
vue.config.js：Vue CLI的配置文件，用于自定义构建过程的设置。

启动开发服务器

启动开发服务器：在项目根目录下，执行以下命令启动开发服务器。
```
npm run serve
```
查看开发服务器：启动后，浏览器会自动打开或可以根据提示输入URL访问。
```
Local: http://localhost:8080/
Network: http://192.168.1.100:8080/
```
使用热重载功能：在开发过程中，修改代码后浏览器会自动刷新，无需手动刷新页面。

常用命令介绍

`vue create`命令详解

vue create命令用于创建一个新的Vue项目。命令基本使用如下：

vue create <project-name>

该命令会根据指定项目名称创建一个新项目。通过运行命令，会自动创建项目的基本文件夹和文件结构，同时安装项目依赖库，并初始化Git仓库。

`npm run serve`命令详解

npm run serve命令用于启动开发服务器。启动后，可以在浏览器中查看项目的实时预览，支持热重载功能，提高开发效率。

`vue eject`命令详解及其注意事项

vue eject命令是Vue CLI中的一个高级命令，用于删除项目的配置文件并将其暴露给开发者。使用该命令后，Vue CLI将生成大量配置文件，开发者可以自行修改这些配置文件来精确控制构建过程。

使用命令：
```
vue eject
```
注意事项：
- 使用vue eject命令后，原本由Vue CLI管理的配置将转移到开发者手中，这会增加维护复杂性。
- 一旦使用vue eject，你将失去快速更新Vue CLI版本中自带的配置和功能的能力。
- 该命令不可逆，因此在团队开发环境中需要谨慎使用。

组件开发基础

Vue组件的基本概念

Vue组件是Vue应用中的可重用的HTML代码片段。它可以帮助你将UI拆分为独立且可管理的小块，便于代码管理和复用。组件可以包含HTML模板、Vue实例选项等。

创建和使用Vue组件

创建组件：在src/components目录下创建一个名为HelloWorld.vue的文件。

<!-- HelloWorld.vue -->
<template>
 <div class="hello">
   <h1>欢迎使用Vue组件!</h1>
   <p v-if="isVisible">这是一个可重用的Vue组件</p>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data() {
   return {
     isVisible: true
   }
 }
}
</script>

<style scoped>
.hello {
 color: #333;
}
</style>

使用组件：在src/App.vue文件中引入并使用组件。

<!-- App.vue -->
<template>
 <div id="app">
   <HelloWorld />
 </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
 name: 'App',
 components: {
   HelloWorld
 }
}
</script>

组件间的传值和通信

父组件传值给子组件：在父组件中通过props给子组件传递数据。

<!-- ParentComponent.vue -->
<template>
 <div>
   <ChildComponent :message="parentMessage" />
 </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
 name: "ParentComponent",
 components: {
   ChildComponent
 },
 data() {
   return {
     parentMessage: "这是从父组件传来的消息"
   }
 }
}
</script>

子组件传值给父组件：通过自定义事件实现子组件向父组件传递数据。

<!-- ChildComponent.vue -->
<template>
 <div>
   <button @click="sendMessageToParent">点击发送消息</button>
 </div>
</template>

<script>
export default {
 name: "ChildComponent",
 methods: {
   sendMessageToParent() {
     this.$emit("custom-event", "这是从子组件传来的消息")
   }
 }
}
</script>

使用自定义事件：在父组件中监听自定义事件。

<!-- ParentComponent.vue -->
<template>
 <div>
   <ChildComponent @custom-event="handleMessage" />
 </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
 name: "ParentComponent",
 components: {
   ChildComponent
 },
 methods: {
   handleMessage(message) {
     console.log("收到的消息:", message)
   }
 }
}
</script>

路由配置入门

Vue Router的引入与配置

安装Vue Router：首先需要安装Vue Router模块。
```
npm install vue-router
```

配置路由：在src/router.js中进行路由配置。

// src/router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
 {
   path: '/',
   name: 'Home',
   component: Home
 },
 {
   path: '/about',
   name: 'About',
   component: About
 }
]

const router = createRouter({
 history: createWebHistory(),
 routes
})

export default router

在主文件中使用路由：在main.js中引入并使用配置好的路由。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

创建路由和路由跳转

创建路由组件：在src/views/目录下创建路由对应的组件文件。

<!-- Home.vue -->
<template>
 <div>
   <h1>首页</h1>
 </div>
</template>

<script>
export default {
 name: 'Home'
}
</script>

导航到不同路由：在组件中使用<router-link>标签进行路由跳转。

<!-- App.vue -->
<template>
 <div id="app">
   <router-link to="/">首页</router-link>
   <router-link to="/about">关于</router-link>
   <router-view />
 </div>
</template>

路由参数和查询参数的使用

路由参数：在路由定义中使用动态参数。

const routes = [
 {
   path: '/user/:id',
   name: 'User',
   component: User
 }
]

在组件中获取路径参数：

// User.vue
<script>
export default {
 name: 'User',
 props: ['id'],
 created() {
   console.log(this.$route.params.id)
 }
}
</script>

查询参数：使用$router.push方法传递查询参数。

this.$router.push({
 path: '/user',
 query: {
   id: 123
 }
})

在组件中获取查询参数：

// User.vue
<script>
export default {
 name: 'User',
 created() {
   console.log(this.$route.query.id)
 }
}
</script>

资源添加与样式管理

在Vue项目中添加静态资源

添加图片资源：将图片文件放入src/assets目录。
```
src/
└── assets/
   └── logo.png
```

引用静态资源：在组件中引用资源文件。

<!-- App.vue -->
<template>
 <div id="app">
   <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" />
 </div>
</template>

使用CSS预处理器（如Sass、Less）

安装Sass或Less：使用npm安装Sass或Less及其相应编译器。

npm install sass @vue/cli-plugin-sass
npm install less @vue/cli-plugin-less

编写Sass或Less文件：在src/assets目录下创建一个Sass或Less文件。

/* src/assets/style.scss */
.container {
 padding: 20px;
 background-color: #f0f0f0;
}

引入Sass或Less文件：在组件中引用并使用这个样式文件。

<!-- App.vue -->
<template>
 <div id="app" class="container">
   <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="@/assets/logo.png" alt="Logo" />
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

<style scoped>
@import '@/assets/style.scss';
</style>

引入和使用外部样式库（如Bootstrap）

安装Bootstrap：通过npm安装Bootstrap。
```
npm install bootstrap
```

引入Bootstrap：在src/main.js中引入Bootstrap的CSS和JS文件。

// src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle.js'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(router).mount('#app')

使用Bootstrap组件：在组件中使用Bootstrap的HTML标签和类名。

<!-- App.vue -->
<template>
 <div id="app" class="container">
   <h1 class="text-primary">欢迎使用Bootstrap!</h1>
   <button class="btn btn-primary">点击按钮</button>
 </div>
</template>

<script>
export default {
 name: 'App'
}
</script>

通过以上步骤，你已经成功搭建了一个基本的Vue项目，并掌握了Vue CLI的基本使用方法，也学会了如何管理项目中的资源和样式。如果你想要深入了解Vue的更多高级功能，可以继续阅读官方文档或参加慕课网（https://www.imooc.com/）的相关课程。

这篇关于Vue CLI学习入门：从零开始搭建你的第一个Vue项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！