Vue新手必学：Vue的使用和Vue脚手架详解

亦凉 2024-04-15 13:34 0阅读 0赞

#### 文章目录 ####

*   *  引言
     *  第一部分：Vue的基本使用
     *   *  1.1 安装Vue
         *  1.2 创建Vue项目
         *  1.3 编写第一个Vue组件
         *  1.4 在主页面中使用组件
         *  1.5 运行Vue项目
     *  第二部分：Vue脚手架的使用
     *   *  2.1 Vue脚手架是什么
         *  2.2 创建Vue项目
         *  2.3 项目结构
         *  2.4 运行项目
         *  2.5 插件和配置
     *  第三部分：拓展知识
     *   *  3.1 Vue路由
         *  3.2 Vue状态管理
     *  结语

![在这里插入图片描述][579a429daf314744b995f37351b46548.gif_pic_center]

> 🎉Vue新手必学：Vue的使用和Vue脚手架详解
> 
> --------------------
> 
>  *  ☆\* o(≧▽≦)o \*☆嗨~我是IT·陈寒🍹
>  *  ✨博客主页：[IT·陈寒的博客][IT]
>  *  🎈该系列文章专栏：[Java学习路线][Java]
>  *  📜其他专栏：[Java学习路线][Java] [Java面试技巧][Java 1] [Java实战项目][Java 2] [AIGC人工智能][AIGC] [数据结构学习][Link 1]
>  *  🍹文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
>  *  📜 欢迎大家关注！ ❤️

--------------------

### 引言 ###

Vue.js是一套用于构建用户界面的渐进式JavaScript框架，被广泛用于单页面应用程序的开发。对于初学者来说，Vue的简洁易用和灵活性使其成为学习前端开发的理想选择。本文将介绍Vue的基本使用方法，并深入了解Vue脚手架的搭建和使用。

![在这里插入图片描述][27422328b30846d5914e7233dd0b36d4.png_pic_center]

### 第一部分：Vue的基本使用 ###

#### 1.1 安装Vue ####

在使用Vue之前，我们首先需要安装Vue。Vue提供了多种安装方式，包括直接引入、通过CDN引入和使用包管理器（如npm）安装。这里我们介绍使用npm的方式。

# 全局安装Vue CLI
    npm install -g @vue/cli

#### 1.2 创建Vue项目 ####

安装完成Vue CLI后，我们可以使用以下命令创建一个新的Vue项目：

vue create my-vue-app

然后按照提示进行配置，选择需要的功能和插件。完成后，进入项目目录：

cd my-vue-app

#### 1.3 编写第一个Vue组件 ####

在Vue中，一切都是组件。我们先来编写一个简单的Vue组件，展示一个Hello World：

<template>
      <div>
        <h1>{
       { greeting }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          greeting: 'Hello, Vue!'
        };
      }
    };
    </script>
    
    <style scoped>
    /* 在这里写样式，使用 scoped 使样式仅在当前组件生效 */
    h1 {
      color: green;
    }
    </style>

#### 1.4 在主页面中使用组件 ####

接下来，在主页面中使用刚刚创建的组件：

<template>
      <div>
        <HelloWorld />
      </div>
    </template>
    
    <script>
    import HelloWorld from '@/components/HelloWorld.vue';
    
    export default {
      components: {
        HelloWorld
      }
    };
    </script>

在这里，我们通过`import`引入了刚刚创建的`HelloWorld`组件，并在`components`中注册。然后在`<template>`中使用这个组件。

#### 1.5 运行Vue项目 ####

现在我们已经完成了一个简单的Vue项目，可以通过以下命令运行：

npm run serve

然后打开浏览器访问`http://localhost:8080/`，你将看到你的第一个Vue应用。

![在这里插入图片描述][03afeec744cf47fb8898c13019c66a11.png_pic_center]

### 第二部分：Vue脚手架的使用 ###

#### 2.1 Vue脚手架是什么 ####

Vue脚手架（Vue CLI）是一个基于Vue.js进行快速开发的完整系统。它包括一个图形化的项目管理界面和一套完整的脚手架工具，帮助开发者快速搭建Vue项目。

![在这里插入图片描述][11a4599219d74604bb81ffd6ab9090ac.png_pic_center]

#### 2.2 创建Vue项目 ####

使用Vue CLI创建项目的过程我们已经在第一部分介绍过了，这里再次提一下，可以使用以下命令：

vue create my-vue-project

#### 2.3 项目结构 ####

Vue脚手架创建的项目结构如下：

my-vue-project/
    ├── public/
    │   ├── index.html
    │   └── ...
    ├── src/
    │   ├── assets/
    │   │   └── ...
    │   ├── components/
    │   │   └── ...
    │   ├── views/
    │   │   └── ...
    │   ├── App.vue
    │   └── main.js
    ├── package.json
    └── ...

*  `public/`: 静态资源目录，包含`index.html`等。
 *  `src/`: 源码目录，包含Vue组件、页面等。
 *  `App.vue`: 主组件，整个应用的入口。
 *  `main.js`: 项目的入口文件，初始化Vue实例等。

#### 2.4 运行项目 ####

使用以下命令运行项目：

npm run serve

然后访问`http://localhost:8080/`，你将看到Vue CLI创建的项目。

#### 2.5 插件和配置 ####

Vue CLI提供了一系列的插件和配置，可以通过图形界面或者配置文件进行管理。你可以通过以下命令打开图形界面：

vue ui

在图形界面中，你可以轻松地配置项目、安装插件、运行任务等。

![在这里插入图片描述][8271cc552a7e4669bbc2253d3a1ae6ff.png_pic_center]

### 第三部分：拓展知识 ###

#### 3.1 Vue路由 ####

在一个单页面应用中，通常会使用Vue Router进行路由管理。Vue Router允许你通过路由切换来实现页面的无刷新加载。

首先安装Vue Router：

npm install vue-router

然后在项目中配置：

// src/main.js
    import Vue from 'vue';
    import App from './App.vue';
    import VueRouter from 'vue-router';
    import Home from './views/Home.vue';
    
    Vue.config.productionTip = false;
    
    Vue.use(VueRouter);
    
    const routes = [
      {
         path: '/', component: Home }
    ];
    
    const router = new VueRouter({
        
      routes
    });
    
    new Vue({
        
      render: h => h(App),
      router
    }).$mount('#app');

#### 3.2 Vue状态管理 ####

在大型应用中，组件之间的状态共享和管理是一个重要的问题。Vue提供了Vuex来解决这个问题，它是一个专门为Vue.js应用程序开发的状态管理模式。

首先安装Vuex：

npm install vuex

然后在项目中配置：

// src/main.js
    import Vue from 'vue';
    import App from './App.vue';
    import VueRouter from 'vue-router';
    import Vuex from 'vuex';
    import Home from './views/Home.vue';
    
    Vue.config.productionTip = false;
    
    Vue.use(VueRouter);
    Vue.use(Vuex);
    
    const routes = [
      {
         path: '/', component: Home }
    ];
    
    
    
    const router = new VueRouter({
        
      routes
    });
    
    const store = new Vuex.Store({
        
      state: {
        
        count: 0
      },
      mutations: {
        
        increment(state) {
        
          state.count++;
        }
      }
    });
    
    new Vue({
        
      render: h => h(App),
      router,
      store
    }).$mount('#app');

这里我们创建了一个简单的`Vuex`状态，包括一个计数器。在组件中，你可以通过`this.$store.state.count`来访问这个状态。

### 结语 ###

通过本文的介绍，你已经初步了解了Vue的基本使用和Vue脚手架的搭建。同时，我们提到了一些拓展的知识，包括Vue Router和Vuex。Vue的生态系统非常丰富，有助于快速开发现代化的Web应用。在实际项目中，你可以根据需求深入学习这些知识，提高开发效率。希望这篇文章对Vue新手有所帮助。

--------------------

> 🧸结尾 ❤️ 感谢您的支持和鼓励！ 😊🙏  
> 📜您可能感兴趣的内容：
> 
>  *  【[Java面试技巧][Java 1]】[Java面试八股文 - 掌握面试必备知识（目录篇）][Java_ -]
>  *  【[Java学习路线][Java]】[2023年完整版Java学习路线图][2023_Java]
>  *  【[AIGC人工智能][AIGC]】[Chat GPT是什么，初学者怎么使用Chat GPT，需要注意些什么][Chat GPT_Chat GPT]
>  *  【[Java实战项目][Java 2]】[SpringBoot+SSM实战：打造高效便捷的企业级Java外卖订购系统][SpringBoot_SSM_Java]
>  *  【[数据结构学习][Link 1]】[从零起步：学习数据结构的完整路径][Link 2]
> 
> > ![在这里插入图片描述][d7565cfc032647bfb69e7971731a06a2.gif_pic_center]

[579a429daf314744b995f37351b46548.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/35c633244048444989bf965b2e87e208.gif
[IT]: https://blog.csdn.net/qq_43546721?type=blog
[Java]: https://blog.csdn.net/qq_43546721/category_12367981.html
[Java 1]: https://blog.csdn.net/qq_43546721/category_12384780.html?spm=1001.2014.3001.5482
[Java 2]: https://blog.csdn.net/qq_43546721/category_12378614.html?spm=1001.2014.3001.5482
[AIGC]: https://blog.csdn.net/qq_43546721/category_12369819.html?spm=1001.2014.3001.5482
[Link 1]: https://blog.csdn.net/qq_43546721/category_12417284.html?spm=1001.2014.3001.5482
[27422328b30846d5914e7233dd0b36d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/19f3ae980b6b432b98cb8ff0501c2bfb.png
[03afeec744cf47fb8898c13019c66a11.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/73ee2549d2b845fbb0c5ce53da8a1514.png
[11a4599219d74604bb81ffd6ab9090ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/96fad5e12c884b5180e29f6c4d59d0b7.png
[8271cc552a7e4669bbc2253d3a1ae6ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/9a8fe45e94204c1baddd8736fd674832.png
[Java_ -]: https://blog.csdn.net/qq_43546721/article/details/131832856
[2023_Java]: https://blog.csdn.net/qq_43546721/article/details/131550605
[Chat GPT_Chat GPT]: https://blog.csdn.net/qq_43546721/article/details/131866932
[SpringBoot_SSM_Java]: https://blog.csdn.net/qq_43546721/article/details/132119791
[Link 2]: https://blog.csdn.net/qq_43546721/article/details/132404477
[d7565cfc032647bfb69e7971731a06a2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/efbd098aba964c80b695f55d51eda2eb.gif