搭建一个项目

新建空项目

在webstorem 上新建一个vue 项目

安装插件

 vue-router 

npm install vue-router

在项目中新建一个router 文件夹，包含了index.js ( 路由文件 )

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const routes = [    
    {        
        path: '/hello',        
        name: 'HelloWorld',        
        component: () => import('../components/HelloWorld')    
    }
];

// 路由的滚动行为
const scrollBehavior = () => {    
    return {x: 0, y: 0};
}
const mode = 'history';
const router = new VueRouter(
    {    
        mode,    
        routes,    
        scrollBehavior,
    }
)
router.beforeEach((to, from, next) => {    
    // TO DO something    
    next();
})
export default router

🎍：在router 文件夹下的index.js 中引入以上代码 ，在main.js 需要引入 router （ 就是 router-> index.js  中 export default router ）就可以

import router from './router'
new Vue(
    {  
        router,  
        render: h => h(App),
    }
).$mount('#app')

scss sass

npm install scss-loader scss --save-dev
npm install sass-loader sass --save-dev

bootstrap

npm install bootstrap

新建 style 目录， 包含 bt.scss,style.scss

bt.scss
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/bootstrap";

在单个vue文件中引入 bt .scss ，就可以在单独的页面使用 bootstrap 样式

main.js 

import './style/style.scss'  全局样式引入