一、Vue Cli搭建

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

1、创建VueCli

image.png

2、选取创建的路径

image.png

3、配置信息

image.png

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

image.png

二、引入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

image.png

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

LLL_
15 声望3 粉丝