使用vue-cli脚手架搭建vue项目。（webpack）

注：本文不介绍vue语法。只是个从零搭建vue的demo。

1.首先是环境搭建。配置好node环境。全局安装vue，vue-cli.这里就不做介绍了。

2.使用vue-cli初始化项目。vueTemplate是项目名称。

vue init webpack vueTemplate

后面有一连串的输入，包括作者，项目头是否启用测试等。按照个人要求输入就好。

项目初始化完成后的项目目录如下：

3.启动服务  到项目目录下运行:    npm run dev

服务启动成功

在浏览器地址栏输入localhost:8080/。截图如上

4.修改路由配置。 项目默认的路径是“/”。在打包后运行也是“/”路径下的页面。

修改helloWorld.vue为login.vue

页面跳转可以在组件的方法中使用：     this.$router.push({ path: 'home' });

例如：登陆页面点击登陆验证完成后，跳转到首页。就可以使用该方法。以下是登陆的部分代码。我用的vue-resource代替ajax.不过vue官方推荐使用axios。

<template>
	<div id="containerBox">
		<div class="loginBox">
			<div>
				<label>用户名</label>
				<input id="name" v-model="username" type="text" />
			</div>
			<div>
				<label for="pwd">密码</label>
				<input id="pwd" :value="password" type="password" />
			</div>
			<div>
				<button id="login" @click='login()'>登录</button>
				<button id="reSet">重置</button>
			</div>
		</div>
	</div>
</template>
<script>
	import "../../static/css/common.css"
	import "../../static/css/login.css"
	import Vue from "vue"
	import VueResource from "vue-resource"
	Vue.use(VueResource);
	Vue.http.options.emulateJSON = true;
	export default {
		data() {
			return {
				username:'',
				password:''
			}
		},
		methods:{
			login : function() {
				this.$router.push({ path: 'home' });  //不走服务器直接跳转页面。
				var data = {
					username: this.username,       //数据双向绑定
					password: "f429ec54f354b72bed77a5c0afedecb91f347f479a09f74f4107592764b56d1c",
					version: '1.0'
				}
				var url = "http://192..../api/v1/login";
				
				this.$http.post(
					url,
					data,
				).then(function(res) {
					var resCode = res.body.errorCode;
					if (resCode == 200) {
						localStorage.setItem("token", res.body.data.token);
						localStorage.setItem(res.body.data.user, res.body.data.password);
						this.$router.push({ path: 'home' });
					} else if (resCode == 400) {
						alert("用户名或者密码错误");
					}
				}, function(err) {
					alert("服务器错误，请联系系统管理员！")
					console.log("err" + err);  
				})
			}
		}
	}
</script>

<style scoped>
</style>

5.链接形式的跳转。（router-link, router-view）

router-view是加载vue组件的容器。在app.vue中就有这个标签。   router-link会被vue解析成a标签实现跳转。例如下一个左侧菜单栏。 用router-link对应routes中的路径。app.vue中router-view就会加载相应的组件。

我写了一个头部组件（topBox.vue）和一个左侧菜单栏(leftBar.vue)。会贴左侧菜单栏代码以供参考。如有不对请在评论区指出。谢谢。

<template>
	<div id="leftContainer">
		<ul>
			<li><router-link id="home" to='/home'>首页</router-link></li>
			<li @mouseenter='barHover($event)' @mouseleave="barOut($event)">设备管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div>
				<ul style="display:none;">
					<li>设备分组</li>
					<li>设备列表</li>
				</ul>
			</li>
			<li><router-link id="member" to='/member'>素材管理</router-link>
			</li>
			<li @mouseenter='barHover($event)' @mouseleave="barOut($event)">发布管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div>
				<ul style="display:none;">
					<li>节目管理</li>
					<li>任务管理</li>
					<li>模板</li>
				</ul>
			</li>
			<li @mouseenter='barHover($event)' @mouseleave="barOut($event)">人员管理<div :style='{display:show}' @click="displayChild($event)" class="dropdown"></div>
				<ul style="display:none;">
					<li>设备分组</li>
					<li>设备列表</li>
				</ul>
			</li>
			<li>系统设置</li>
			<li>日志管理</li>
			<li>消息管理</li>
		</ul>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				show:'none'
			}
		},
		methods: {
			barHover: function(e) {
				var firstChild = e.target.firstElementChild;
				firstChild.style.display = 'inline-block';
			},
			barOut : function(e) {
				var firstChild = e.target.firstElementChild;
				if (firstChild.className  == 'dropdown') {
					firstChild.style.display = 'none';
				}
			},
			displayChild : function(e) {
				var target = e.target;
				var parent = target.parentElement;
				var ul = parent.getElementsByTagName('ul')[0];
				var display = ul.style.display;
				if ('block' ==display) {
					ul.style.display = 'none';
					target.setAttribute('class', 'dropdown');
				} else {
					ul.style.display = 'block';
					target.setAttribute('class', 'dropup');
				}
			}
		}
	}
</script>
<style scoped>
	#leftContainer {
		display:inline-block;
		float:left;
		height: -webkit-calc(100% - 70%);
		height: -moz-calc(100% - 70px);
		height:calc(100% - 70px);
		width: 10.4%;
		background-color:#0d1554;
		color:#FFF;
		font-size : 1.25rem;
	}
	ul li {
		height: auto;
		min-height:50px;
		padding: 10px 0 0 30px;
		border-bottom: 1px solid #160254;
		list-style: none;
	}
	.dropdown {
		margin-left: 15px;
		display:inline-block;
		width:20px;
		height:10px;
		background:url(../../static/img/triangle.png) 0 50% no-repeat;
		background-size: 20px 10px;
	}
	.dropup {
		-webkit-transform: rotate(180deg);
		-moz-transform:rotate(180deg);
		transform:rotate(180deg);
		margin-left: 15px;
		display:inline-block;
		width:20px;
		height:20px;
		background:url(../../static/img/triangle.png) 0 50% no-repeat;
		background-size: 20px 10px;
	}
</style>

样式代码就不贴了。整体的运行结果截图如下：

点击登录条状到首页，如下。头部和左侧都是组件的形式写入

6.项目打包。在package.json的scripts对象中添加    如下代码："pack" : "webpack --config build/webpack.prod.conf.js"

这表示在生产模式下打包，如果把webpack.prod.conf.js改成webpack.dev.conf.js是在开发模式下打包。在开发模式下打包app.js是不分割的。会很大。不利于首屏加载。

然后加载dist页面下的index.html是白屏。是因为  app.js加载路径的问题。webpack.base.conf.js中output中输出的publicPath是“/”。改为“./”就可以正常加载了。注：这个修改是用配置文件的在config目录下的index.js文件中修改assetsPublicPath: './',

7.至此打包就已经完成了。只是个简单的demo。如果不对请在评论区指出，谢谢。