1、当然我在这里不谈vue全家桶这样宽泛的概念，我会如数家珍的把主要的技术点一一列举 1vuecli搭建基本的vue项目骨架，脚手架工具 2sassloadernodesass我是使用的sass作为样式的预编译工具，两者缺一不可，大家也可以自行选择；安装如下包，sass是依赖于nodesass ，所以要安装nodesass npm install nodesass savedev npm install sassloader savedev#160#160找到build目录下的文件，在modulerules下增加如下；以 scss 为例， 在自己配的webpack，和vuecli23中配置全局样式引入 sassresourcesloader 也可以用来配置 less 确保packagejson有 nodesass ， sassloader ， styleloader 安装 sassresources；安装vuecli脚手架，安装代码为npm install g vuecli，我们在这里选择的是全局安装，安装完之后创建项目然后根据提示选择会否安装插件，如果安装则选择Yes，如果不安装则选择No，知道插件选择完成之后我们cd切换到项目。

2、安装完成新建src\router\indexts 新建src\views\Home\indexts 修改src\router\indexts 修改maints 修改src\Appvue 运行项目引用elementui，去官网抄修改src\views\Home\indexvue 因为我们要用到sass全新；1基础配置 安装环境安装成功就可以在项目中使用sass 全局注册scss配置 然后重新运行，就可使用 2换肤小案例最后看一下展示效果吧。

3、#160 #160 #160 #160 2#160在appvue中使用scss时，用scss的语法引入了该*scss文件 #160 #160 #160 #160 3 最终loader解析图片路径出错 需要先安装 nodesass及sassloader npm i；CLI service 即 @vuecliservice 开发环境的依赖，构建于 webpack 和 webpackdevserver，可用来serve 启服务编译构建 build 工程配置 css配置 webpack 等CLI 插件可以集成一些架包快速配置项目等项目创建，cd；可以使用 sassresourcesloader 参考官网 sassresourcesloader 如果使用vuecli，可以参考 vuecli自动化导入 这里以vuecli4为例，具体实现如下1首先，在scss中配置要导出的变量 2在vue文件导入变量并使用；安装 3x 版本的 Vue 脚手架输入 vue V 如果出现版本号，就说明安装成功脚手架安装成功之后，就可以通过脚手架创建vue项目了通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下使用；htmljscss文件甚至json数据都可以用它压缩，可以减小60%以上的体积webpack在打包时可以借助 compression webpack plugin 实现gzip压缩和我们正常创建项目相同，这里通过vuecli3脚手架进行创建。

4、1全局安装 vuecli npm install global vuecli 2创建一个基于 webpack 模板的新项目 vue init webpack myproject 3安装依赖 cd myproject$ npm install 4为了使用sass，我们需要安装sass的依赖包 npm；1 安装 npm install sassloader@600 nodesass savedev 2在build文件夹下的的rules里面添加配置 #160 #160 test \sass$，#160 #160 loaders #39style#39， #39cs。

5、51允许为vue组件的每个部分使用他的webpack loader，例如在style中使用sass，在template中使用Pug 2允许一个vue文件中使用自定义块，并对其运用自定义的loader链 3使用webpack loader将style，template中引用的资源当作6；下面就是在WebStorm设置SASS的File Watchers的步骤1 安装Ruby ，去这里下载，然后安装2 安装Sass 安装好Ruby后，打开CMD命令，输入gem install sass 注意这里有可能安装没反应或提示网络错误什么的解决办法是使用。