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