备注：利用hbuilderx新创建一个vue-cli3项目所需要做的事情

1.创建Vue cli3的核心配置文件vue.config.js

/**
 * 	Vue cli的核心配置文件
 */
const webpack = require("webpack");

module.exports = {
	
	// 引入bootstrap样式
	configureWebpack:{
		plugins:[
			new webpack.ProvidePlugin({
				$: "jquery",
				jQuery: "jquery",
				"window.jQuery": "jquery",
				Popper:["popper.js", "default"]
			}),
		]
	},
    devServer: {
		open: true,		//自动打开浏览器
		// disableHostCheck: false,
		host: "localhost",
		port: 8081,
		https: false,
		// hotOnly: false,
		
		// 静态资源文件夹
		// assetsSubDirectory: 'static',
		
		// 发布路径
		// assetsPublicPath: '/',		这里有错
		
		// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
		// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
		// 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
		proxy: {
			'/api': {
				target: 'http://localhost:8080', // 接口的域名
				// secure: false,  // 如果是https接口，需要配置这个参数
				changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
				pathRewrite: {
					'^/api': ''
				}		
			}
		},
        
    },
};

2.创建路由对象模块：在src文件夹下新建文件夹router，再在文件夹router下新建index.js文件

/**
 * 路由对象模块
 */
import Vue from 'vue'
import Router from 'vue-router'

//导入.vue文件
import show from '../components/show.vue'
import login from '../components/login.vue'

Vue.use(Router)
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return routerPush.call(this, location).catch(error=> error)
}

export default new Router({
  routes: [
    {
		path: '/show:comcode',		//显示mapped页面
		component: show,
		meta: {  // 需要判断是否登录的路由添加字段
			requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
		},
		
	},
	{
		path: '/',		//登录页
		component: login,
	},
	

  ],
  //干掉地址栏里边的#号键
  mode:"history"
})

3.在main.js里引入router路由，并且导入vue的axios和qs

import VueResource from 'vue-resource'
import router from './router'	//引入路由

//导入element ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//导入jQuery
import $ from 'jquery'

//前后端传输
import axios from 'axios'
import qs from 'qs';
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
Vue.use(VueResource);

//服务器地址
//部署环境(开发的时候注释掉)
// axios.defaults.baseURL = 'http://9.33.91.144:8080/human'
//开发环境
axios.defaults.baseURL = 'http://localhost:8080'
//我自己部署的话
// axios.defaults.baseURL = 'http://localhost:8080/human'

new Vue({
	router,
	$,
	render: h => h(App),
}).$mount('#app')

安装element，npm i element-ui -S

npm install --save axios jquery vue-resource vue-router

4.修改app.vue文件

<template>
	<!-- <router-view /> -->
	<el-container>
		<el-header>
			<div>
				<img class="logo" src="./assets/headLogo.png" alt="" />
			</div>
			
			<!-- <el-dropdown>
				<span class="el-dropdown-link"></span>
			</el-dropdown> -->
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu default-active="2" class="el-menu-vertical-demo" style="text-align: left;" @open="handleOpen" @close="handleClose"
				 background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title">
							<i class="el-icon-location"></i>
							<span>导航一</span>
						</template>
						<el-menu-item-group>
							<el-menu-item >选项1</el-menu-item>
							<el-menu-item >选项2</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3" disabled>
						<i class="el-icon-document"></i>
						<span slot="title">导航三</span>
					</el-menu-item>
					<el-menu-item index="4">
						<i class="el-icon-setting"></i>
						<span slot="title">导航四</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<div style="width: 100%; background-color: aliceblue; height: 1000px;">
					<router-view />
				</div>

			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import index from './components/index.vue'
	export default {
		data() {
			return {
				//  左侧菜单数据
				menuList: [],
				// 隐藏左侧菜单
				isCollapse: false,
				// 用户名
				userinfo: {
					username: ""
				}
			}
		},
		methods:{
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>
<style scoped>
	.el-container {
		height: 100%;
	}

	.el-header {
		background-color: #F0F0F0;
		display: flex;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		color: #fff;
		font-size: 20px;
		border-bottom: 3px solid #009688;

		>div {
			display: flex;
			align-items: center;

			img {
				margin-left: 10px;
				height: 25px;
			}

			span {
				margin-left: 15px;
			}
		}
	}

	.el-aside {
		background-color: #333744;

		.el-menu {
			border-right: none;
		}
	}

	.el-main {
		background-color: #EAEDF1;
	}

	.toggle-button {
		background-color: #4A5064;
		color: #fff;
		font-size: 10px;
		line-height: 24px;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}

	.el-dropdown-link {
		cursor: pointer;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}
	
	.logo {
	  margin-left: 10px;
	  height: 25px;
	}
	
</style>

5.在src文件夹下新建css文件夹，再在css文件夹下新建global.css文件

/* 全局样式表 */
html,body,#app{
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: hidden;
	min-width: 1366px;
}

.el-breadcrumb{
	margin-bottom: 15px;
	font-size: 12px;
}
.el-card{
	box-shadow: 0 1px 1px rgba(0,0,0,0.15) ! important;
	margin-bottom: 100px;
}
.el-table{
	margin-top: 15px;
	font-size: 12px;
}

.el-pagination{
	margin-top: 15px;
}

在main.js文件里引入新建的css文件

//引入样式
import './css/global.css'

6.新建一个.vue文件

<template>
	<div>
		<el-card class="box-card">
		</el-card>
		
	</div>
</template>

<script>
</script>

<style>
</style>

6.可以修改 public 文件夹下 index.html 的 title
当做到这一步时，要先npm install下载包，才能npm run serve