一. 常用cmd命令
切換盤符 盤名:
d：切換到d盤
c：切換的c盤cd 切換目錄命令
cd / 切換到根目錄
cd ../ 切換到上一級目錄
cd 目錄名/目錄名 切換到子目錄其他
dir 顯示當(dāng)前目錄的文件和文件夾列表
md 文件夾名 創(chuàng)建目錄
rd 文件夾名 刪除目
cls 清除屏幕
↑ ↓ 上一次命令/下一個命令
ipconfig 查看當(dāng)前ip
ping 網(wǎng)絡(luò)地址 查看當(dāng)前電腦和服務(wù)的連接情況
ctrl+c 停止當(dāng)前正再運行中的命令
二 .node.js的安裝
- 官網(wǎng)下載node.js，安裝路徑自己設(shè)置派草，一路下一步install到完成
- cmd命令窗口輸入
node -v ----------- 查看node版本
npm -v --------------查看npm版本
有版本號為安裝成功
三 . npm和cnpm的安裝與配置
全局配置：https://www.cnblogs.com/biehongli/p/12756256.html
問題:
在安裝npm時，可能根據(jù)某個網(wǎng)上教程設(shè)置了npm安裝包的全局配置與緩存：
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
運行npm命令時報錯【讀寫權(quán)限問題導(dǎo)致等】，恢復(fù)下默認(rèn)配置怎么辦呢？
解決辦法：
刪除X:\Users\用戶名.npmrc整個文件 或者 文件下對應(yīng)的配置：
prefix =C:\Program Files\nodejs\node_global
cache =C:\Program Files\nodejs\node_cache
1. npm（node.js自帶的插件管理器）
cd/ --------------切換到根目錄
md learn -------------- 創(chuàng)建一個learn
cd learn ----------進入learn文件夾
npm init -------------- 初始化項目命令++回車到頭
yes ------------- 初始化項目完畢
npm install jQuery -S ----------- 安裝下載jquery -S開發(fā)環(huán)境依賴
npm install less -D ------------開發(fā)環(huán)境下安裝less
package.json --------------項目配置文件（不能寫注釋，最后一個值不能有,）
——————————————————————————————————
注：
npm install 包名 -D 安裝開發(fā)環(huán)境依賴包
npm install 包名 --save-dev
npm install 包名 -S 安裝運行環(huán)境依賴包
npm install 包名 --save
——————————————————————————————————
npm remove 包名 卸載某個依賴包
比如：
npm remove jQuery 卸載jquery
npm install -g 包名 全局安裝包
2. 補充
npm root 查看安裝包目錄
npm root -g 查看全局安裝目錄
npm list 查看安裝包列表
npm list --depth=1 查看安裝包列表指定層級為1
npm update 包名 更新一個包（插件）
npm install 包名@版本名稱 指定安裝某個版本的包
npm install jquery@2.1 指定在2.1版本安裝jquery
npm install 重新下載項目的所有依賴包（package.json規(guī)定）
文件夾催束，文件名接受
dist 項目生成目錄
src 項目源文件目錄
package.json 項目配置文件
.js 未壓縮的js文件
.min.js 壓縮過的js文件
.map 錯誤映射文件
npm 包管理機制
x.y.z
z 錯誤補丁
y 不破壞更新
x 有破壞性大版本更新
npm 更新機制 更新 范圍不會操作當(dāng)前范圍大版本
jquery2.1.1版本更新 不會操作2這個大版本
npm ^代表的版本限定
3. cnpm安裝與配置
npm install -g cnpm --registry=https://registry.npm.taobao.org ----------全局安裝cnpm
npm install -g 包名
npm install -g cnpm 全局安裝cnpm
全局安裝：安裝的包能在整個電腦上使用
本地安裝：安裝的包只能在當(dāng)前項目使用
4. 名詞解釋和注意
什么是npm 是node自帶的包（插件）管理器，下載器
全局：安裝的包可以在電腦的任何項目中使用
本地：安裝的包 只能在當(dāng)前項目中使用
開發(fā)環(huán)境依賴包：不會被打包上傳
運行環(huán)境依賴包：會被打包上傳
cnpm 中國版的npm
作用：下載速度快
建議：用npm就一直使用npm 伏社，用cnpm就一直使用cnpm 不建議一會用npm安裝抠刺，一會用cnpm安裝。
當(dāng)大家做項目時候出現(xiàn)了一些莫名其妙的問題摘昌，你都可以嘗試刪除node_modules
目錄讓后 再從cmd進入到項目目錄執(zhí)行 npm install 重新安裝依賴包, 當(dāng)項目拷貝給其他同事時候速妖，也需要刪除node_modules目錄在拷貝保留(package.json)，
對方拿到項目文件聪黎，執(zhí)行npm install 可以重新安裝
5. 項目目錄結(jié)構(gòu)與項目移植
| 名稱 | 解釋 |
|---|---|
| node_modules | 項目的依賴包地址罕容，打包發(fā)給別人是刪除，使用時可進入cnpm安裝目錄（如c:/learn）通過npm(cnpm) install 進行下載 |
| jquery | jquery目錄結(jié)構(gòu) |
| dist | dist項目生成好的目錄 |
| external | 擴展 |
| src | 項目的源文件目錄 |
| package.json | 項目的配置json |
| README.md | readme.md項目的說明文檔 |
四 . yarn安裝與配置
（快速可靠安全的Javascript包管理工具）
cnpm install -g yarn---------安裝yarn
yarn -v ------------查看yarn版本
cd /
md ytext ----------根目錄創(chuàng)建項目
cd ytext -----------進入項目目錄
安裝
?? yarn add 包名
?? yarn add jquery
開發(fā)環(huán)境依賴
?? yarn add 包名 --dev
?? yarn add less --dev
yarn global add echarts ------------全局安裝
yarn remove jquery --------------移除
yarn init -------------------初始化
yarn upgrade 包名 ------------------更新
yarn upgrade -latest [pkg-name]----將包更新到最新版----如：yarn upgrade -latest jquery
yarn upgrade [pkg-name]@ver----yarn upgrade jquery@3.0.0----將包更新到指定版本
五 . vue-cli 腳手架安裝與配置
cnpm install @vue/cli -g ---------------全局安裝vue-cli
cd / ---------------切換到根目錄
vue -V ---------------查看vue的版本
vue create myvue +回車到頭 -----------創(chuàng)建一個myvue(項目名)的項目[注意安裝路徑]
cd myvue --------------切換到myvue的項目目錄
yarn serve/npm run serve --------------啟動項目
瀏覽器輸入：http：localhost：8080 查看項目
六 . 文件夾解釋
-
myvue
vue-cli 項目目錄結(jié)構(gòu) -
src
src.jpg
七 . 啟動vue開始項目和擴展
-
Vue 項目運行 cmd
- cd 到項目目錄 cd /myvue
- npm run serve 啟動項目
- http://localhost:8080/地址
-
Vscode
- 打開我們的項目文件夾
- ctrl + ~ 打開終端
- cd /myvue 進入myvue文件夾
- npm run serve 啟動項目
- http://localhost:8080/ 地址
-
Vscode 插件
- Vetur ----------語法提示
- Vue2 Snippets ----------快捷鍵
4.Swiper插件的安裝
-cd /myvue ----------進入myvue文件夾
-cnpm install swiper -S -------------安裝swiper插件
import Swiper from 'swiper'
// import "swiper/css/swiper.css" （window）
import 'swiper/swiper-bundle.css' （Mac寫法）
// 導(dǎo)入node_modules里面的 swiper文件夾 Swiper類
// 導(dǎo)入node_modules里面的 swiper/css/文件夾里面的swiper.css
創(chuàng)建實例
mounted(){
// 當(dāng)頁面初始渲染完畢執(zhí)行
this.swiper = new Swiper(".swiper-container",{
loop:true,//自動讓最后一張的下一張是第一張
pagination:{
el:'.swiper-pagination'//小點指示器
}
});
}
