vue + webpack + node + yarn + less + scss 项目环境搭建

一、安装node环境和安装yarn环境

　　1、下载地址为：https://nodejs.org/en/

　　2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

            node -v          npm -v （npm ，yarn包管理工具）

　　3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像；检查是否安装成功：cnpm -v

　　

       4、yarn的中文文档地址 https://yarnpkg.com/zh-Hans/docs  yarn的安装 https://yarnpkg.com/zh-Hans/docs/install
       5、yarn命令的基本使用，与npm的使用一致，会有细微的差异。https://yarnpkg.com/zh-Hans/docs/cli/

二、搭建vue项目环境

　　1、全局安装vue-cli        npm install --global vue-cli

             本地安装                  npm install --save-dev vue-cli

　　

　　2、进入你的项目目录，创建一个基于 webpack 模板的新项目 vue init webpack + 项目名

　　　　

　　说明：

　　　　Vue build ==> 打包方式，回车即可；

　　　　Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

　　　　Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

　　　　Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

　　　　Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；

　　3、进入项目：cd vue-demo，安装依赖 -- npm install、cnpm install、 yarn install(yarn)

             安装成功后，项目文件夹中会多出一个目录：node_modules。

       4、npm run dev（yarn run dev），启动项目；解决vue不能自动打开浏览器的问题

            config  ==> index.js  ==> module.exports ==> dev ==> autoOpenBrowser: false ==> autoOpenBrowser:true

       5、为了避免端口8080冲突，可以修改端口  config ---- index.js ---- module.exports ---- dev ---- port

三、编写less

　　1）安装less依赖：npm install less less-loader --save

       2）安装成功之后，可在package.json中看到，多增加了2个模块：

            

     3）编写less

           

三、webpack配置sass模块的加载

  1）安装sass的依赖包, sass-loader依赖于node-sass；css-loader和style-loader也是必须的依赖包

        npm install css-loader  style-loader sass-loader node-sass --save-dev

　　 css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；

        style-loader将所有的计算后的样式加入页面中；

   2）sass的使用方法如下

        引入外部样式：import '../../css/test.scss'   require('../../css/test2.scss');

       在.vue文件中使用  <style lang="sass"> //sass语法样式 </style>