《详解从零搭建 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技术站
微信扫一扫 
支付宝扫一扫 