Vue对sass的依赖

Vue对sass的依赖

①、首先安装依赖

$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev 

②、在需要用到scss的地方标注：

<style lang="scss"> </style>

整体项目目录

--build   
--config  
--dist   //npm run build 之后再生成的目录
--src  
  --components   // 存放组件
  --page    //页面组件，由vue-router引入
  --router  //路由
  --store   // 数据流管理
  main.js   //入口文件
  app.vue   //主组件 
--static   //静态文件目录
.babelrc    
.gitignore  //git忽略上传文件
index.html  //静态文件入口
package.json  //配置文件

main.js文件

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;
//开启debug模式
Vue.config.debug = true

new Vue({
  el: '#app',
  router, // 创建和挂载根实例。记得要通过 router 配置参数注入路由
  template: '<App/>',
  components: { App },
});

app.vue文件

app.vue是我们的主组件，所有页面都是在App.vue下进行切换的,app.vue在所有页面都有，通常将公用的组件放在里面

<template>
  <div id="app">
    <main-header></main-header>
    <mainSidebar/>
    <!-- Content Wrapper. Contains page content -->
    <router-view></router-view>
    <!-- /.content-wrapper -->
    <MainFooter/>
  </div>
</template>