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

详解从零搭建 vue2 vue-router2 webpack3 工程

• Vue

《详解从零搭建 vue2 vue-router2 webpack3 工程》是一篇教程，它旨在帮助初学者学习如何使用 Vue 2 和 Vue-Router 2 搭建一个简单的 Web 应用程序，同时使用 Webpack 3 来处理依赖，以及使用 ES6 进行编程。以下是它的完整攻略：

介绍

在开始之前，需要了解一些前置知识：Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue-Router 2 是一个 Vue.js 的官方路由管理器，用于管理应用程序的路由。Webpack 3 是一个模块捆绑器，用于处理 JavaScript 模块。

创建项目

首先要创建一个新的 Vue.js 项目，可以使用 Vue.js 官方提供的 Vue CLI 工具来创建项目。在终端中运行以下命令来安装它：

$ npm install -g @vue/cli

安装完成后，运行以下命令来创建一个新的 Vue.js 项目：

$ vue create my-project

这个命令将会创建一个名为 my-project 的新项目，其中包含了所有必要的文件和依赖项。在本教程中，使用了默认选项来创建这个项目。

安装依赖

接下来，需要安装一些必要的依赖项。在本教程中，使用以下命令来安装这些依赖项：

$ npm install vue-router axios --save
$ npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env --save-dev

这个命令将会安装 Vue-Router、Axios 和 Webpack 的一些必要依赖项。

创建入口文件和组件

接下来，需要创建一个用于启动应用程序的入口文件。在项目的 src 目录下创建一个名为 main.js 的文件，然后将以下代码复制到该文件中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

这个代码将会：

  1. 引入 Vue.js、App.vue 组件和 Vue-Router 路由管理器；
  2. 创建一个新的 Vue.js 实例，将其挂载到 id 为 app 的 DOM 元素上；
  3. 将 Vue-Router 路由管理器作为实例的一个参数传递给它；
  4. 将 App.vue 组件作为实例的根组件，并使用 render 函数来渲染它。

接下来，创建一个 App.vue 组件，在该组件中包含以下代码：

<template>
    <div>
        <router-view />
    </div>
</template>

<script>
export default {
    name: 'App',
}
</script>

<style>
</style>

这个组件将会：

  1. 渲染一个包含 Vue-Router 视图实例的 div 元素。

最后，创建一个名为 HelloWorld.vue 的新组件，在该组件中包含以下代码：

<template>
    <div class="hello">
        <h1>{{ greeting }}</h1>
    </div>
</template>

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

<style scoped>
.hello {
    font-size: 48px;
    text-align: center;
}
</style>

这个组件将会：

  1. 渲染一个包含一个标题的 div 元素。

配置 Webpack

接下来，需要创建一个 Webpack 配置文件。在项目的根目录下创建一个名为 webpack.config.js 的文件，并将以下代码复制到该文件中：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'build.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ],
    devServer: {
        historyApiFallback: true,
        noInfo: true
    }
};

在该文件中：

  • entry：指定了 webpack 的入口文件。
  • output：指定了 webpack 的输出位置和文件名。
  • module：指定了 webpack 的模块加载器。
  • plugins：指定了 webpack 的插件，如 HTMLWebpackPlugin，用于生成 HTML 文件。
  • devServer：指定了 webpack-dev-server 的相关设置。

此外需要在根目录下创建一个 public/index.html 文件，将以下代码复制到该文件中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

这个文件将会被 webpack 用于生成最终的 HTML 文件。

配置路由

接下来，将在 src 目录下创建一个 router/index.js 文件，用于配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        }
    ]
})

在这个文件中：

  • 引入了 Vue、Vue-Router 和 HelloWorld 组件；
  • 创建了一个 Vue-Router 实例；
  • 配置了路由规则。

测试

现在一切准备就绪，运行以下命令来启动 webpack-dev-server：

$ npx webpack-dev-server --hot --open

然后在浏览器中打开 http://localhost:8080，就能看到一个界面，上面有一个大大的 "Hello World!" 标题。

示例1

现在，可以添加一个新的页面。创建一个名为 World.vue 的新组件，在其中包含以下代码：

<template>
    <div class="world">
        <h1>{{ greeting }}</h1>
    </div>
</template>

<script>
export default {
    name: 'World',
    data() {
        return {
            greeting: 'Hello World! I am the world page.',
        };
    },
};
</script>

<style scoped>
.world {
    font-size: 48px;
    text-align: center;
}
</style>

然后修改 router/index.js 文件，添加以下路由规则：

import World from '../components/World.vue';

// ...

export default new Router({
    // ...
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/world',
            name: 'World',
            component: World
        }
    ]
})

注意路径中包含了一个名为 world 的新路由。接下来访问 http://localhost:8080/world 就能看到一个新的页面，上面有一个标题 "Hello World! I am the world page."。

示例2

现在，可以通过网络请求来获取数据。创建一个名为 HelloWorld2.vue 的新组件，在其中包含以下代码：

<template>
    <div class="hello">
        <h1>{{ data }}</h1>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: 'HelloWorld2',
    data() {
        return {
            data: null,
        };
    },
    mounted() {
        axios.get('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => {
                this.data = response.data.title;
            })
            .catch(error => {
                console.log(error);
            });
    },
};
</script>

<style scoped>
.hello {
    font-size: 48px;
    text-align: center;
}
</style>

这个组件使用了 Axios 来获取一个 JSON 数据，然后将其显示在页面上。

然后在 router/index.js 文件中添加以下路由规则：

import HelloWorld2 from '../components/HelloWorld2.vue';

// ...

export default new Router({
    // ...
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/world',
            name: 'World',
            component: World
        },
        {
            path: '/hello2',
            name: 'HelloWorld2',
            component: HelloWorld2
        },
    ]
})

这个新路由包含一个名为 HelloWorld2 的新组件。接下来访问 http://localhost:8080/hello2 就能看到一个新的页面，上面有一个标题 "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"，它是从远程服务器获取的数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解从零搭建 vue2 vue-router2 webpack3 工程 - Python技术站

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

相关文章

  • vue+element+springboot实现文件下载进度条展现功能示例

    下面我来详细讲解“vue+element+springboot实现文件下载进度条展现功能”的完整攻略。 1. 准备工作 在开始实现之前，我们需要先准备好一些工作。 在后端（springboot）中编写文件下载接口 在前端（vue+element）中编写文件下载相关的代码 2. 后端文件下载接口实现 接下来，我们需要在后端编写文件下载接口。 具体实现方式如下：…

    Vue 2023年5月28日
    00

  • Vue之文件加载执行全流程

    当浏览器加载Vue文件时，需要经过文件加载、解释和执行的过程，以下是Vue之文件加载执行全流程的攻略： 文件加载 首先，浏览器会从服务器端请求Vue文件。如果该Vue文件在浏览器缓存中已经存在，则浏览器直接从缓存中读取该文件，否则，浏览器会向服务器端请求该文件。 当Web服务器收到浏览器的Vue文件请求后，会将该文件返回给浏览器。浏览器接收到Vue文件后，会…

    Vue 2023年5月27日
    00

  • nodejs+koa2 实现模仿springMVC框架

    简介 首先，需要了解nodejs和koa2的概念和基础知识。1. nodejs：JavaScript运行时，是一种基于Chrome V8引擎的解释器，可以解析和执行JavaScript语法。2. koa2：Node.js的web框架，是Express的基础上重构的新一代web框架，强调“中间件”（middleware）概念，由于使用了ES6新增的async函…

    Vue 2023年5月28日
    00

  • vue踩坑记录之数组定义和赋值问题

    首先，我需要说明一下本文讨论的vue版本是Vue 2。 一、问题描述：在vue中，我们经常要定义和操作数组。但是，在定义和赋值数组时，可能会遇到某些坑点。主要包括以下两点： 1、不能直接使用数组的方式为data中的数组元素赋值。2、在组件内部定义的数组会被所有组件共享。 下面，我们针对这两个坑点进行分别说明。 二、问题解决： 1、不能直接使用数组的方式为da…

    Vue 2023年5月28日
    00

  • 详解VUE 定义全局变量的几种实现方式

    下面我将详细讲解“详解VUE 定义全局变量的几种实现方式”的完整攻略。 一、前置知识 在进行本篇攻略之前，请确保您了解以下内容： Vue.js 的基础知识：组件、props 等 JavaScript 的基础知识 ES6 的基础知识：let、const 等 二、定义全局变量的几种实现方式 1. 在 Vue 根实例中定义 在 Vue 根实例中，我们可以通过 th…

    Vue 2023年5月27日
    00

  • 分享几个可以助你提高效率的Vue指令

    下面是关于“分享几个可以助你提高效率的Vue指令”的完整攻略： 1. 什么是Vue指令 Vue指令是Vue框架中非常重要的一部分。指令可以用在DOM元素、组件、模板中，用于将特定的行为绑定到HTML元素上。Vue提供了一些内置指令，如v-if、v-on等，同时也可以自定义指令，以适应不同的应用场景。 2. 分享几个可以提高效率的Vue指令 2.1 v-clo…

    Vue 2023年5月29日
    00

  • 面试官问你Vue2的响应式原理该如何回答?

    当面试官问到Vue2的响应式原理，作为Vue开发者，我们需要清楚地掌握该原理并能够清晰地表达出来。以下是几个可以帮助您回答这个问题的攻略： 1. 过程说明 首先需要解释一下响应式的概念，即页面上的数据变化会自动更新UI，而Vue实现响应式的原理是依赖收集和派发更新。 具体来说，当Vue实例化时，它会遍历每个数据属性并为其添加getter和setter方法。这…

    Vue 2023年5月27日
    00

  • vue2.0使用Sortable.js实现的拖拽功能示例

    实现拖拽功能是现代Web应用中常见的需求之一，而Vue.js是目前最受欢迎的JavaScript框架之一。在Vue.js中，我们可以使用第三方库Sortable.js来完成拖拽功能的实现。 下面是实现“vue2.0使用Sortable.js实现的拖拽功能示例”的攻略： 准备工作 使用Vue CLI创建一个新的Vue.js项目。 bash vue create…

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