vue+muse-ui+element-ui+bootstrap-vue搭建学习
Vue
版本升级
如果你当前版本是 2.x 3.x
卸载
npm uninstall -g vue-cli
升级
npm install npm -g
npm install -g @vue/cli
查看版本
vue -V
show：@vue/cli 4.5.9
创建vue项目
vue create my-vue-project
安装bootstrap模块
yarn add bootstrap-vue bootstrap
安装element-ui模块
yarn element-ui
安装muse-ui模块
yarn add muse-ui
配置main.js
| import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import MuseUI from 'muse-ui'; import 'muse-ui/dist/muse-ui.css';
Vue.use(BootstrapVue) Vue.use(ElementUI) Vue.use(MuseUI);
Vue.config.productionTip = false
new Vue({ router, store, render: function (h) { return h(App) } }).$mount('#app')
|
配置index.html
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"/> <title>bootstrapvue-demo</title> </head> <body> <div id="app"></div> </body> </html>
|
坑：muse-ui部分组件引入不显示icon，在index.html引入
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css"/>
后解决