webpack 使用vue和vue-router
结合webpack使用vue和vue-router
首先安装vue插件 并导入插件
npm install vue -S
import Vue from 'vue'
你会发现 无法在页面渲染
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">
{{ msg }}
</div> </body> </html>
App.vue
<template>
<div>
<h1>我是小白啊</h1>
</div>
</template>
<script>
</script>
<style>
</style>
main.js
import Vue from 'vue';
//在webpack中使用 import vue from 'vue' 导入的Vue构造函数 功能不完善，只提供了runtime-only的放大 并没有提供渲染网页的使用方式
// 使用 import Vue from '../node_models/vue/dist/vue.js'
// 或者在webpack.config.js 配置文件加入
// resolve:{ 推荐使用
// alias:{
// 'vue$':'vue/dist/vue.js'
// }
// }
import app from './App.vue'; var vm = new Vue({ el: '#app', data: { msg: 's' }, render: c=>c(app) // 你会发现无法挂载 注意 使用render 会覆盖指定el容器的所有内容 })
webpack 无法打包.vue的文件 所以必须安装vue插件 vue-loader vue-template-compiler -D
npm i vue-loader vue-template-compiler -D // 安装的时候需要考虑版本兼容问题， 这是一个很麻烦的事情
我每次都会指定版本
npm i vue-loader@14 vue-template-compiler@2 -D //每个人服务器版本不一样，根据错误提醒自行切换版本
然后在webpack.config.js文件进行loader加载配置
const path = require('path') const webpack = require('webpack') const htmlWebpackPlugin = require('html-webpack-plugin') // 两个作用： 第一个是生成指定的页面到内存中 第二是自动把打包好的bundle.js加载到页面中 module.exports = { entry: path.join(__dirname, '/src/main.js'), // 指定入口文件路径 output: { // 指定 出口文件 path: path.join(__dirname, '/dist'), filename: 'bundle.js' }, // 启动热更新的第三步 plugins: [ // 配置插件节点 new webpack.HotModuleReplacementPlugin(), // 一个热更新的模块对象 new htmlWebpackPlugin({ //创建在内存中生成的html 插件 template: path.join(__dirname, './src/index.html'), // 指定模板页面路径 ，相当于把指定页面进行渲染 filename: 'index.html' // 在浏览器生成页面的名称 }) ], module: { // 这个节点用于配置所有第三方模块 加载器 rules: [ // 所有第三方模块的 匹配规则 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 加载解析以.css结尾的文件 { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 加载解析以.less结尾的文件 { test: /\.(eot|svg|ttf|woff|woff2)$/, use: 'url-loader' }, // 处理字体图标 // limit 给定的值是图片大小，单位byte 如果我们给定的图片大于等于给定的值就不会转化为base64位 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 打包以.js结尾的文件 exclude 除 /node_modules/文件夹内容 { test: /\.vue$/, use: 'vue-loader' } //加载解析.vue结尾的文件 ] }, resolve: { // 定义一个渲染加载器 alias: { "vue$": 'vue/dist/vue.js' } } }
安装完成之后页面能成功渲染
根据上面的操作基本上可以在网页上渲染页面，接下来我们使用vue-router 进行路由
1、首先还是安装vue-router 插件
npm i vue-router -S
2、在main.js中导入vue-router包 并手动安装VueRouter
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter);
3、在mian.js里面导入各个vue组件
4、创建路由对象
5、将路由挂载到vm上
main.js
// main.js 是项目的JS入口文件 import Vue from 'vue'; // 导入vue-router包 import VueRouter from 'vue-router'; // 手动安装VueRouter Vue.use(VueRouter); import app from './App.vue'; import account from './main/login.vue'; import goodslist from './main/register.vue'; // 创建路由对象 var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] }) var vm = new Vue({ el: '#app', data: { msg: 'ss' }, render: c => c(app), // 将路由对象挂载到vm上 router })
App.vue
<template>
<div>
<h1>我是APP</h1>
<router-link to="/login">login</router-link>
<router-link to="/register">register</router-link>
// 因为使用render 渲染 会覆盖el指定的内容覆盖，所以需要把 放在需要渲染的内容中
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
结合webpack 实现子路由
main.js
// main.js 是项目的JS入口文件
import Vue from 'vue'; // 导入vue-router包 import VueRouter from 'vue-router'; // 手动安装VueRouter Vue.use(VueRouter); import app from './App.vue'; import account from './main/login.vue'; import goodslist from './main/register.vue';
import acouut from './children/acouut.vue';
import demo from './children/demo.vue';
// 创建路由对象 var router = new VueRouter({ routes: [ {
path: '/login',
component: login,
children: [
{ path: '/acouut', component: acouut },
{ path: '/demo', component: demo },
]
},
{ path: '/register', component: register }
]
})
var vm = new Vue({
el: '#app',
data: {
msg: 'ss'
},
render: c => c(app),
// 将路由对象挂载到vm上
router
})
login.vue
<template>
<div>
<h1>我是login</h1>
<router-link to="/acouut">acouut</router-link>
<router-link to="/demo">demo</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
</style>
此时页面显示
基本完成lwebpack vue和vue-router 的使用 如果需要继续完善可以抽离路由模块
在根目录创建router.js文件夹
router.js
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import login from './main/login.vue'; import register from './main/register.vue'; import acouut from './children/acouut.vue'; import demo from './children/demo.vue'; var router = new VueRouter({ routes: [{ path: '/login', component: login, children: [ { path: '/acouut', component: acouut }, { path: '/demo', component: demo }, ] }, { path: '/register', component: register } ] }) // 暴露 路由 export default router
此时main.js
import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); import app from './App.vue';
//导入自定义路由模块 import router from './router'; var vm = new Vue({ el: '#app', render: c => c(app), router })
此时页面显示也是正常
浙公网安备 33010602011771号