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>