1. Python技术站首页
  2. 其他
  3. Vue

vue+node+webpack环境搭建教程

• Vue
yizhihongxing

Vue + Node + Webpack 环境搭建教程

本文详细讲解如何搭建 Vue + Node + Webpack 环境，以及相关的配置和注意事项。本教程中使用的框架版本如下：

  • Vue.js：2.x
  • Node.js：8.x
  • Webpack：3.x

1. 安装 Node.js

在开始搭建前，首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。可以前往 Node.js 官网 下载安装最新版本的 Node.js。

2. 初始化项目

我们使用 Vue-cli 脚手架工具来初始化项目，执行以下命令：

npm install -g vue-cli
vue init webpack my-project

其中 my-project 是你的项目名称。执行上述命令后会有一系列的交互式问题，包括项目名称、描述、作者、选择要使用的 Vue 版本等。选择对应的选项即可。

3. 安装 npm 包

进入项目目录执行以下命令安装依赖：

cd my-project
npm install

4. 配置 Webpack

1. 添加 webpack-dev-server

webpack-dev-server 是一个静态文件服务器，可以用来预览我们的项目。执行以下命令安装：

npm install --save-dev webpack-dev-server

接下来需要在 webpack.config.js 文件中添加相关的配置：

// webpack.config.js

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    port: 8080,
    historyApiFallback: true
  }
}
  • contentBase：静态文件服务根目录
  • port：指定要监听的端口号
  • historyApiFallback：当访问不存在的路径时是否匹配到 index.html

2. 添加文件路径别名

在 webpack.config.js 文件中添加文件路径别名，可以方便快捷地引用相对路径下的文件。修改 resolve 属性的 alias 部分：

// webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    }
  }
}

这里添加了一个别名 @，指向 src/ 目录。

3. 添加 loader

  • 如果需要处理 .vue 文件，需要安装 vue-loader 和 vue-template-compiler，执行以下命令：
npm install --save-dev vue-loader vue-template-compiler

添加 vue-loader 和 VueLoaderPlugin 到 module.rules 中：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
  • 如果需要处理 ES6 或者其他语言的源代码，则需要使用 babel 进行转换，安装以下包：
npm install --save-dev babel-loader @babel/core @babel/preset-env

babel-loader 是 Webpack 打包工具所需要的一个 转译器，@babel/preset-env 是 Babel 的预设，它会告诉 Babel 需要进行哪些转换。

添加到 module.rules 中：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

4. 添加插件

在 webpack.config.js 文件中添加以下插件：

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

5. 配置 Node.js 服务

我们需要在项目中使用 Node.js 服务，需要安装一些必要的包。执行以下命令：

npm install --save express body-parser cors

这里我们用到了 express、body-parser、cors，分别代表 web 框架、处理 post 数据、跨域处理。

在项目根目录下，新建一个名为 server.js 的文件，添加以下代码：

// server.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

// 跨域中间件
app.use(cors())

// 接口转发
app.use('/api', (req, res) => {
  // ...
})

// 解析 post 请求中的 json 数据
app.use(bodyParser.json())

// 监听端口
const port = 3000
app.listen(port, () => {
  console.log(`服务器启动成功：http://localhost:${port}`)
})

在 app.use('/api', (req, res) => {}) 的回调函数中编写接口的处理逻辑。下面是一个简单的例子：

// server.js

// 假设有一个 user 接口，根据传过来的 id 返回对应用户信息
app.use('/api/user/:id', (req, res) => {
  // 假设用户信息在数据库中
  const db = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' }
  ]

  // 获取请求中的 id
  const id = req.params.id
  const user = db.find(item => item.id === Number(id))

  // 返回用户信息
  res.json(user)
})

6. 添加示例说明

示例一：vue 组件调用 Node.js 接口

  • App.vue
<template>
  <div>
    <button @click="getUser">获取用户信息</button>
    <p>{{ user }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: ''
    }
  },
  methods: {
    getUser() {
      // 调用 user 接口
      const id = 2 // 假设要查询的用户 id 为 2
      this.$http.get(`/api/user/${id}`).then(response => {
        const user = response.data
        this.user = user ? user.name : ''
      })
    }
  }
}
</script>
  • main.js
import Vue from 'vue'
import Axios from 'axios'
import App from './App.vue'

// 配置 axios
Axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$http = Axios

new Vue({
  el: '#app',
  render: h => h(App)
})

示例二：Node.js 服务调用外部接口

  • server.js
const express = require('express')
const Axios = require('axios')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

// 跨域中间件
app.use(cors())

// 接口转发
app.use('/api', async (req, res, next) => {
  try {
    const url = `https://api.example.com${req.originalUrl}` // 假设需要访问的外部接口地址为 https://api.example.com
    const response = await Axios(url, {
      method: req.method,
      headers: req.headers,
      data: req.body
    })
    res.status(response.status).json(response.data)
  } catch (error) {
    next(error)
  }
})

// 解析 post 请求中的 json 数据
app.use(bodyParser.json())

// 监听端口
const port = 3000
app.listen(port, () => {
  console.log(`服务器启动成功：http://localhost:${port}`)
})

这个示例中，我们将访问某个外部接口的请求转发到我们自己的 Node.js 服务中，目的是为了更好的控制请求，比如添加统一的请求头、鉴权信息等。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+node+webpack环境搭建教程 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 八种vue实现组建通信的方式

    以下是八种Vue实现组件通信的完整攻略： 1. Props Props是Vue组件间通信中最常用的一种方式。Props允许父组件向子组件传递数据，可以通过在子组件中声明props选项来接收父组件传递的值。示例代码如下： <!–父组件模版–> <template> <Child :msg="message"…

    Vue 2023年5月29日
    00

  • vue 使用localstorage实现面包屑的操作

    下面就来详细讲解一下“vue 使用localstorage实现面包屑的操作”的完整攻略。 介绍 面包屑（Breadcrumbs）是一种导航方式，逐级显示访问页面的位置，提升用户体验。在实际开发项目中，经常需要使用面包屑来展示当前所在页面的路径信息。而使用 localStorage 方式记录面包屑信息，则可以让用户在刷新页面或从其他页面跳转回来时仍然可以保留之…

    Vue 2023年5月28日
    00

  • vue eslint简要配置教程详解

    介绍： Vue代码的质量保证是很有必要的，eslint就是很好的工具之一。在Vue项目中，如何配置eslint呢？下面提供一份简要配置教程。 正文： 安装依赖 要在Vue项目中使用eslint，需要安装对应的依赖： npm install eslint eslint-loader eslint-plugin-vue -D 这里需要注意，eslint是esli…

    Vue 2023年5月28日
    00

  • vue最简单的前后端交互示例详解

    下面是“vue最简单的前后端交互示例详解”的完整攻略。 总览 前后端交互是Web开发中的重要环节，Vue作为现代化的前端框架，提供了多种方式来与后端服务交互。本文将会介绍Vue前端框架如何处理前后端交互，包括如何发送Ajax请求、获取/提交数据等。 准备工作 在开始前，我们需要先了解以下基础知识： Vue.js基础语法 前端模块化开发 发送Ajax请求 我们…

    Vue 2023年5月28日
    00

  • 详解在Vue.js编写更好的v-for循环的6种技巧

    当使用Vue.js编写v-for循环时，我们经常会遇到一些常见的问题，例如渲染列表不够高效、循环嵌套过多等。为了优化循环的性能并提高代码的质量，我们可以采用以下6种技巧。 技巧一：key属性的使用 在使用v-for循环渲染列表时，一定要为循环中的元素添加key属性。这样做的好处是告诉Vue.js循环中的每一个元素都是唯一的。使用key属性可以提高渲染的性能，…

    Vue 2023年5月29日
    00

  • vue中实现上传文件给后台实例详解

    针对“vue中实现上传文件给后台的实例详解”，我的回答将分为以下几个部分说明： 概述 前端实现步骤 后端实现步骤 示例说明1 示例说明2 1. 概述 Vue是一种现代化的JavaScript框架，它能够帮助我们快速构建交互式界面。在许多Web应用程序中，我们需要允许用户上传文件到我们的服务器。尽管Vue本身并不提供文件上传功能，但通过结合一些其他的JavaS…

    Vue 2023年5月28日
    00

  • Vue开发常用方法详解

    Vue开发常用方法详解 什么是Vue？ Vue是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）设计模式，可以将页面与数据相分离，同时也可以更好地管理页面的状态。Vue的特点是易于上手，同时也提供了强大的工具，例如组件化、响应式数据和虚拟DOM等。 常用方法详解 1. 数据绑定 Vue提供了一…

    Vue 2023年5月27日
    00

  • Vue3和Electron实现桌面端应用详解

    “Vue3和Electron实现桌面端应用详解”可以拆分为两部分进行讲解，即Vue3和Electron的介绍与实现 Vue3介绍与实现 Vue3介绍 Vue3是Vue.js的最新版本，相较于Vue.js 2，Vue3做了大量的重构和优化。其中，重构和优化最显著的一个方面是Vue3的核心代码由Monorepo改为了Tree-Shaking优化的方式，使得应用的…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部