一、npm

npm:是一款基于nodeJS的JavaScript包管理工具

1、全局安装

npm install -g [name]

2、局部安装

npm install [name]    (临时安装,不会在package.json中留下记录)

npm install --save-dev [name]    (会在package.json中留下记录，方便下载，适用于开发时所用的工具插件)

npm install --save [name]    (会在package.json中留下记录，方便下载，适用于发布时所用的插件)

无论安装gulp还是vue脚手架之前都得先安装nodejs

---

二、gulp

什么是gulp：gulp是一款集代码压缩，混淆，拼写检查，编译，图片压缩

等功能的前端项目自动化构建工具。

安装和使用步骤：

(注：如果npm安装报错或者过慢，可以使用cnpm安装，安装cnpm去百度搜索淘宝镜像里边有方法）

1.全局安装 ：目的是使计算机识别gulp命令操作

  npm install -g gulp

检测是否安装成功 可以输入 "gulp -v" 查看版本

2.局部安装 ：目的是添加项目依赖

  npm install --save-dev gulp

3.安装插件

  npm install --save-dev [name]

常用基于gulp的插件

gulp-uglify  （压缩,丑化js）

gulp-minify-css (压缩css)

gulp-htmlmin  (压缩html)

gulp-imagemin (压缩图片文件)

gulp-sass    (编译处理sass文件 ,依赖于node-sass)

node-sass

gulp-plumber  (检查js，html语法拼写)

gulp-rename  (文件重命名)

browser-sync  (带自动刷新页面的一个集成服务器)

4.配置gulpfile.js

5.在命令行输入 gulp 来启动项目

6.ctrl + c结束运行

对于已有配置的项目，拿到src目录，gulpfile.js,package.json后在项目目录下，命令行输入npm install

三、vue脚手架及插件安装

1、安装node.js （64位和32位）

2、node -v 查看是否成功

3、安装npm淘宝镜像 全局安装 npm install

4、npm -v 查看版本是否成功

5、npm install -g vue-cli 全局安装vue脚本架

6、新建文件夹 在文件夹内部打开黑窗口命令 Shift+鼠标右键

7、vue init webpack 安装webpack，安装过程在下边

安装插件

8、npm i ... --save-dev 安装其他插件

9、npm i less less-loader --save安装less

10、npm i axios vue-axios 安装axios（请求数据，请求方法在下边)

11、npm i vuex 安装vuex

12、npm i element-ui -s 安装element ui（布局插件）PC端

      npm i mint-ui（移动端）

13、npm i sass-loader --save-dev

      npm i node-sass --save-dev

      安装sass

14、npm install vue-awesome-swiper --save 安装swiper（轮播图插件）

15、npm install vue-lazyload 图片懒加载

16、npm install vue-scroller 页面滑动开关

拷贝项目：

1、src

2、static

3、package.json 

拷贝之后直接运行cnpm i安装node_modules

（注：如果报错是缺少modules里的任意一个模块都可以把node_modules删除重新安装，安装方法如上。）

---

安装webpack

    Generate project in current directory?（ yes ）

    是否在当前文件夹中生成项目

    Project name （选填）

    项目名称

    Project description （选填）

    项目描述

    Author （选填）

    作者名

    Install vue-router？（ yes ）（可选）

    是否安装路由

    Use ESlint to lint your code? （ no ）

    是否开启es语法检测的严格模式

    Set up unit tests

    建立单元测试

    Setup e2e tests with Nightwatch （ no ）

    设置e2e测试

    回车。。。

    （可选）出现[.......]进度条,是用npm下载

        可选择Ctrl+c 停止当前下载

        切换成cnpm i 来下载

        最后用npm run dev 指令来完成项目启动(缩写 npm start)

axios 专门用于数据请求

        npm i axios --save 安装axios

          导入

            <script>

                    import axios from 'axios'

            </script>

          请求数据

            data(){

                return{

                }

            },

            created(){

                axios.get('static/json/gjf.json')

                        .then((res)=>{                                                  console.log(res.data)

                        }）

            }

npm、gulp及vue脚手架插件安装指南。