webpack+vue 构建项目步骤并且使用sass 安装配置

1、官网先下载node.js 安装之后,cmd 运行 node -v npm -v 查看是否安装好

2、利用npm安装webpack  命令行语句： npm install webpack -g 安装完查看是否安装好 webpack -v

3、安装淘宝镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org

4、安装vue-cli脚手架构建工具 :  npm install -g vue-cli 

5、安装项目vue init webpack xxx

6、cd xxx

7、cnpm install 

8、npm run dev

如果需要使用sass配置如下：

安装sass的依赖包

cnpm install --save-dev sass-loader  //sass-loader依赖于node-sass

cnpm install --save-dev node-sass

在build文件夹下的webpack.base.conf.js的rules里面添加配置

{ test: /\.sass$/, loaders: ['style', 'css', 'sass']}

在APP.vue中修改style标签

<style scoped lang="scss">
    @import '../assets/scss/theme.scss';
    .map{background: $blueBgColor}

</style>

就可以使用.scss文件了