Question

我正在尝试在我的vue-cli项目中安装bootstrap-vue。我在这里读https://bootstrap-vue.js.org/docs：

Then, register BootstrapVue in your app entry point:

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
And import Bootstrap and BootstrapVue css files:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
Make sure to import the custom.scss file in your app entry point:

import './custom.scss'
Be sure to @import or define your custom variable values before including Bootstrap SCSS (bootstrap.scss), and include BootstrapVue SCSS (bootstrap-vue.scss) after that to ensure variables are set up correctly.

Place all of the SCSS @imports into a single SCSS file, and import that single file into your project. Importing individual SCSS files into your project will not share variable values and functions between files by default.

Webpack and Parcel support prepending the scss modules with tilde paths (~) when importing from a scss file:

// Webpack example
@import '~bootstrap';
@import '~bootstrap-vue';
// Parcel example
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/src/index.scss';
For more details how to configure asset loading and how modules are resolved, please consult the module bundlers documentation.

好吧，我需要把所有这些放到哪里？ xD Im对vue.js真的很新。 main.js是切入点吗？如果是这样，我需要把所有这些放在那里吗？这就是我的main.js样子：

import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import Routes from './routes'
import App from './App.vue'
import Vue from 'vue'
import './style/customColor.scss';
//import 'regenerator-runtime';

import store from "./store/store";
import { USER_ROLECHECK } from './store/actions/user'
import { REQ_ADMIN_ROLE } from "./utility/namespaces";
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(VueResource);
Vue.use(VueRouter);
Vue.config.devtools = true; //this line should be removed in the actual live build!

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
})

router.beforeEach((to, from, next) => {
  if(to.meta.reqAuth){
    if(store.getters.isAuthenticated){
      if(to.meta.reqAdmin){
        store.dispatch(USER_ROLECHECK, REQ_ADMIN_ROLE).then(() =>{
          next();
        }).catch(() =>{
          next({path: '/'})
        })
      }else{
        next();
      }
    }else{
      next({path: '/login'});
    }
  }else{
    next();
  }
})

new Vue({
  el: '#app',
   router,
   store,
  render: h => h(App),
})

我该如何更新它，集成才能正常工作？

Answer 1

是的，在pages/image/:id/:slug应用中，vue-cli文件就是您的应用main.js。

您需要在entry point中放置以下内容：

main.js

如果要使用import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Install BootstrapVue Vue.use(BootstrapVue) // Optionally install the BootstrapVue icon components plugin // Only needed if you want to use the bootstrap icons. Be aware these are currently in alpha Vue.use(IconsPlugin) // Import Bootstrap and Bootstrap-Vue css import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'，则需要创建一个新的SCSS（名称无关紧要）文件，将这两行放在其中

styles.scss

，然后将@import 'node_modules/bootstrap/scss/bootstrap'; @import 'node_modules/bootstrap-vue/src/index.scss';而不是styles.scss文件导入main.js：

css

“ Vue入口点”在哪里？

1 个答案: