练习项目最终目录结构
总共用到的依赖，终端执行命令
cnpm i vue vue-router vue-loader vue-template-compiler webpack webpack-cli html-webpack-plugin -D
webpack.config.js配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry:'./src/main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 3000,
contentBase: './dist',
progress: true
},
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
title: 'webpack4-vue-router', // 生成的HTML文件的标题
template: './src/index.html' // 使用的模板路径
}),
new VueLoaderPlugin()
],
module: {
rules: [{
test: /\.vue$/,
use: [
'vue-loader'
]
}]
}
}
package.json配置
{
"name": "webpack4-vue-router",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.1",
"vue-router": "^3.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.7"
},
"dependencies": {
"vue": "^2.6.10"
}
}
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import app from './app.vue'
import goods from './main/goods.vue'
import account from './main/account.vue'
import login from './subcom/login.vue'
import register from './subcom/register.vue'
var router=new VueRouter({
routes:[
{path:'/account',component:account,
children:[
{path:'/login',component:login},
{path:'/register',component:register}
]
},
{path:'/goods',component:goods}
]
})
var vm =new Vue({
el:'#app',
render:c=>c(app),
router
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
app.vue
<template>
<div>
<h1>这是app组件</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goods">Goods</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
account.vue
<template>
<div>
<h2>这是account组件</h2>
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
goods.vue
<template>
<div>
<h2>这是goods组件</h2>
</div>
</template>
<script>
</script>
<style>
</style>
login.vue
<template>
<div>
<h3>这是Account登录子组件</h3>
</div>
</template>
<script>
</script>
<style>
</style>
register
<template>
<div>
<h3>这是Account注册子组件</h3>
</div>
</template>
<script>
</script>
<style>
</style>
终端运行
cnpm run start
运行结果
抽离路由
在src下创建router.js，将main.js的部分代码复制和剪切到router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import app from './app.vue'
import router from './router.js'
var vm =new Vue({
el:'#app',
render:c=>c(app),
router
})
router.js
import VueRouter from 'vue-router'
import goods from './main/goods.vue'
import account from './main/account.vue'
import login from './subcom/login.vue'
import register from './subcom/register.vue'
var router=new VueRouter({
routes:[
{path:'/account',component:account,
children:[
{path:'/login',component:login},
{path:'/register',component:register}
]
},
{path:'/goods',component:goods}
]
})
export default router
