前端基础开发环境安装与配置

前言

　　前端的东西越来越多，换台电脑就忘要配置啥，现在工作中大部分开发还是用vue，基于vue的环境配置。

1. 安装node环境
2. npm（修改淘宝镜像）
3. 安装webpack
4. 开发工具vscode或webstrom
5. 安装vue-cli
6. 关于sass(ruby环境编译sass, node-sass利用node编译sass)
7. 安装git
8. and其他工作学习过程中需要用到的

一、安装node环境

　　１、官网下载：node官网地址　点击下载安装适应版本即可。

　　２、安装完成后，可控制台输入node -v 或node --version，查看node.js是否安装好，安装好则会有版本提示。

　　

 

注意：如果电脑是win7，直接进去官网点击最新版本下载，会提示当前版本过高；

  Node.js is only supported on Windows 8.1, Windows Server 2012 R2, or higher. 

需要降级安装低版本的，网上有说在v12.16.2以上版本就不在支持window7系统，不过我选择的是v13.8.0也可以正确安装；

（1）安装好node以后，在nodejs文件夹下设置一下node_global和node_cache(node缓存文件夹)；

　在cmd 命令行中输入：

npm config set prefix "D:\xxxxx\nodeJs\node_global"

 

npm config set cache "D:\xxxxxx\nodeJs\node_cache"

　一般对于npm的安装分为本地安装和全局安装，如果是全局安装就会指定安装到node_global目录；

　　如果没有设置全局目录node_global，那么全局安装的文件将会保存到 C:\Users\xxxxx\AppData\Roaming\npm (xxxxx是自己设置的计算机名字)

（2）设置环境变量（切记，不要删除原先的系统变量，只要用分号隔开，然后添加，最后也要加上分号）

用户变量设置：将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global，没有PATH，可以直接添加。

系统变量设置：添加变量 NODE_PATH  值为：D:\Program Files\nodejs\node_modules

关于node环境配置问题，通过用户自己配置完整地环境变量，可以更好地运行进程；

环境变量（environment variables）一般是指在操作系统中用来指定操作系统运行环境的一些参数，是在操作系统中一个具有特定名字的对象，它包含了一个或者多个应用程序所将使用到的信息；当要求系统运行一个程序而没有告诉它程序所在的完整路径时，系统除了在当前目录下面寻找此程序外，还应到path中指定的路径去找。

二、npm（修改淘宝镜像）

　　npm代表的是npmjs.org这个网站，这个站点存储了很多nodejs的第三方功能包，利用npm这个工具可以将nodejs第三方功能包通过相关指令进行安装，比如npm install webpack -g;只要安装好了node，就自动安装好了npm。有时候用npm安装相关东西实在太慢，因此使用cnpm保存为淘宝镜像，也可以直接将npm路径修改为淘宝镜像。详见《‘cnpm' 不是内部或外部命令,也不是可运行的程序》

　　注（引用文章）： NPM 国内慢的问题解决

三、 安装webpack

　　如果之前没全局安装过webpack，就先安装一下。Vue 提供了一个官方的cli，为单页面应用 (SPA) 快速搭建繁杂的脚手架，脚手架通过webpack搭建开发环境。

 

$ npm install webpack -g

四、开发工具vscode或webstrom

　　１、关于webstorm，从大学就开始用啊，这么多年了，在工作中慢慢转向了vs，因为事先集成了很多东西，导致太吃内存了，还是说我的电脑太low了。害！代码提示、语法高亮、集成插件，不需要做过多的配置，便可上手。

　　关于《webstorm(０)：下载安装webstrom及激活》

　　２、关于vscode，下就完了，再根据公司规范配置一下格式啥的。

关于vscode插件

　　

Vue Extension Pack ：集成了Ｖｕｅ的所有常用插件；（已经包含了下面一些常用插件）
Vetur ：支持语法高亮、智能感知、Emmet等，包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
EsLint ： 语法纠错
open in browser ： 如何用浏览器预览运行html文件
Debugger for Chrome ：映射vscode上的断点到chrome上，方便调试（配置有点麻烦）
Auto Close Tag ：自动闭合HTML/XML标签
Auto Rename Tag ：自动完成另一侧标签的同步修改


JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense ：自动路劲补全
HTML CSS Support ：让 html 标签上写class 智能提示当前项目所支持的样式
React-native 快捷键显示-----react组件模板；例如：cccs
vue vscode snippets 快捷键显示：vue组件模板；例如：vba

五、安装vue-cli

　　在命令行里输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

　　可能错误：

　　（１）在控制台显示如下：

　　

 　　（２）或者vscode的终端显示“vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确， 然后再试一次。”

　　原因是没有安装vue-cli。

六、关于sass(ruby环境编译sass, node-sass利用node编译sass)

　　　我们可以使用 npm（NPM 使用介绍）来安装 Sass

npm install -g sass

以及可能遇到的问题之《安装 node-sass 的不成功》

七、安装git

　　文章之《git(一):了解、学习、安装git》

八、and其他工作学习过程中需要用到的

　　待续．．．．．．