备注：利用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