vue.js中npm安装教程图解

首先理清nodejs和npm的关系：

node.js是javascript的一种运行环境，是对Google V8引擎进行的封装。是一个服务器端的javascript的解释器。

包含关系，nodejs中含有npm，比如说你安装好nodejs，你打开cmd输入npm -v会发现出啊线npm的版本号，说明npm已经安装好。

引用大神的总结:

其实npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

node -v 查看node版本，内置包含npm包管理器来安装依赖包。

npm install -g typescript

一、使用之前，我们先来掌握3个东西是用来干什么的。

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

如图，下载8.9.3 LTS （推荐给绝大部分用户使用）

双击安装

可以使用默认路径，本例子中自行修改为d:\nodejs

一路点Next

点Finish完成

打开CMD，检查是否正常

再看看另外2个目录，npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，我们试图把这2个目录移动回到D:\nodejs 先如下图建立2个目录

然后运行以下2条命令 npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache"

如上图，我们再来关注一下npm的本地仓库，输入命令npm list -global

输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

输入

命令npm config list 显示所有配置信息，我们关注一个配置文件 C:\Users\Administrator\.npmrc

使用文本编辑器编辑它，可以看到刚才的配置信息

检查一下镜像站行不行命令1 npm config get registry

检查一下镜像站行不行命令2 Npm info vue 看看能否获得vue的信息

注意，此时，默认的模块D:\nodejs\node_modules 目录将会改变为D:\nodejs\node_global\node_modules 目录，如果直接运行npm install等命令会报错的。我们需要做1件事情： 1、增加环境变量NODE_PATH 内容是：D:\nodejs\node_global\node_modules

（注意，一下操作需要重新打开CMD让上面的环境变量生效）一、测试NPM安装vue.js 命令：npm install vue -g 这里的-g是指安装到global全局目录去

二、测试NPM安装vue-router 命令：npm install vue-router -g

运行npm install vue-cli -g安装vue脚手架

编辑环境编辑path

对path环境变量添加D:\nodejs\node_global win10以下版本的，横向显示PATH的，注意添加到最后时，不要有分号【;】

重新打开CMD，并且测试vue是否使用正常

注意，vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

初始化，安装依赖

运行npm install安装依赖

npm run dev

成功界面，提示打开地址http://localhost:8080

自动打开浏览器http://localhost:8080/#/

npm run build 生成静态文件，打开dist文件夹下新生成的index.html文件 nmp下新建出来的vue01的目录描述：

总结

以上所述是小编给大家介绍vue.js中npm安装教程图解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • 10分钟上手vue-cli 3.0 入门介绍

    环境安装 全新版本的脚手架.逼格非常高. 记住这个名字 @vue/cli ,对就是这个 你npm 或者yarn 安装就行了,先保证全局环境有它. npm install -g @vue/cli yarn add global @vue/cli 创建项目 这里对比下以前2.X之前的版本 ,新版本把插件以及模板等 移植到命令行界面了. 旧版 创建命令 2.x vue init <template-name> <project-name> 3.x vue create <proje

  • 快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能. vue-cli 从 2.0 到 3.0 的升级有太多的新东西可以说了,但是不可能在本文中列举所有的内容,这篇文章作为一个对比 2.0 升级功能的导读,让你快速了解 3.0 更新的内容. 一.创建项目: 创建项目命令的变化. vue create my-project 3.0 版本包括默认预设配置 和 用户自定义配置. 自定义功能配置包括以下功能: TypeScript P

  • vue cli 3.0 使用全过程解析

    首先在使用 vue create my-project 创建项目的时候要选择使用 css 预处理器. 安装 vue-cli 首先使用 npm 安装 vue-cli v3.0. npm install -g @vue/cli 安装完成后使用 vue -V 查看版本号,如果显示版本号说明安装完成. 创建项目 vue-cli v3.0 创建项目的命令与 2.0 有所不同.3.0 创建项目的命令为: vue create test-project 创建过程中首先选择创建的模式,是采用默认配置,还是自定义

  • 浅谈vue-cli 3.0.x 初体验

    最近项目正在优化.乘着有时间看了一下 vue-cli3.0.x 使用 .感觉还蛮不错的. 因为之前项目使用的 vue-cli 2 创建的,强行使用 eslint让我们很难受,一些与项目无关的 "build" 和 "config" ,让人看着就有一些不爽 .由于公司环境比较多,需要测试环境的配置.增加了 ""tt": "node build/tt-build.js"" .到 3.0.x 应该怎么用? 带着这些

  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    前言 Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用.今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 步骤 首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了. 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://r

  • 使用Vue-cli 3.0搭建Vue项目的方法

    使用Vue-cli 3.0搭建Vue项目的方法

    1. 环境准备 1.1. 安装Node.js (建议使用LTS版本) 1.2. nrm安装及npm registry设置 // use npm npm i nrm -g // use yarn yarn global add nrm 查看可用的npm源 nrm ls nrm查看npm源.png 切换npm源(以使用taobao为例) // 用法: nrm use *** nrm use taobao // 切换之后可用 nrm ls查看是否已经切换了npm源 nrm切换npm源.png 1.3.

  • vue.js中npm安装教程图解

    首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器. 包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好. 引用大神的总结: 其实npm是nodejs的包管理器(package manager).我们在Node.js上开发时,会用到很多别人已经写好的javascript代码,如果每当我们

  • vue.js开发环境安装教程

    vue.js开发环境安装教程

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angula

  • Vue.js中数据绑定的语法教程

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

  • 解析Vue.js中的组件

    介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • animate.css在vue项目中的使用教程

    在vue项目中使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库(详情可见vue官网-过渡:过渡),下面我们开始介绍在vue中单独使用animate动画,其实也非常简单,两步留可以实现: 第一步:安装: 在命令行中执行:npm install animate.css --save 第二步:引入及使用: main.js中: import animated from 'animate.css

  • 如何使用RoughViz可视化Vue.js中的草绘图表

    如何使用RoughViz可视化Vue.js中的草绘图表

    介绍 图表是数据的图形表示,用于使数据集更易于阅读,并且易于区分各部分.虽然大多数用户习惯于看到简洁而正式的图表,但一些用户更喜欢看到手绘或素描的图表,这就是 roughViz 的用武之地. roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库.该库旨在帮助构建看起来像草图或手绘图的图表,如下例所示. 在本指南中,你将学习如何使用 vue-roughviz 在 Vue.js 应用程序中显示类似草图的图表,以及如何使用 vue-cli 配置 Vue 应用程序

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表

  • vue.js项目nginx部署教程

    nginx是一个高性能的HTTP和反向代理服务器.因此常用来做静态资源服务器和后端的反向代理服务器.本文主要记录使用nginx去部署使用vue搭建的前端项目,项目基于vue官方的脚手架vue-cli构建. 开发环境搭建完成. 二.编译部署 1.项目路径下demo输入命令npm run build 编译完成后会发现在demo文件夹下多出一个dist文件夹这里面就是编译好的文件了. 2.网上下载nginx,下载地址http://nginx.org/en/download.html,解压下载的ngin

随机推荐