javascript - "vue entry point"在哪里？

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 我对 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

是的，在 vue-cli 应用程序中，main.js 文件是您的应用程序入口点。

您需要在 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';

然后在 main.js 中导入 styles.scss 而不是 css 文件:

// Replace these
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// With this
import './path/to/your/styles.scss'