nodejs安装和 npm 使用 以及vue使用

 

一、进入官网

https://nodejs.org/en/download/

选择各自的对应下载文件

 

二、安装

windows 上傻瓜式安装

其他安装可以参考 http://www.runoob.com/nodejs/nodejs-install-setup.html

 

三、设置全局变量

在全局变量中将上面node 安装的目录添加至系统变量中

 

四、NPM 包管理工具

4.1 说明

包管理工具
集成在node.js 中,不需要单独下载

前端的一切资源都可以通过npm下载,包括前端工具(webpack\grunk...) 各种前端资源(jquery\bootstrap...)

 

4.2 设置淘宝镜像

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

 

4.3 包的安装与卸载

npm install 包名         本地安装(本项目目录)
npm install -g 包名      全局安装(命令行工具)
npm uninstall 包名       删除本地的包 
npm uninstall -g 包名    删除全局的包

 

4.4 项目初始化

npm init

# 创建一个package.json 里面是对项目的描述,知道依赖

 

4.5 全局环境与开发环境

# 全局环境(开发和生产环境皆可使用)
npm install 包名 --save 下载的包的同时加入到package.json 的`dependencles`

# 开发环境(开发环境时使用)
npm install 包名 --save-dev 下载包的同时,加入到pakcage.json 的`devDependencles`

 

4.6 同步开发环境

项目中的 node_modules 目录是不需要上传的

只需要npm install 即可

 

 

五、vue 生产器

集成了webpack、以及其他各种需要的工具

5.1 安装vue

npm install -g @vue/cli   # 安装的是3.x    使用这个
npm install -g vue/cli      # 安装的是2.x

 

 

5.2 使用

vue create 项目目录   # 自动生产项目目录

 

5.3 包含的东西

webpack 
babel                                        把ES6 编译成ES5
eslint                                       代码语法规范
TypeScript                                   负责把TypeScript 编译成JavaScript 
Router(vue-router vue全家桶成员)               路由
vuex(vue 全家桶成员)                           vue状态管理
CSS Pre-processors                           css 预处理 会让你再次选择器
Linter  / Formatter                          语法检测      
Unit  / Testing                              单元测试
E2E Testing                                  端到端测试

 

 

5.4 命令

npm run serve # 临时编译,创建临时服务器,localhost:8080

npm run build  # 编译 ,生成dist目录 

 

 

 

六、推荐前端开发工具 webstorm