使用bootstrapVue、element-ui搭建vue环境

第一步 vue基础环境

1、检查npm版本，升级版本

npm -v #查看版本

cnpm install npm -g #升级npm

npm install cnpm -g #升级or安装cnpm

2、创建vue项目

vue init webpack project #创建项目

cd project

cnpm install #使用淘宝镜像

cnpm run dev #运行项目

vue运行

第二步 引入bootstrap

1、打开vue项目中index.html，修改Responsive meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

2、运行命令安装bootstrap-vue

npm install vue bootstrap-vue bootstrap -S

3、app.js文件添加引用

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// bootstrap 组件
Vue.use(BootstrapVue)
// 图标组件插件
Vue.use(IconsPlugin)

4、可以直接引用组件

    <div>
      <b-button>Button</b-button>
      <b-button variant="danger">Button</b-button>
      <b-button variant="success">Button</b-button>
      <b-button variant="outline-primary">Button</b-button>
    </div>

strapboot-vue组件效果

bootstrap-vue 文档地址
https://bootstrap-vue.org/docs

第三步 引入element-ui

1、安装element-ui

cnpm i element-ui -S

2、main.js中引入引用

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

3、使用组件

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>

element-ui组件效果

element-ui 文档地址
https://element.eleme.cn/#/zh-CN/component/installation