首页 > 其他分享 >npm安装教程 搭建vue

npm安装教程 搭建vue

时间:2023-07-18 10:15:40浏览次数:42  
标签:npm node 教程 vue nodejs global install

一、相关概念

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

二、安装和配置环境变量

1、下载NodeJS并安装 nodejs.cn/download

2、一路Next,直到Finished





3、打开CMD,检查是否正常

node自带npm,但是不是最新版本

4、先如下图D盘建立2个目录node_cache和node_global


然后运行以下2条命令

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

输入命令

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

检查一下镜像站行不行命令

npm config get registry

5、npm info vue 看看能否获得vue的信息



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

三、测试NPM安装vue.js

重新打开CMD让上面的环境变量生效
命令:npm install vue -g
这里的-g是指安装到global全局目录去

四、测试NPM安装vue-router

命令:npm install vue-router -g


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


对path环境变量添加D:\nodejs\node_global



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

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

如果执行vue init webpack vue10出现:

Command vue init requires a global addon to be installed. Please run undefined @vue/cli-init and try again.

请先执行下面这条命令

npm install -g @vue/cli-init

初始化,运行npm install安装

运行npm install dev安装依赖
会出现如下报错

解决方案:输入命令npm i ajv----敲回车

执行过程中出现上图错误。可以忽略。
执行npm run dev,出现如下界面代表执行成功

按照提示打开地址http://localhost:8080

标签:npm,node,教程,vue,nodejs,global,install
From: https://www.cnblogs.com/HeroZhang/p/17562027.html

相关文章

  • 介绍社交论坛问答发帖系统源码-java+vue+uniapp开发前后端
    前后端分离社交论坛问答发帖BBS源码,社交论坛小程序|H5论坛|,app论坛是java+vue+uniapp开发的前后端分离社交论坛问答发帖/BBS项目,包括论坛图文帖,视频,圈子,IM私聊,微信支付,付费贴,积分签到,钱包充值等论坛小程序论坛app完整功能演示地址:www.runruncode.com/java/19462.html ......
  • sqoop安装教程
    Sqoop的安装注意:在安装Sqoop之前要配置好本机的Java环境和Hadoop环境先把spoop的安装包sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz拷贝在系统目录下的/root/softwares下面解压配置环境变量#解压tar.gz包[root@qianfeng01local]tar-zxvf/root/sqoop-1.4.7.bin__hadoop-......
  • 超详细OA系统功能测试分析学习教程
    OA系统可以简单快速地建立企业级的办公自动化系统。办公自动化系统是员工及管理者使用频率最高的应用系统,可以极大提高公司的办公效率,帮助企业节省数字化、信息化办公的成本。本文中的OA系统来自于下面的资源:https://www.gougucms.com/home/pages/detail/s/gouguoa.html包含诸多......
  • 前端Vue仿微信我的菜单栏组件按钮组件
    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率......
  • CoffeeScript教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介CoffeeScript是一种相对较新的语言,为开发人员提供了不再有JavaScript缺陷的令人期待的方案。利用CoffeeScript,开发人员即可使用一种轻量级、直观的语言完成编码工作,这种语言就像是Ruby和Python的混合体。对于兼容浏览器的Web应用程序,CoffeeScript将编译为Jav......
  • vue--day27---vue生命周期1
              beforeCreate:数据监测、数据代理创建之前在实例初始化之后,数据监测、数据代理创建之前被调用,此时无法通过VM访问data中的数据、methods中的方法。created:数据监测、数据代理创建之后实例已经创建完成之后被调用,在这一步,实例已完成以下配......
  • 浅析vue3中如何使用动态组件、如何快速理解Vue3的 toRaw和markRaw、ref与shallowRef、
    一、Vue3中使用component:is加载动态组件1、不使用setup语法糖,这种方式和vue2差不多,is可以是个字符串2、使用setup语法糖,这时候的is如果使用字符串就会加载不出来,得使用组件实例<componentclass="task-box":is="componentObj[route.params.type]":info="taskInfo"></co......
  • React、Vue框架如何实现组件更新,原理是什么?
    原文合集地址如下,有需要的朋友可以关注本文地址合集地址引言React和Vue都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个......
  • beginnersbook C 语言教程·翻译完成 | ApacheCN
    译者:飞龙协议:CCBY-NC-SA4.0首先学习C基础知识如何安装TurboC++:编译并运行C程序C程序结构-第一个C程序C关键词-保留字C中的决策控制语句C编程中的if语句C-if..else,嵌套if..else和else..if语句C编程的switch-case语句C中的循环C编程中for的循环C编程中的wh......
  • beginnersbook C++ 教程·翻译完成 | ApacheCN
    译者:飞龙协议:CCBY-NC-SA4.0基础HelloWorld-第一个C++程序C++中的变量C++中的数据类型C++中的运算符控制语句C++中的if语句C++中的switch-case语句C++中的for循环C++中的while循环C++中的do-while循环C++中的continue语句C++中的break语句C++中的goto语句函数C++......