版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83934429
文章目录
webpack打包vue-router
在项目中加载vue-router依赖指令如下：
cnpm i vue-router --save
这篇文章是在之前的一篇文章的源码基础上拆分而来的，所以说我们可以通过这篇文章和之前的文章做一下相应的对比，这样可以加深我们对其的了解。
之前的那篇文章如下：
示例
目录结构
源码
login.vue源码：
<template>
<!--vue2.0通常都需要有一个根元素-->
<div>
<h2>登录页面</h2>
<input type="text" placeholder="请输入登录账号" v-model="loginName">
<button @click="loginMethod">登录</button>
</div>
</template>
<script>
export default {
data(){
return {
uname:''
,loginName:''
}
}
,created(){
//接收传过来的参数，将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
}
,methods:{
loginMethod(){
//如果没有输入任何信息，则提示输入账号。
if(this.loginName.trim() == ''){
alert('请输入登录账号！');
return;
}
//如果填写的登录名与注册的账号相一致，则登录成功！
if(this.uname == this.loginName){
alert('登录成功！');
//登录成功后跳转到欢迎界面
this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
} else {
alert('登录失败！');
}
}
}
}
</script>
<style scoped>
</style>
register.vue源码：
<template>
<!--vue2.0通常都需要有一个根元素-->
<div>
<h2>注册页面</h2>
<input type="text" v-model="uname">
<button @click="registerMethod">注册</button>
</div>
</template>
<script>
export default {
data(){
return {
uname:''
}
}
,methods:{
registerMethod(){
alert('注册成功！用户名为：' + this.uname);
//跳转到登录页面
this.$router.push({path:'/root/login',query:{uname:this.uname}});
}
}
}
</script>
<style scoped>
</style>
root.vue源码：
<template>
<div>
<!--路由占位-->
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
welcome.vue源码：
<template>
<div>
<h2>欢迎界面</h2>
<h3 v-show="currentUser != ''">{{currentUser}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
uname:''
,currentUser:''
}
}
,created(){
//接收传过来的参数，将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
//排除非空可能
if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
this.currentUser = '欢迎您:' + this.uname + "！"
}
}
}
</script>
<style scoped>
</style>
App.vue源码：
扫描二维码关注公众号，回复：
4085749 查看本文章
<!--Vue项目的根组件-->
<template>
<div id="app">
<router-link to="/root/register">注册</router-link> |
<router-link to="/root/login">登录</router-link>
<!--路由占位-->
<router-view></router-view>
</div>
</template>
<script>
//负责导出.vue这个组件对象
//它本质上是一个Vue对象，所以Vue中该定义的元素都可以使用
export default {
data(){
return {
msg:'Hello World!'
}
}
}
</script>
<style scoped>
/*其中的scoped意识是这里定义的css样式只是在当前页面中有效，不会影响到其它组件页面*/
.red{
color: blue;
}
</style>
main.js源码：
//1、导入vue核心包
import Vue from 'vue';
//2、导入App.vue的vue对象
import App from './App.vue';
//3、将vue-router集成到这个项目中来
import vueRouter from 'vue-router';
//4、将vueRouter对象绑定到Vue对象上
Vue.use(vueRouter);
//5、导入路由规则对应的组件对象
import login from './components/account/login.vue';
import register from './components/account/register.vue';
import welcome from './components/welcome.vue';
import root from './components/root.vue';
//6、定义路由规则
var router1 = new vueRouter({
routes:[
{
path:'/'
,redirect:'/root/welcome'
}
,{
path:'/root'
,component:root
,children:[
{
path:'register'
,component:register
}
,{
path:'login'
,component:login
}
,{
path:'welcome'
,component:welcome
}
]
}
]
});
//7、初始化Vue对象
new Vue({
el:'#app'
//使用路由对象实例
,router:router1
,render:c=>c(App) //es6的函数写法，是goes to 语法
//上面的等价于render:function(create){create(App)}
});
index.html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<meta name="vireport" content="width=device-width,initial-scale=1,mininum-scale=1,maximum-scale=1,user-scalable=no"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
package.json源码：
{
"name": "csspackage",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 4009"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"css-loader": "^1.0.1",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-template-compiler": "^2.2.6",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.0"
},
"dependencies": {
"vue": "^2.5.17",
"vue-router": "^3.0.1"
}
}
webpack.config.js源码：
var htmlwp = require('html-webpack-plugin');
module.exports = {
entry:'./src/main' //指定打包的入口文件
,output:{
path:__dirname + '/dist'
,filename:'build.js'
}
,module:{
loaders:[
{
test:/\.css$/
,loader:'style-loader!css-loader'
}
,{
test:/\.scss$/
,loader:'style-loader!css-loader!sass-loader'
}
,{
test:/\.less/ //打包.less文件
,loader:'style-loader!css-loader!sass-loader!less-loader'
}
,{
test:/\.(png|jpg|gif|ttf)$/ //打包url请求的资源文件
,loader:'url-loader?limit=20000' //limit表示图片的大小为40k是临界值，小于20k的图片均被
// 打包到build.js中去，此时图片的显示就会很快，这是一个优化操作。
}
,{
test:/\.js$/ //将.js文件中的es6语法转换成es5语法
,loader:'babel-loader'
,exclude:/node_modules/ //nodejs依赖库中的js文件全部都不需要进行转换
}
,{
test:/\.vue$/ //解析.vue组件页面文件
,loader:'vue-loader'
}
]
}
,babel:{
presets:['es2015'] //配置将es6语法转换成es5语法
,plugins:['transform-runtime'] //这句代码就是为了解决打包.vue文件不报错
}
,plugins:[
new htmlwp({
title:'首页' //生成的页面标题
,filename:'index.html' //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，
,template:'index.html' //根据index.html这个模版来生成（这个文件请程序员自己生成）
})
]
};
运行结果
在控制台上运行下面指令启动项目：
npm run dev
运行结果如下：
由于这篇文章的源码是在之前文章源码的基础上拆分出来的，所以说这里就不用做过多的说明了，不明白的地方可以参考前面章节的部分。