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

《详解从零搭建 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');

这个代码将会：

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

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

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

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

<style>
</style>

这个组件将会：

渲染一个包含 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>

这个组件将会：

渲染一个包含一个标题的 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技术站