一. 常用cmd命令
切换盘符 盘名:
d：切换到d盘
c：切换的c盘cd 切换目录命令
cd / 切换到根目录
cd ../ 切换到上一级目录
cd 目录名/目录名 切换到子目录其他
dir 显示当前目录的文件和文件夹列表
md 文件夹名 创建目录
rd 文件夹名 删除目
cls 清除屏幕
↑ ↓ 上一次命令/下一个命令
ipconfig 查看当前ip
ping 网络地址 查看当前电脑和服务的连接情况
ctrl+c 停止当前正再运行中的命令
二 .node.js的安装
- 官网下载node.js，安装路径自己设置，一路下一步install到完成
- cmd命令窗口输入
node -v ----------- 查看node版本
npm -v --------------查看npm版本
有版本号为安装成功
三 . npm和cnpm的安装与配置
全局配置：https://www.cnblogs.com/biehongli/p/12756256.html
问题:
在安装npm时，可能根据某个网上教程设置了npm安装包的全局配置与缓存：
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
运行npm命令时报错【读写权限问题导致等】，恢复下默认配置怎么办呢？
解决办法：
删除X:\Users\用户名.npmrc整个文件 或者 文件下对应的配置：
prefix =C:\Program Files\nodejs\node_global
cache =C:\Program Files\nodejs\node_cache
1. npm（node.js自带的插件管理器）
cd/ --------------切换到根目录
md learn -------------- 创建一个learn
cd learn ----------进入learn文件夹
npm init -------------- 初始化项目命令++回车到头
yes ------------- 初始化项目完毕
npm install jQuery -S ----------- 安装下载jquery -S开发环境依赖
npm install less -D ------------开发环境下安装less
package.json --------------项目配置文件（不能写注释，最后一个值不能有,）
——————————————————————————————————
注：
npm install 包名 -D 安装开发环境依赖包
npm install 包名 --save-dev
npm install 包名 -S 安装运行环境依赖包
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规定）
文件夹，文件名接受
dist 项目生成目录
src 项目源文件目录
package.json 项目配置文件
.js 未压缩的js文件
.min.js 压缩过的js文件
.map 错误映射文件
npm 包管理机制
x.y.z
z 错误补丁
y 不破坏更新
x 有破坏性大版本更新
npm 更新机制 更新 范围不会操作当前范围大版本
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
全局安装：安装的包能在整个电脑上使用
本地安装：安装的包只能在当前项目使用
4. 名词解释和注意
什么是npm 是node自带的包（插件）管理器，下载器
全局：安装的包可以在电脑的任何项目中使用
本地：安装的包 只能在当前项目中使用
开发环境依赖包：不会被打包上传
运行环境依赖包：会被打包上传
cnpm 中国版的npm
作用：下载速度快
建议：用npm就一直使用npm ，用cnpm就一直使用cnpm 不建议一会用npm安装，一会用cnpm安装。
当大家做项目时候出现了一些莫名其妙的问题，你都可以尝试删除node_modules
目录让后 再从cmd进入到项目目录执行 npm install 重新安装依赖包, 当项目拷贝给其他同事时候，也需要删除node_modules目录在拷贝保留(package.json)，
对方拿到项目文件，执行npm install 可以重新安装
5. 项目目录结构与项目移植
| 名称 | 解释 |
|---|---|
| node_modules | 项目的依赖包地址，打包发给别人是删除，使用时可进入cnpm安装目录（如c:/learn）通过npm(cnpm) install 进行下载 |
| jquery | jquery目录结构 |
| dist | dist项目生成好的目录 |
| external | 扩展 |
| src | 项目的源文件目录 |
| package.json | 项目的配置json |
| README.md | readme.md项目的说明文档 |
四 . yarn安装与配置
（快速可靠安全的Javascript包管理工具）
cnpm install -g yarn---------安装yarn
yarn -v ------------查看yarn版本
cd /
md ytext ----------根目录创建项目
cd ytext -----------进入项目目录
安装
yarn add 包名
yarn add jquery
开发环境依赖
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 +回车到头 -----------创建一个myvue(项目名)的项目[注意安装路径]
cd myvue --------------切换到myvue的项目目录
yarn serve/npm run serve --------------启动项目
浏览器输入：http：localhost：8080 查看项目
六 . 文件夹解释
-
myvue
vue-cli 项目目录结构 -
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写法）
// 导入node_modules里面的 swiper文件夹 Swiper类
// 导入node_modules里面的 swiper/css/文件夹里面的swiper.css
创建实例
mounted(){
// 当页面初始渲染完毕执行
this.swiper = new Swiper(".swiper-container",{
loop:true,//自动让最后一张的下一张是第一张
pagination:{
el:'.swiper-pagination'//小点指示器
}
});
}
