VUE 学习 四 安装ElementUI bootstrap axios

安装ElementUI

一开始使用webstorm安装的，结果安装后，提示找不到

main.js

加入element

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

但是  import ElementUI from 'element-ui'  这里提示找不到，

后来通过npm安装

npm i element-ui -S          //element-ui  中间的- 是连字符 无空格

注意不是：npm i element    -ui -S  //一开始用的这个，结果运行，还是找不到，

运行上面的好了，不过提示

/index.css 找不到

查找：node_modules\element-ui\lib

路径已经改成theme-chalk了

于是，main.js这样修改就好了

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

 

安装bootstrap4

https://bootstrap-vue.js.org/

 

# With npm
npm install vue bootstrap-vue bootstrap

安装成功后，node_modules下会有



// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

自己项目的实例：

在main.js 添加

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)

 

安装 axios

npm install axios

main.js这么添加axios

 

import axios from 'axios' //引入
Vue.prototype.$axios = axios

vue中类似这样调用

 

但是 在运行时，出现了跨域问题

 

解决方法：

参考这篇文章

通过设置chrome浏览器解决跨域问题，在本地进行开发工作

 

 

首先创建本地一个目录

 

创建谷歌快捷方式，在属性-目标中 加上 --disable-web-security --user-data-dir=C:\MyChromeDevUserData

这样就允许跨域了