Skip to content

Latest commit

 

History

History
183 lines (160 loc) · 5.64 KB

开发环境.md

File metadata and controls

183 lines (160 loc) · 5.64 KB
Raw

mac 安装nvm

起初安装nvm失败，百度一下基本都是网络不好等原因，其实有一个很大的原因是因为，电脑里面node没有删除。

卸载node

依次输入下面命令卸载

$ sudo npm uninstall npm -g
$ sudo rm -rf /usr/local/lib/node /usr/local/lib/node_modules /var/db/receipts/org.nodejs.*
$ sudo rm -rf /usr/local/include/node /Users/$USER/.npm
$ sudo rm /usr/local/bin/node

安装nvm

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
$ nvm -version

nvm常见命令

nvm --help                          显示所有信息
nvm --version                       显示当前安装的nvm版本
nvm install [-s] <version>          安装指定的版本，如果不存在.nvmrc,就从指定的资源下载安装
nvm install [-s] <version>  -latest-npm 安装指定的版本，平且下载最新的npm
nvm uninstall <version>             卸载指定的版本
nvm use [--silent] <version>        使用已经安装的版本  切换版本
nvm current                         查看当前使用的node版本
nvm ls                              查看已经安装的版本
nvm ls  <version>                   查看指定版本
nvm ls-remote                       显示远程所有可以安装的nodejs版本
nvm ls-remote --lts                 查看长期支持的版本
nvm install-latest-npm              安装罪行的npm
nvm reinstall-packages <version>    重新安装指定的版本
nvm cache dir                       显示nvm的cache
nvm cache clear                     清空nvm的cache

使用范例

// 1. 安装 14.16.1 版本
$ nvm install 14.16.1
 
// 2. 查看版本
$ nvm ls
 
// 3. 切换版本
$ nvm use v14.16.1

vscode

安装某开发环境，如vue，可以使用插件中搜索vue extension pack，如node，node extension pack。就能安装所有的环境了。

真机调试

  • Chrome+Android/Safari+ios（原始）

    • Chrome+Android
      1. 在地址栏中输入：chrome://inspect/#device
      2. 安卓手机设置：进入开发者模式，打开开发者选项，打开保持唤醒与usb调试
      3. 使用同一个网络，手机访问，
      4. 在电脑中，点击inspect，注意打不开，查看手机和电脑chrome版本号，开起谷歌虚拟专有网络
    • Safari+ios
      1. 电脑的Safari的偏好设置中高级，把在菜单栏中显示开发勾选上
      2. 手机的设置中找到Safari，在高级中把web检查器打开
      3. 根据ifconfig查询到en0:192开头的ip，两端根据ip访问，
      4. 电脑的开发选项中，会找到自己的手机，点选后就会出现真机调试的窗口。

  • Fiddler/Charles（劫持类型工具，劫持数据请求，前面是window后面是mac）

  • Weinre,Spy-Debugger,vConsole（npm包，安装到项目，启动代理，手机上设置ip端口号，通过局域网访问服务，达到数据劫持和调试作用）

RESTful API

  • REST:表现层状态转译
    • 概念：资源（数据）某种表现形式，比如JSON,XML,JPGE等，状态变化，通过HTTP实现（get，post，delete,put等）
    • 特点：客户端到服务端，无状态可缓存，统一 接口 RESTful API 就是满足这REST风格特点的应用接口

常见接口测试

POSTMAN

下载app，创建一个Collection,可以创建多个requst

DOClever

YApi （mock数据）

可以创建项目，mock各种数据。

mock数据

模拟真实接口，虚拟业务场景
mock开发流程

  1. 前端定义接口
  2. 完成静态页面
  3. 完成ui交互
  4. 对接真实接口
  5. 页面/逻辑测试
  6. 线上部署

搭建mock服务 使用DOClever，在线下部署，根据github地址启动服务，或者使用docker

mock.js轻量也很好用

项目初始化&目录规范

Node环境安装

官方文档:http://nodejs.cn/

安装版本必须大于12.0,建议直接安装最新稳定版本

全局安装vue脚手架

安装方式:

npm install @vue/cli -g 
# or
cnpm install @vue/cli -g
#or
yarn global add @vue/cli

官方文档: https://cli.vuejs.org/zh/

如果你安装的是旧版本的vue-cli 需要提前卸载 npm uninstall vue-cli -g 或 yarn global remove vue-cli 然后在重新安装@vue/cli

版本查看

vue --version //目前4.x以上版本都支持创建项目

版本升级

npm update -g @vue/cli
# or
yarn global upgrade --latest @vue/cli

创建项目

vue create 项目名

通过vite创建项目

官方文档:https://vitejs.dev/ 创建项目

npm init @vitejs/app 项目名
# or
cnpm init @vitejs/app 项目名
# or
yarn create @vitejs/app 项目名

安装项目所需插件

# 安装项目生产依赖
yarn add vue-router@next vuex@next element-plus axios -S
# 安装项目开发依赖
yarn add sass -D

element-plus官网

VSCode安装插件

Eslint Vetur TypeScript Prettier

制定目录结构

  • dist打包目录
  • node-modules包
  • public公共文件
  • src
    • api 管理接口
    • assets 资源静态文件
    • components公共组件
    • config项目的配置,mockapi
    • router路由
    • store状态管理vuex
    • utils工具函数
    • views页面
    • App.vue
    • main.js
  • .gitignore
  • .env.dev三个环境变量
  • .env.test
  • .env.prod
  • index.html
  • package.json
  • vite.config.js vite官网配置
  • yarn.lock 锁住当前包的文件,保持install时包版本一样