Node.js 安装

从官网 下载 安装

Node.js 官网

Node.js 官方文档

cmd 命令

  • node -v 查看版本号 v10.15.0

  • npm 包管理工具

    • npm 是JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。

      (类似Python中的pip一样。)

      由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功
  • 更新npm至最新的稳定版本

    • 使用版本 v6.4.1
    • npm install npm@latest -g
  • npm常用命令

    1. 安装第三方包
    npm install 包名

    上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录(如果不存在的话),然后将下载的包保存到这个目录下。

    npm install 包名 -g
    npm install bootstrap@3.3.7

    加上-g 参数后就会将该包安装到全局。

    使用@ 标识安装指定版本的包,比如指定安装3.3.7版本的Bootstrap。

    npm install 包名 -D

    安装开发阶段使用的包(有些包只在开发阶段使用,实际生产环境下运行并不需要,比如:代码格式化工

    具、代码打包工具等)

    在我们的项目目录下会生成一个 node_modules 目录,我们使用npm下载安装的项目依赖包都会保存在这个目录中。我们项目的所有的依赖信息都会保存在package.json 文件中。

    1. 卸载包

      npm uninstall 包名
    2. 更新包

      npm update 包名
    3. 查看已经安装的包

      npm list
    4. 初始化一个新项目

    在你的项目目录下,执行以下命令来初始化你的项目。(会出现很多选项让你填写)

    npm init

    该命令会在当前目录下创建一个名为package.json 的文件,里面记录下该项目的一些介绍信息和包的依赖

    信息。

    {
    "name": "demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }

    或者你可以简单的使用npm init -y 或npm install --yes 命令使用默认配置来初始化你的项目。

使用cnpm

  • 因为npm安装插件是从国外服务器下载,受网络影响大,安装依赖包的时候经常会出现超时的问题。我们可以使

    用cnpm 代替npm。

    cnpm是淘宝团队维护的一个完整 npmjs.org 镜像,用来代替官方版本(只读),同步频率目前为 10分钟 一次以保证

    尽量与官方服务同步。
安装 cnpm
  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 使用cnpm

    cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

webpack

  • webpack介绍

    前端开发的一个坑在于浏览器加载JS文件的时候是从上到下,不存在模块化这样一个概念的。 我们很正常的会把实现不同功能的代码保存在不同的JS文件中,这些JS文件之间传递变量只能通过定义全局变量,这样我们用到的JS文件越多,暴露的全局变量就越多,越容易出现变量被覆盖的隐患。(如果所有JS文件都是自己写的还好,但是我们通常都是会引用别人的JS文件来开发。)

    node.js出现之后,我们的JS文件可以直接跑在操作系统上了,并且在node.js中支持模块化的JS。它通过定义输入和输出来解决不同模块间的数据传递问题。 这里就类似于Python中的包的概念,我们可以在Python文件中使用import 来导入其他的Python包,从而使用这个包中的变量和方法。 这样我们写的js文件就需要提供一个输入和输出。

    现在的前端开发人员都习惯于在后端先写代码,利用后端开发模块化的方式来解决上面JS的历史遗留问题。可是这样我们写的JS文件浏览器就不认识了,怎么办?webpack 就是一个把我们在后端写的JS代码打包成浏览器认识的JS文件(当然webpack 很强大它可以打包JS、CSS、图片等静态资源)。 我们并不关心打包后的JS文件里面的内容都是什么,只要它体积小、浏览器能认识就可以了。

  • webpack安装

    我们这里安装的是 webpack v4+ 版本,还需要安装CLI工具配合。我们这里安装的是webpack-cli 。执行下面的命令同时安装webpack 和webpack-cli 。

    npm install webpack webpack-cli -g -D
    npm install webpack webpack-cli -g

    安装完成后,查看一下webpack 和webpack-cli 的版本信息。

    webpack -v
    webpack-cli -v
  • 使用webpack打包

    cd 到 项目目录下 使用 webpack ./src/b.js

Vue-CLI

  • Vue-CLI介绍

    vue-cli 是一个Vue官方提供的快速构建Vue项目的脚手架工具,能够极大的提高开发效率

  • Vue-CLI安装 最新的

    npm install -g @vue/cli
  • 查看安装的 版本

    vue --version
    vue -V v3.2.3
  • Vue-CLI使用

    • 接下来我们使用vue-cli 脚手架工具搭建我们的第一个Vue项目吧!
    • cd 到要创建的项目的父目录下
    vue create 项目名
    • 根据提示创建 即可
  • 除了上面命令行方式创建Vue项目外,还可以使用vue ui 命令以图形化界面创建和管理项目。

    vue ui

补充

  1. 安装项目依赖/配置项目(拿到一个Vue项目之后先运行这个安装包依赖)

    npm install
  2. 编译并在本地启动一个开发环境

    npm run serve
  3. 编译并打包一个生产版本

    npm run build
  4. 运行测试(前提你要写好测试脚本)

npm run test
  1. 运行代码检测
npm run lint
  1. element-ui 安装

    官网

    cnpm i element-ui -S

错误

npm  安装 express  出现

npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to ![img](file:///C:\Users\ADMINI~1\AppData\Local\Temp%W@GJ$ACOF(TYDYECOKVDYB.png)https://registry.npmjs.org/express failed, reason: unable to  verify the first certificate

设置下npm  config set strict-ssl  false  就可以了 这是一个坑。

Node.js webpack Vue-CLI --安装的更多相关文章

  1. node.js和vue cli脚手架下载安装配置方法

    一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...

  2. 安装node.js和vue

    1.在官网上下载Node.js安装包  https://nodejs.org/zh-cn/ 2.点击安装,一直下一步下一步就行,这里就不在赘述了. 3.安装完之后,如果没有选安装路径的话,一般都是在[ ...

  3. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  4. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  5. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  6. Hexo准备---Node.js、Vue

    Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...

  7. Node.js系列基础学习----安装,实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  8. Node.js的简介和安装

    一.Node.js的简介和安装 a)       什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...

  9. node.js框架express的安装

    node.js框架express的安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通 ...

  10. Node.js的下载、安装、配置、Hello World、文档阅读

    Node.js的下载.安装.配置.Hello World.文档阅读

随机推荐

  1. Jmeter获取接口返回数组的长度

    添加BeanShell PostProcessor来获取,具体代码如下: import com.jayway.jsonpath.JsonPath; import com.jayway.jsonpath ...

  2. 2017 ACM/ICPC Asia Regional Qingdao Online解题报告(部分)

    HDU 6206 Apple 题意: 给出四个点的坐标(每个点的坐标值小于等于1,000,000,000,000),问最后一个点是否在前三个点组成的三角形的外接圆内,是输出Accept,否输出Reje ...

  3. C#格式规范

    前言 之前工作中整理的一篇编码规范. 代码注释 注释约定 只在需要的地方加注释,不要为显而易见的代码加注释 使用 /// 生成的xml标签格式的文档注释 方法注释 所有的方法都应该以描述这段代码的功能 ...

  4. Nodejs 和 Electron ubuntu下快速安装

    查找时间管理软件的时候发现了superProductivity这个程序,使用electron进行开发,于是看了一下介绍,手痒了,尝试进行环境搭建,下一步慢慢补齐前端知识吧 nodejs安装 nodej ...

  5. 拜小白教你OpenCV3.2.0+VS2017开发环境配置

    第一部分:OpenCV3.2.0的下载 OpenCV官方下载地址: http://opencv.org/releases.html# 本人选择opencv3.2.0基于Windows平台.读者根据自己 ...

  6. CSS之fontAwesome代替网页icon小图标

    引言 奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...

  7. 1788:Pell数列

    1788:Pell数列 查看 提交 统计 提问 总时间限制:  3000ms 内存限制:  65536kB 描述 Pell数列a1, a2, a3, ...的定义是这样的,a1 = 1, a2 = 2 ...

  8. 【读书笔记】iOS-button只显示在一个界面的右下角,不管界面大小怎么变化(xib,没有使用自动布局)(一)

    一,新建立一个工程,Hello,如图所示. 二,Xcode--->New--->File--->FirstViewController---->选中Also create XI ...

  9. 手把手教你撸一个简易的 webpack

    背景 随着前端复杂度的不断提升,诞生出很多打包工具,比如最先的grunt,gulp.到后来的webpack和Parcel.但是目前很多脚手架工具,比如vue-cli已经帮我们集成了一些构建工具的使用. ...

  10. recovery 升级'@/cache/recovery/block.map' failed错误问题

    随着android版本升级,升级包越来越大,当升级包无法存储在cache分区的时候,会把升级包下载到data分区,然后从data分区升级,最近从data分区加载升级包升级的时候,遇到了如下错误: [ ...