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

喜欢ヅ旅行 2024-04-20 12:13 46阅读 0赞

#### 1、简述 ####

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

官网地址：[https://cn.vuejs.org/][https_cn.vuejs.org]  
![在这里插入图片描述][b0a17d3268984800a11b8ffc1f859d6d.png]

#### 2、安装 Node.js 和 npm ####

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

Node官网地址：[https://nodejs.org/en][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 的学习和开发过程中取得成功！

[https_cn.vuejs.org]: https://cn.vuejs.org/
[b0a17d3268984800a11b8ffc1f859d6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/8862b9f4e0ac41d9943a50356590de66.png
[https_nodejs.org_en]: https://nodejs.org/en