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

IT_陈寒

发布于 2023-12-14 11:25:40

3410

发布于 2023-12-14 11:25:40

文章被收录于专栏：开发经验

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

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

引言

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

第一部分：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：

<!-- src/components/HelloWorld.vue -->
<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 在主页面中使用组件

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

<!-- src/views/Home.vue -->
<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应用。

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

2.1 Vue脚手架是什么

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

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

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

第三部分：拓展知识

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来访问这个状态。