创建文件
App.vue
<template> <div> 第一个例子 <div> <div>路由区域</div> <router-link to="/one">Go to one</router-link> <router-link to="/two">Go to two</router-link> <div>页面区域</div> <router-view /> </div> </div> </template>
index.html
<div id="app"></div>
main.js
import Vue from "vue" import App from "./App.vue" import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/one', component: {template: '<div>第一个组件</div>' } }, { path: '/two', component: {template: '<div>第二个组件</div>' } } ] const router = new Router({ routes // (缩写) 相当于 routes: routes }) new Vue({ el: "#app", router, components: {App}, template: '<App/>' })
webpack.config.js
const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = env => { if (!env) { env = {} } const plugins = [ new VueLoaderPlugin(), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: './index.html' }) ] return { mode: env.production, entry: { app: './main.js' }, resolve: { extensions: ['.vue', '.csss', '.js', '.json'], // 可忽略的后缀 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.join(__dirname, 'src') } }, devtool: 'inline-source-map', devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, // 开启gzip压缩 port: 9000 }, module: { rules: [ { test: /\.html$/, loader: 'html-loader' }, { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins, output: { filename: '[name].min.js', path: path.resolve(__dirname, 'dist') } } }
package.json
{ "name": "d", "version": "1.0.0", "description": "", "main": "一个简单的例子", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" }, "author": "weiali.info", "license": "ISC", "dependencies": { "clean-webpack-plugin": "^3.0.0", "css-loader": "^2.1.1", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "vue": "^2.6.10", "vue-router": "^3.0.6", "vue-style-loader": "^4.1.2", "webpack-cli": "^3.3.2" }, "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.6", "babel-preset-es2015": "^6.24.1", "vue-loader": "^15.7.0", "vue-template-compiler": "^2.6.10", "webpack": "^4.33.0", "webpack-dev-server": "^3.6.0" } }
如何运行?
- npm i
- npm run dev