前端开发环境搭建

NodeJs篇

一、下载安装nodeJS

1、下载地址官方网址 NodeJs

2、下载完成后，双击“node-v11.5.0-x64.msi”，开始安装Node.js，一路next，注意：安装目录看自己需求，本人安装在D:\nodejs目录下

3、测试

• 键盘按下【win+R】键，输入cmd 回车
• 输入命令node -v 和 npm -v

注意：新版的nodejs自带npm，可以理解npm就是对nodejs进行包管理，用于卸载和安装nodejs需要的东西

4、在安装目录文件夹下创建node_cache 和 node_global

5、管理员身份打开cmd命令行

这里是为了设置npm全局安装的模块路径和缓存路径

npm	config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

二、配置环境变量

1、win10&win11：右键此电脑——属性——高级系统设置——高级——环境变量

2、创建 NODE_PATH 变量

3、在 系统变量中 选择 Path 添加如下属性

4、测试

安装全局的vue框架和vue-cli脚手架

npm install vue -g
npm install vue-cli -g 

推荐安装还有一些没列出来例如webpack等，留给大家去以后探索

• cnpm 国内npm服务器，访问速度快
• rimraf 用来快速删除文件和文件夹
• nrm 一个 npm 源管理器，允许你快速地在 npm源间切换
• vite 前端开发和构建工具(就是快！)

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g rimraf
npm install -g nrm
npm install -g vite

Vscode篇

一、下载

• 官方地址Visual Studio Code

• 选择对应的版本

二、安装

1、点击下载好的.exe文件

2、一路下一步到安装目录

3、一路下一步到配置选项

4、安装完成！

三、初始化配置

1、下载好的vsCode，任何插件都没有，下面说说我的一些前端常用配置插件，欢迎补充说明

2、名称: Chinese (Simplified) (简体中文) ：这个插件是汉化的

3、Live Server：右键能够模拟服务器运行代码

4、open in browser：右键能够点击open in browser然后自动跳转浏览器运行代码（快捷键Alt+B）

5、Path Intellisense：这个插件是自动补全路径的，输入\后会弹出路径

6、Prettier - Code formatter：这个插件是代码格式化插件，但是要进行一些相应的配置，来约束代码的规范，下面的一份是我觉得很好用的配置项：

{
  "editor.detectIndentation": false,
  // 重新设定tabsize
  "editor.tabSize": 2,
  // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按       shift+alt+F
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // 换行属性
  "prettier.printWidth": 100,
  // 箭头函数参数括号 avoid 能不加时就不加
  "prettier.arrowParens": "avoid",
  // #prettier去掉代码结尾的分号
  "prettier.semi": false,
  // 无尾逗号
  "prettier.trailingComma": "none",
  // #使用带引号替代双引号
  "prettier.singleQuote": true,
  // #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": false,
  // #这个按用户自身习惯选择
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  // #让vue中的js按编辑器自带的ts格式进行格式化
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // 多行属性
      // "wrap_attributes": "auto"  // 当超出长度范围时才换行
      "wrap_attributes": "force-expand-multiline" // 所有属性强制换行对齐
    },
  },
  "prettier.useTabs": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "window.zoomLevel": 1,
  "security.workspace.trust.enabled": false,
  "workbench.colorTheme": "Monokai"
}

7、Vetur：这个插件是识别vue项目文件的，如果没有这个插件，vue文件是无法识别的

8、vscode-icons：这个插件是给对应的文件加上相应的字体图标的，看起来更加美观

安装好上述的环境后，前端的基本环境就搭建完了，现在来进行实战测试。测试一个vue项目

实战篇

1、打开cmd命令行，输入命令

vue init webpack my_project

配置如下

2、启动vue项目

3、启动成功 访问8080端口

4、结束