一浪藻、npm
npm:是一款基于nodeJS的JavaScript包管理工具
1捐迫、全局安裝
npm install -g [name]
2、局部安裝
npm install [name]? ? (臨時(shí)安裝,不會(huì)在package.json中留下記錄)
npm install --save-dev [name]? ? (會(huì)在package.json中留下記錄爱葵，方便下載施戴，適用于開(kāi)發(fā)時(shí)所用的工具插件)
npm install --save [name]? ? (會(huì)在package.json中留下記錄，方便下載萌丈，適用于發(fā)布時(shí)所用的插件)
無(wú)論安裝gulp還是vue腳手架之前都得先安裝nodejs
二赞哗、gulp
什么是gulp：gulp是一款集代碼壓縮，混淆辆雾，拼寫(xiě)檢查肪笋，編譯，圖片壓縮
等功能的前端項(xiàng)目自動(dòng)化構(gòu)建工具度迂。
安裝和使用步驟：
(注：如果npm安裝報(bào)錯(cuò)或者過(guò)慢藤乙，可以使用cnpm安裝，安裝cnpm去百度搜索淘寶鏡像里邊有方法）
1.全局安裝 ：目的是使計(jì)算機(jī)識(shí)別gulp命令操作
? npm install -g gulp
檢測(cè)是否安裝成功 可以輸入 "gulp -v" 查看版本
2.局部安裝 ：目的是添加項(xiàng)目依賴(lài)
? 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文件 ,依賴(lài)于node-sass)
node-sass
gulp-plumber? (檢查js惭墓，html語(yǔ)法拼寫(xiě))
gulp-rename? (文件重命名)
browser-sync? (帶自動(dòng)刷新頁(yè)面的一個(gè)集成服務(wù)器)
4.配置gulpfile.js
5.在命令行輸入 gulp 來(lái)啟動(dòng)項(xiàng)目
6.ctrl + c結(jié)束運(yùn)行
對(duì)于已有配置的項(xiàng)目坛梁，拿到src目錄，gulpfile.js,package.json后在項(xiàng)目目錄下诅妹，命令行輸入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送丰、新建文件夾 在文件夾內(nèi)部打開(kāi)黑窗口命令 Shift+鼠標(biāo)右鍵
7、vue init webpack 安裝webpack弛秋，安裝過(guò)程在下邊
安裝插件
8器躏、npm i ... --save-dev 安裝其他插件
9、npm i less less-loader --save安裝less
10蟹略、npm i axios vue-axios 安裝axios（請(qǐng)求數(shù)據(jù)登失，請(qǐng)求方法在下邊)
11、npm i vuex 安裝vuex
12挖炬、npm i element-ui -s 安裝element ui（布局插件）PC端
? ? ? npm i mint-ui（移動(dòng)端）
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 頁(yè)面滑動(dòng)開(kāi)關(guān)
拷貝項(xiàng)目：
1膛虫、src
2、static
3钓猬、package.json?
拷貝之后直接運(yùn)行cnpm i安裝node_modules
（注：如果報(bào)錯(cuò)是缺少modules里的任意一個(gè)模塊都可以把node_modules刪除重新安裝稍刀，安裝方法如上。）
安裝webpack
? ? Generate project in current directory?（ yes ）
? ? 是否在當(dāng)前文件夾中生成項(xiàng)目
? ? Project name （選填）
? ? 項(xiàng)目名稱(chēng)
? ? Project description （選填）
? ? 項(xiàng)目描述
? ? Author （選填）
? ? 作者名
? ? Install vue-router敞曹？（ yes ）（可選）
? ? 是否安裝路由
? ? Use ESlint to lint your code? （ no ）
? ? 是否開(kāi)啟es語(yǔ)法檢測(cè)的嚴(yán)格模式
? ? Set up unit tests
? ? 建立單元測(cè)試
? ? Setup e2e tests with Nightwatch （ no ）
? ? 設(shè)置e2e測(cè)試
? ? 回車(chē)账月。。澳迫。
? ? （可選）出現(xiàn)[.......]進(jìn)度條,是用npm下載
? ? ? ? 可選擇Ctrl+c 停止當(dāng)前下載
? ? ? ? 切換成cnpm i 來(lái)下載
? ? ? ? 最后用npm run dev 指令來(lái)完成項(xiàng)目啟動(dòng)(縮寫(xiě) npm start)
axios 專(zhuān)門(mén)用于數(shù)據(jù)請(qǐng)求
? ? ? ? npm i axios --save 安裝axios
? ? ? ? ? 導(dǎo)入
? ? ? ? ? ? <script>
? ? ? ? ? ? ? ? ? ? import axios from 'axios'
? ? ? ? ? ? </script>
? ? ? ? ? 請(qǐng)求數(shù)據(jù)
? ? ? ? ? ? data(){
? ? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? created(){
? ? ? ? ? ? ? ? axios.get('static/json/gjf.json')
? ? ? ? ? ? ? ? ? ? ? ? .then((res)=>{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(res.data)
? ? ? ? ? ? ? ? ? ? ? ? }）
? ? ? ? ? ? }
