VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一

发布时间:2023-04-24 08:00

一、Vue Cli搭建

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

1、创建VueCli

\"VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一_第1张图片\"

2、选取创建的路径

\"VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一_第2张图片\"

3、配置信息

\"VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一_第3张图片\"

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

\"VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一_第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

//设置全局
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

\"VueCli+SpringBoot(项目搭建、依赖引入、配置信息)一_第5张图片\"

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,
    }
}

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号