【Vue环境】1--项目开发前环境配置

一. 常用cmd命令

1. 切换盘符 盘名:
   d：切换到d盘
   c：切换的c盘

2. cd 切换目录命令
   cd / 切换到根目录
   cd ../ 切换到上一级目录
   cd 目录名/目录名 切换到子目录

3. 其他
   dir 显示当前目录的文件和文件夹列表
   md 文件夹名 创建目录
   rd 文件夹名 删除目
   cls 清除屏幕
   ↑ ↓ 上一次命令/下一个命令

ipconfig 查看当前ip
ping 网络地址 查看当前电脑和服务的连接情况
ctrl+c 停止当前正再运行中的命令

二 .node.js的安装

1. 官网下载node.js，安装路径自己设置，一路下一步install到完成
2. 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 [email protected] 指定在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 [email protected]将包更新到指定版本

五 . 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 查看项目

六 . 文件夹解释

1. myvue

   
   
   vue-cli 项目目录结构

2. src

   
   
   src.jpg

七 . 启动vue开始项目和扩展

1. Vue 项目运行 cmd

   • cd 到项目目录 cd /myvue
   • npm run serve 启动项目
   • http://localhost:8080/地址

2. Vscode

   • 打开我们的项目文件夹
   • ctrl + ~ 打开终端
   • cd /myvue 进入myvue文件夹
   • npm run serve 启动项目
   • http://localhost:8080/ 地址

3. 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'//小点指示器
            }
        });
    }