VueCli+SpringBoot（项目搭建、依赖引入、配置信息）（前端）一

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习数据库相关编程知识。下面本篇文章就来带大家聊聊《VueCli+SpringBoot（项目搭建、依赖引入、配置信息）（前端）一》，介绍一下MySQL、前端、Java、vue.js，希望对大家的知识积累有所帮助，助力实战开发！

一、Vue Cli搭建

一、需要安装node.js、VueCli
二、window+R cmd 
三、vue ui（可视化工具）

1、创建VueCli

2、选取创建的路径

3、配置信息

4、选择自己需要的默认配置，创建项目

二、引入axios、element ui

1、main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'                //引入element ui
import 'element-ui/lib/theme-chalk/index.css';    //引入element ui 样式
import axios from 'axios'                        //引入axios
import * as echarts from 'echarts'                //引入echarts

Vue.prototype.$echarts = echarts

//设置全局
Vue.prototype.$axios = axios                    

//使用element ui
Vue.use(ElementUI)        
                            
//阻止显示生产模式的消息
Vue.config.productionTip = false                

//axios切换生产环境和开发环境接口地址 this.$axios.get("/selectAll")
axios.defaults.baseURL = 'http://0.0.0.0:1313';        

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

2、package.json

serve：启动方式   npm run serve
build：打包方式     npm run build

3、vue.config.js

没有可以自己创建（与package.json同级）

module.exports = {
//关闭eslint验证
  lintOnSave: false,
  devServer:{
//设置端口号
    port:1314,
//解决 Vue 项目 invalid host header 问题disableHostCheck:true报错
    disableHostCheck: true,
    }
}

理论要掌握，实操不能落！以上关于《VueCli+SpringBoot（项目搭建、依赖引入、配置信息）（前端）一》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！