WEB：Vue.js 安装与入门指南

请关注微信公众号：拾荒的小海螺
博客地址：http://lsk-ww.cn/

1、简述

Vue.js 是一款现代、轻量级的 JavaScript 框架，专注于构建交互式的用户界面。本文将为你提供一份详细的 Vue.js 安装与入门指南，助你快速上手 Vue.js 开发。

官网地址：https://cn.vuejs.org/

2、安装 Node.js 和 npm

Vue.js 依赖于 Node.js 和 npm（Node 包管理工具），因此首先需要确保你的系统中已经安装了它们。你可以在 Node.js 官网 下载最新的 LTS 版本并进行安装。

Node官网地址：https://nodejs.org/en

安装完成后，打开终端并分别执行以下命令，检查是否成功安装：

node -v
npm -v

确保显示版本号，表示 Node.js 和 npm 安装成功。

通过npm来下载插件镜像的时候，需要设置镜像加速：

npm config set registry https://registry.npmmirror.com

国内npm常用的镜像源：

• npm 官方原始镜像网址是：https://registry.npmjs.org/
• 淘宝 NPM 镜像：https://registry.npm.taobao.org
• 阿里云 NPM 镜像：https://npm.aliyun.com
• 腾讯云 NPM 镜像：https://mirrors.cloud.tencent.com/npm/
• 华为云 NPM 镜像：https://mirrors.huaweicloud.com/repository/npm/
• 网易 NPM 镜像：https://mirrors.163.com/npm/
• 中科院大学开源镜像站：http://mirrors.ustc.edu.cn/
• 清华大学开源镜像站：https://mirrors.tuna.tsinghua.edu.cn/

3、安装 Vue CLI

Vue CLI 是 Vue.js 的官方脚手架工具，用于快速搭建 Vue.js 项目。在安装前先卸载已有安装的Vue版本：

npm uninstall -g @vue/cli

因不同的Vue版本安装有差别分两种介绍。执行以下命令全局安装 Vue CLI：

3.1 Vue2.X+

安装Vue2.X+，安装成功可以使用vue -V进行检查是否安装成功：

npm install vue-cli -g

使用webpack 创建Vue2.X+项目：

vue init webpack my-vue-app
cd my-vue-app
npm run dev 

3.2 Vue3.X

安装vue3.X+，安装成功可以使用vue -V进行检查是否安装成功

npm install -g @vue/cli

基于3.X+版本的脚手架创建vue项目

• 使用Vue ui图形界面创建vue3.X+项目

vue ui

• 使用命令行创建vue3.X+项目

vue create my-vue-app //文件名 不支持驼峰（含大写字母）

3.3 运行

在项目目录下，执行以下命令启动开发服务器：

npm run serve

成功启动后，你将在终端看到类似以下的输出：

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.2:8080/

在浏览器中访问 http://localhost:8080/，你将看到你的 Vue 应用的欢迎页面。

4、安装 ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，安装ElementUI：

npm i element-ui -S

备注：VUE2 使用的是 element-ui，VUE3 使用的是 element-plus

在 main.js 文件中，引入 element-ui：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/icon.css'

//注册 element-ui
Vue.use(ElementUI);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

5、安装 Axios

要在 Vue 项目中安装 Axios 并使用它来进行 HTTP 请求，你需要执行以下步骤：

npm install axios

一旦 Axios 安装完成，你可以在你的 Vue 组件中导入并使用它来发起 HTTP 请求。封装一个成js，命名request.js：

// 引入axios
import axios from "axios";
// 1.准备baseurl
let baseUrl = "/ld";
// 2.创建新的axios实例  service
const service = axios.create({
  baseURL: baseUrl,
  // 超时时间
  timeout: 2000,
  headers: { "X-Custom-Header": "foobar" },
});
//   3.添加请求拦截器
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么.
    // config.headers.Authorization = localStorage.getItem("cms-token");
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 4.添加响应拦截器
// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 手动清除 Toast

    return response.data;
  },
  (error) => {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么

    return Promise.reject(error);
  }
);
// 5.向外抛出实例对象
export default service

这样可以通过导入当前request.js来实现http请求：

  let url = "/form/readAttribute";
  let formData = new FormData();
  formData.append("systemType",systemType);
  return request({
    url:url,
    method:'post',
    data:formData
  });

6、事件总线

在 Vue 中，可以通过事件总线来实现组件之间的通信。事件总线是一个 Vue 实例，可以用于触发和监听事件。以下是一个简单的例子，演示如何在 Vue 中使用事件总线进行组件通信。

首先，在你的项目中创建一个新的 Vue 实例，用作事件总线。可以将其命名为 eventBus.js：

// eventBus.js
import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;

在需要进行通信的组件中，可以通过导入这个事件总线实例来触发事件。以下是一个使用事件总线的示例：

// ComponentA.vue
<template>
  <div>
    <button @click="notifyComponentB">Notify Component B</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    notifyComponentB() {
      eventBus.$emit('custom-event', 'Hello from Component A');
    }
  }
};
</script>

当这个事件总线实例触发后，可以通过$on来实现监听：

// ComponentB.vue
<template>
  <div>
    <p>{{ messageFromA }}</p>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  data() {
    return {
      messageFromA: ''
    };
  },
  created() {
    eventBus.$on('custom-event', message => {
      this.messageFromA = message;
    });
  }
};
</script>

在这个例子中，ComponentA 中的按钮点击事件触发了一个自定义事件，并通过事件总线将消息发送给 ComponentB。ComponentB 监听这个事件，并更新自身的数据。

7、编写 Vue 组件

打开项目中的 src/App.vue 文件，这是 Vue 项目的入口文件。编辑该文件，编写一个简单的 Vue 组件：

<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, Vue!'
    };
  }
};
</script>

<style>
/* 在这里可以添加样式 */
</style>

上述组件包含一个标题，展示了 Vue 数据绑定的基本用法。保存文件后，浏览器会自动刷新，你将看到页面已经更新。

8、结论

至此，你已经成功安装 Vue.js 并创建了一个简单的 Vue 项目。这只是 Vue.js 入门的第一步，接下来你可以深入学习 Vue.js 的组件化、路由、状态管理等更为高级的特性，为构建复杂的单页面应用做好准备。祝你在 Vue.js 的学习和开发过程中取得成功！