Vue组件化京东金融项目实战详细笔记一：环境搭建

一、环境准备

1、nvm（Node版本管理工具）

windows版本：https://github.com/coreybutler/nvm-windows
安装过程中，你需要选择nvm的安装路径，和你node.js的安装路径，最终你要确定让nvm来管理你的node.js，基本就是傻瓜式安装

cmd窗口输入nvm即可看到信息，表示安装成功

常用命令（参考博客https://www.cnblogs.com/gaozejie/p/10689742.html）
所有命令都是在命令行窗口执行哦
显示所有可下载版本：nvm list available
安装指定版本，比如14.4.0版本：nvm install 14.4.0
使用指定版本：nvm use 14.4.0
卸载指定版本：nvm uninstall 14.4.0
显示node运行位数：nvm arch
nvm list：显示已安装的列表
nvm on ：开启node.js版本管理
nvm off ：关闭node.js版本管理
nvm proxy [url] ：设置下载代理。不加可选参数url，作用为显示当前代理。将url设置为none则移除代理
nvm node_mirror [url] ：设置node镜像。默认是https://nodejs.org/dist/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作
nvm npm_mirror [url] ：设置npm镜像。默认https://github.com/npm/cli/archive/。如果不写url，则使用默认url。设置后可至安装目录settings.txt文件查看，也可直接在该文件操作
nvm version ：显示nvm版本。version可简化为v

2、git

参考博客：https://blog.youkuaiyun.com/grd_java/article/details/106118542

3、webpack（重要）

参考博客：https://blog.youkuaiyun.com/grd_java/article/details/105397169

4、babel（重要）

参考文档:https://babeljs.cn/docs/usage/polyfill/
因为目前并不是所有浏览器都支持ES6语法，我们需要通过babel将ES6转换为ES5语法

5、需要预先掌握的知识体系

前端三件套（HTML5，CSS3，JavaScript）

VUE.js

Sass：https://blog.youkuaiyun.com/grd_java/article/details/106732583
直接百度Sass进入官网学习即可
Sass可以将Css定义为一个变量，让我们需要用的时候，引用变量即可

ES6：https://blog.youkuaiyun.com/grd_java/article/details/105384601

6、初始化构建代码

工程构建代码：GitHub：https://github.com/yingzhipeng/JDFinanceStart.git

下载代码后，使用 npm install安装依赖

你可能出错以下问题
Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod

使用此命令即可
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
然后在次使用npm install安装依赖

安装完成后使用npm start启动

二、git分支（方便我们及时切换分支，查看相应代码）

参考：https://www.jianshu.com/p/2e162b544878

我们用到的
git checkout <branch_name> #切换到指定分支
git checkout -b <branch_name> #创建并切换到指定分支
git branch <branch_name> #创建指定名称的分支
git branch #查看所有分支，* 号代表当前工作分支
git branch -v #查看分支详情，包括分支指向的commitId及提交信息

创建并切换到setup分支
git checkout -b setup

三、eslint代码检测插件（可选，如果你对自己有严格要求的话，建议打开，如果你对这些细节无所谓，就不要打开了）