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

一、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

          导入

           

          请求数据

            data(){

                return{

                }

            },

            created(){

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

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

                        })

            }

npm、gulp及vue脚手架插件安装指南。_第1张图片
图片发自App

你可能感兴趣的:(npm、gulp及vue脚手架插件安装指南。)