Node.js相关配置安装

前言：
多数转载：https://www.cnblogs.com/limn/p/10462798.html

简单介绍

1. npm: Nodejs下的包管理器。
2. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
3. vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

安装配置

1. Node.js

a. 下载地址：https://nodejs.org/en/
b. 下载安装包，点击安装就一直下一步就可以了。
c. 安装完成后，系统会自动帮你配置系统环境变量，你可以在系统环境变量中path可以看到。
d. 验证：进入docs中查看node.js和npm的版本号

node -v
npm -v

e. 进入C:\Users\admin\AppData\Roaming，可以看到npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动到自己指定的目录。

npm config set prefix "F:\WorkSoftware\Nodejs\node_global"
npm config set cache "F:\WorkSoftware\Nodejs\node_cache"
npm config list  --查看所有配置

f. 因为使用npm下载很慢，这时候我们需要配置淘宝镜像站，下载才会快。

npm config set registry=http://registry.npm.taobao.org

注意：
使用 npm -g 安装的时候，默认的模块F:\WorkSoftware\Nodejs\node_modules 目录
将会改变为F:\WorkSoftware\Nodejs\node_global\node_modules目录

2. webpack

安装：

npm install webpack -g

检查版本：

webpack -v

卸载：

npm uninstall webpack -g

3. vue-cli

安装：

npm install vue-cli -g

检查版本： 大写的V

vue -V

卸载：

npm uninstall vue-cli -g

4. 配置环境变量

安装完成后，提示没有vue命令。
增加环境变量NODE_PATH：F:\WorkSoftware\Nodejs\node_global\node_modules

使用脚手架搭建项目

1. 命令

vue init webpack vue-test

2. 过程介绍

 Project name vue-test               ---项目名称
? Project description 测试           ---项目描述
? Author fangk <fangkai1011@163.com>           ---项目作者
? Vue build standalone               --- 编译类型，可选
? Install vue-router? Yes             ---是否安装页面跳转路由
? Use ESLint to lint your code? Yes         ---是否使用ESLint进行代码检查
? Pick an ESLint preset none      
? Set up unit tests No                  ---是否使用单元测试
? Setup e2e tests with Nightwatch? No           ---是否使用e2e测试
? Should we run `npm install` for you after the project has been created? (recommended) npm                   ---打包方式，可选

完成后会以项目名称新建一个文件夹

3. 测试启动

a. 切换到文件夹目录下，cmd窗口。
b. npm run dev

4. 目录解构

image.png

• build：打包工具webpack相关的代码。
• config：项目配置信息，比如端口号、ip等配置。
• node_modules：当前项目安装的所有依赖。
• src：编写代码的文件夹。重要。
• static：静态资源文件，图片、字体等等。
• .babelrc：语法转义的相关配置。
• .index.html：首页
• package-lock.json：npm依赖包的一些信息，pom文件呗
• package.json：每个依赖包的记录，上面lock为详细记录包括下载地址等。

整合Element

切换到项目路径下：npm install element-ui -s
官网-s，回头看看啥意思
官网有如何使用，后续研究