首页 > 编程语言 >nvm、node、vue安装、vue项目创建打包

nvm、node、vue安装、vue项目创建打包

时间:2023-09-13 11:57:15浏览次数:57  
标签:node npm vue 版本 nvm 安装

nvm、node、vue安装、创建vue项目

  • nvm作用:可以管理多个版本的node切换node版本下载node

前情提要

一、常用命令

1、nvm查看安装了的node

nvm ls
nvm list  //查看安装的node版本,如果所有的版本前面都没有*,说明node指定版本没成功,运行node -v 会提示 ‘node’不是内部或外部命令

2、nvm下载node

//x.x.x  版本号
nvm install x.x.x
nvm install 16.15.0
nvm install 16.18.0
nvm install 18.12.0

3、nvm切换node版本

//x.x.x  版本号
nvm use x.x.x

4、查看版本

//看nvm版本
nvm -v
//看node版本
node -v

二、安装步奏

1、 node全部卸载掉

2、安装nvm

  • 前面下载安装

3、安装node

  • 一、2

4、使用nvm use 命令切换到指定版本

  • 一、3

5、配置npm安装的:全局模块路径缓存的路径

npm config set prefix "D:\Develop\App\NodeNvmAll\Node_Global"

npm config set cache "D:\Develop\App\NodeNvmAll\Node_Cache"

6、配置全局环境变量

//查看全局配置:上面的:D:\Develop\App\NodeNvmAll\Node_Global\node_modules
npm root -g
  • 把路径配置到PATH中
  • 经过测试,应该把环境变量配置到全局模块即可:D:\Develop\App\NodeNvmAll\Node_Global

7、安装一个模块进行测试

  • 看是否安装在了设置的D盘路径下

  • (可以跳过这步,直接第8步)

//安装
npm install pnpm -g
//验证
pnpm -v

image

8、安装、配置淘宝镜像

//安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
//验证
cnpm -v

image

  • 配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
  • 查看配置:
//查看所有配置
npm config ls
或
//查看npm当前镜像源(推荐)
npm config get registry

三、安装vue

1、安装vue,只需执行1

//1、全局安装
npm i -g @vue/cli
//2、卸载全局
npm uninstall vue-cli -g
//3、升级
npm update -g @vue/cli

2、验证vue

vue -V

3、新建项目-自定义配置(推荐)

1、首先切换到项目目录
2、执行:vue create 项目名
3、其他自己百度
4、运行项目:npm run serve

image

成功:

image

4、vue打包

npm run build

四、总结

  • 如果pnpm、cnpm、vue都无法查看版本,说明全局环境变量配置错误,需要配置到全局模块路径即可,不需要配置到:全局模块路径\node_modules

标签:node,npm,vue,版本,nvm,安装
From: https://www.cnblogs.com/kakarotto-chen/p/17699187.html

相关文章

  • vue导出带样式的excel
    示例说明实现导出excel不同块的颜色templatea标签仅做文件名称调整,默认为隐藏状态;<template><div><button@click="exportExcel">导出</button><aref="export_a"/></div></template>scriptexportdefault{name......
  • Vue3语法基本使用
    1、watch使用watch(监听数据源,执行函数,[配置参数])//配置参数:立即执行深度监听{immediate:true,deep:true}1.1监听基本数据类型单一数据源<scriptsetup>import{ref,watch}from'vue'letname=ref('张麻子')//监听器watch(name,(new......
  • 解决vue中watch监听对象变化获取不到旧数据的问题
    解决vue中watch监听对象变化获取不到旧数据的问题1.问题代码watch:{pageInfo:{handler(newVal,oldVal){console.log(newVal,oldVal);},}}结果:打印出来newVal和oldVal输出内容一样console.log(newVal===oldVal)//true发现这......
  • Vue.set和splice方法有什么区别?
    Vue.set方法和splice方法在Vue中用于修改数组的行为有一些区别。一:Vue.set(obj,key,value):用途:Vue.set是Vue提供的全局方法,用于向响应式对象中添加新的响应式属性,并确保这个新属性是响应式的。参数:obj:要修改的目标对象。key:要添加的属性键名。value:要添加的属性值。示......
  • 从零开始使用vue2+element搭建后台管理系统(实现导出excel表格的功能)
    首先参阅了以下文档:https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/excel.html#excel-%E5%AF%BC%E5%87%BAhttps://blog.csdn.net/weixin_42028153/article/details/124804841核心思想:抄一下vue-element-admin这个很棒的开源集成后台管理系统中所提......
  • VUE2教程-基础-Class 与 Style 绑定
    Class与Style绑定操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js做了专门的增强......
  • VUE2基础-Vue实例
    Vue实例创建一个Vue实例 每个Vue应用都是通过用 Vue 函数创建一个新的 Vue实例开始的:varvm=newVue({//选项})虽然没有完全遵循 MVVM模型,但是Vue的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel的缩写)这个变量名表示Vue实例。当创建......
  • VUE2教程-基础-简介
    Vue.js是什么Vue(读音/vjuː/,类似于 view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue......
  • Vue~vue3-sfc-loader用法
    1.vue2-sfc-loader版本参考这个:(vue2&vue2-sfc-loader)https://article.juejin.cn/post/72369546129882972742.vue3-sfc-loader版本的基础写法:(vue3&vue3-sfc-loader)<template><div><component:is="data.remote"v-if="data.remote&q......
  • vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用
     vuerouter页面跳转及传参?一、router-link跳转###1.不带参数,name,path都行,建议用name<router-link:to="{name:'home'}"><router-link:to="{path:'/home'}">###2.带params参数<router-link:to="{name:'home'......