前端 配置环境及个人推荐安装必备软件

环境配置

1. 安装 node 下载最新版本 自动配置好npm

2. 安装cnpmcnpm npm i cnpm -g

3. 镜像设置为淘宝镜像: npm config set registry https://registry.npm.taobao.org检测是否连接上淘宝镜像: npm config get registry

4. 安装nodemon 监控node源代码的更改

   1) 作用

   监控我们node源代码的更改，更改之后，重新在REPL环境中运行最新的代码

   2) 安装

   安装方式: npm i nodemon -g

   检测是否安装成功:nodemon -v

   3) 使用

   如何使用，它的使用方式和node一样，node如何用，它就如何用

   [code]node xxx.js
   nodemon xxx.js

   4) 注意点: 如果我们更改了代码，然后也保存了，发现不起作用，按一次CTRL + C

5. 安装webpack

   1) 全局安装webpacknpm i webpack webpack-cli -g

   2) 全局安装后，若当前项目需要设置webpack.config.js,还需要在当前目录再安装一次npm install webpack --save-devwebpack --version 检测版本是否安装成功

   3) 错误解决: 出现报错bash:webpack:command not found

   解决方案: 找到webpack.cmd的路径,一般是放置webpack的文件位置,我的是C:\Program Files\Git\usr\local

   复制该路径，把他配置到环境变量的用户变量的PATH中，我的是win7,右键我的电脑-->系统属性-->高级系统设置-->高级-->环境变量-->在系统变量(s)中选中Path,加分号";"(英文分号)粘贴到最后面,点击确认

6. 安装git

   https://git-scm.com/ 下载最新版本

7. 安装vue

   npm install vue -g

   vue --version 检查是否安装完成

8. 安装vue/cli

   1) 版本为3.0+

   npm install @vue/cli -g

   @vue/cli --version 检查是否安装完成

   创建3.x项目模板 cue create my_project

   2) 兼容版本2.0+

   先安装桥接工具 npm install -g @vue/cli-init

   创建2.x旧项目模板 vue init webpack my_project

9. 安装sass

   1) 安装ruby， 把ut8的选项务必勾选上

   2) ruby -v, 如果能够看到版本号， 说明 ruby已经成功

   3) gem install sass 安装sass

   4) gem install compass 安装compasss

   5) sass -v, 如果能够看到版本号，就说明，sass已经安装成功了

   6) 如果要切换盘符，cd /D F:\， /D代表的是盘（disk）

   问题

   a) ruby没有安装好， 重新ruby， 先卸载ruby unins000.exe, 再重新安装gem install compass 报错

   b) 先去cmd命令行测试，再到vscode测试

   c) cd 进入到某个文件夹， 如果要切换盘符， cd /D F:\， 按enter执行之后， 再输入cd 把文件夹拖进去

   d) 先进入到项目文件夹 sass目录所在的文件夹

   e) 执行监听的命令 sass --watch sass:css --style expanded

   f) 不要关闭命令行窗口

   g) 到vscode中, 需要拖动窗口， 把终端调出来。 sass -v, 看能不能打印出版本号， 如果可以就说明环境没问题了

10. 安装less

11. 安装postman

安装软件

1. snipaste.exe 桌面切图工具

2. notepad++

3. Typora(md)

4. mark man

5. ps(cc 2017)+cutterman(批量切图插件)

6. xmind

注: 接收建议,优化内容