vue界面

vue 中使用各种组件美化界面

1. element 引用

• npm install element-ui --save
• main.js中

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI);

2. vue中使用

  <el-collapse v-model="mode" accordion>

 	<el-collapse-item title="正常模式" name="base">
 	</el-collapse-item>
 	</el-collapse>

3 bootstrapvue 使用

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

4. css 优先级问题
   加 !important 强制使用 简单粗暴

.list-group-item{
    border: 0px !important;
  }

5. vue 配置代理

vue.config.js

module.exports = {
    devServer: 
        {
            proxy: {
                '/api': {
                    target: 'http://127.0.0.1:5000',
                    secure: false,
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
};