vue-cli+webpack构建vue项目和使用sass报错填坑

1、安装 vue-cli

一、首先须要安装node和npm

　　不作过多讲解，能够参考 http://www.javashuo.com/article/p-dqqlkabt-kw.html 安装

二、使用npm安装npm-cli

　　打开要建项目所在的文件夹，点击空白处按住 shift + 鼠标右键，打开 Powershell窗口进行接下来的操做

　　

 

　　由于在指定文件夹打开，所以不用再选择路径，可直接输入命令，

 　　输入命令安装npm -cli：npm install --global vue-cli

　　

 

 

2、生成项目模板

一、vue init webpack vuedemo

　　其中webpack是模板名称，由于是须要webpack的打包功能；

　　vuedemo是项目名称；

二、构建过程：

　　　Project description :项目描述　　y

　　　Author: 做者　　y

　　　Vue build：打包方式（建议选择第二个）　　y　　

　　　install vue-loader　　y

　　　Use ESLint TO lint your code? 是否使用ESL代码检测　　n

　　　Pick an ESLint preset?  standard 　　　n

　　　Setup unit tets with Kara + mocha?  是否安装单元测试　　n

　　　Setup e2e tests with Nightwatc? 是否安装e2e测试 　　n

三、cd vuedemo 进入到项目当中

四、安装依赖库：

　　　npm install 

五、启动项目：

　　　npm run dev

　　　到这里操做无误的话是能够正常启动，以后就是踩坑：：：：）

3、使用sass/scss工具，安装依赖

一、安装依赖

　　若是是 常规 的，执行 npm install style-loader css-loader style-loader --save-dev 安装依赖就行。

　　若是是 less 的，执行 npm install less less-loader --save-dev 安装依赖就行。

　　若是是 sass 的，执行 npm install sass sass-loader --save-dev 安装依赖就行。

　　若是都用，能够所有安装，可是在安装sass要注意版本问题！！！！！！

　　由于sass版本太高，会报错：（this.getResolve is not a function）

　　

 

二、解决方法：npm install sass sass-loader@6.0.6

　　能够在安装时加上@符号选定版本：

　　

　　可是运行项目后发现，还会报错：

　　

 

三、此时，能够根据提示安装依赖： npm install node-sass

　　

 

4、安装后启动项目，问题解决！！