搭建 vue 开发环境: node.js安装+vue脚手架配置

2023-11-06

第一步 node环境安装
1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装
1.2 如果本机已经安装node的运行换,请更新至最新的node 版本
下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/

以上两种方式下载node安装包都可以

下面是我下载的最新安装包

开始安装

这里是修改自己的安装路径

直接next

然后安装完成

安装测试

HOME+R  输入cmd打开命令行窗口  进入安装路径 输入node -v

也可以安装Git 用Git Bash Here窗口

二、设置nodejs prefix(全局)和cache(缓存)路径

nodejs安装好之后,通过npm下载全局模块默认安装到{%USERDATA%}C:\Users\username\AppData\下的Roaming\npm下,这当然是不太对的默认。

分别设置路径能够把npm安装的模块集中在一起,便于管理。

1、在nodejs安装路径下,新建node_global和node_cache两个文件夹


2、设置缓存文件夹

npm config set cache "D:\nodeJs\node_cache"
 设置全局模块存放路径

npm config set prefix "D:\nodeJs\node_global"
设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里

上面第三步是安装cnpm 淘宝镜像出现问题,版本过高,下面会有解决方法

三、基于 Node.js 安装cnpm(淘宝镜像)

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


问题:npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

解决办法:降低版本 npm install npm@4.6.1 -g

上面安装cnpm已经成功,但输入cnpm -v 报错 ,查看了下,在安装路径下输入没问题,说明是环境变量配置问题

四、设置环境变量(非常重要)

说明:设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令,而不需要输入全路径
1、鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
2、修改系统变量PATH
3、新增系统变量NODE_PATH

电脑——》属性——》高级系统设置——》环境变量

确定后配置完成

环境变量配置测试

打开命令行,输入node -v

安装环境变量后,输入cnpm -v 如下,说明配置成功

五、安装Vue

cnpm install vue -g

六、安装vue命令行工具,即vue-cli 脚手架

cnpm install vue-cli -g


七、新项目的创建

1.打开存放新建项目的文件夹

打开开始菜单,输入 CMD,或使用快捷键 win+R,输入 CMD,敲回车,弹出命令提示符。打开你将要新建的项目目录

2.根据模版创建新项目

vue init webpack edutrainvue

初始化完成

3、安装工程依赖模块

定位到mytest的工程目录下,安装该工程依赖的模块,这些模块将被安装在:edutrainvue\node_module目录下,node_module文件夹会被新建,而且根据package.json的配置下载该项目的modules

cd edutrainvue
cnpm install
4、运行该项目,测试一下该项目是否能够正常工作,这种方式是用nodejs来启动。

cnpm run dev

Ctrl+C     npm run build 打包

项目目录

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

搭建 vue 开发环境: node.js安装+vue脚手架配置 的相关文章

  • CAN 帧简介

    1 数据帧 数据帧的构成 下图中的D为显性电平 R为隐性电平 数据帧是由7个段构成 其各个段的含义如下 1 帧起始 表示数据帧开始的帧 SOF由1位显性位组成 2 仲裁段 表示该帧优先级的段 标准数据帧与扩展数据帧在此段不同 标准数据帧的仲
  • 爬取csdn的个人博客

    爬取csdn的个人博客 全文构思 本文使用账号密码进行登录 所用到的环境安装 sudo pip3 install selenium sudo pip3 install pyperclip 除此之外使用了chrome的浏览器 需要下载驱动 自
  • 俩个数组对比去重

    俩个数组去重 键值对类型的 var arr id 1 value 1 id 2 value 2 id 3 value 3 var arr1 id 1 value 1 id 4 value 4 id 5 value 5 带键值对的用 for
  • 时间序列预测算法

    图片参考博客 时间序列 时间序列预测算法总结 https zhuanlan zhihu com p 421710621 ARIMA Holt Winters Prophet算法 Facebook时间序列预测算法Prophet的研究 http

随机推荐

  • 微信小程序扫描普通二维码跳转到小程序指定页面

    这个功能的逻辑是什么呢 二维码就相当于是一个链接 相当于我们点击一个链接跳转到另一个页面 只不过这里是扫码的形式 如何操作 1 首先我们需要在微信公众平台的开发管理 gt 开发设置 找到 扫普通链接二维码打开小程序 点击添加 会出现下面的页
  • SpringMvc框架详解

    目录 1 概念 2 作用 3 原理 4 使用Springmvc框架 4 1创建一个maven web工程 并替换web xml文件的内容 4 2引入springmvn所依赖的jar包 4 3将DpatcherServlet注册到配置文件中
  • vue 脚手架新手入门(vue cli 3)

    文章目录 1 vue中的 绑定和 监听 1 1 v model 双向绑定 2 if else for 3 computed 计算属性 4 生命周期 属性加载顺序 5 watch 侦听器 6 components 组件 6 1 props 从
  • 数据库课程设计-图书馆管理系统(2.数据库实现-基于mysql)

    如果对你有帮助 可以给卑微的博主留个赞 关注 收藏 不是 骗一下数据 说不定以后面试就过了 拜谢 好像有读者说现在不要积分的资源也要vip才能下 如果下不了可以留邮箱到评论区或者私聊 我也把资源放到github了 地址如下 https gi
  • 【华为OD机试】拔河比赛(C++ Python Java)2023 B卷

    题目描述 公司最近准备进行拔河比赛 需要在全部员工中进行挑选 选拔的规则如下 按照身高优先 体重次优先的方式准备比赛阵容 规定参赛的队伍派出10名选手 请实现一个选拔队员的小程序 输入为一个数组 记录了部门人员的身高 体重信息 如 身高 体
  • Unity的Time.deltaTime

    当我们在编写游戏或交互应用程序时 需要控制元素的动画 运动和其他基于时间的计算 Unity游戏引擎中的Time deltaTime属性可以帮助我们实现这样的效果 这个属性提供了两个连续帧之间的时间间隔 以便我们可以根据每帧之间的持续时间来调
  • jpg解码库移植过程详解

    1 jpg解码库的源码获取 1 可以从网站下载 http www photopost com jpegsrc v6b tar gz 2 我下面的移植过程是根据jpegsrc v6b tar gz版本的jpg解码库移植的 如果是其他版本的jp
  • maven 命令建分支步骤以及注意事项

    一 在svn创建对应的目录 branches gt 分支目录 tags gt 标签目录 当前线上项目对应的版本 trunk gt 主干目录 二 运行项目中的所有的测试用例 无报错 后 三 检查pom父级pom xml文件是否有以下配置 如无
  • JAVA字符集

    1 概述 本文主要包括以下几个方面 编码基本知识 java 系统软件 url 工具软件等 在下面的描述中 将以 中文 两个字为例 经查表可以知道其GB2312编码是 d6d0 cec4 Unicode编码为 4e2d 6587 UTF编码就
  • vue2.0 + vux (六)NewsList 资讯页 及 NewsDetail 资讯详情页

    设置代理 避免出现跨域问题 设置代理 避免出现跨域问题 proxyTable api target https www oschina net action apiv2 changeOrigin true pathRewrite api a
  • 给你一个id你会干嘛?

    信息收集 1 扫描端口 Nmap xxx xxx xxx xxx p 目录扫描 ip地址访问 操作系统 robots txt http 192 168 5 134 xxe 抓包进行判断存在xxe漏洞 查看etc passwd 查看admin
  • File类总结

    文章目录 File类 构造方法 创建功能 删除功能 重命名功能 判断功能 基本获取功能 高级获取功能 代码示例 判断D盘下面有没有 jpg后的文件 如果有 就输出此文件名称 文件名称过滤器的实现思想及代码 File类 构造方法 public
  • C++学习 1

    引入头文件 头文件写法 引入头文件 用户自己写的头文件 lt gt 标准库 include
  • else if 非return情况下必须有else

    return 的另一种理解 if update return insert if 之后 进去 return 到不了下面 不满足 到下面 相反 即 有了return 等于else 以上 即update insert只有一个会执行 相当于els
  • 字节设备注册的驱动开发(基于汇编语言)

    CSDN话题挑战赛第1期 活动详情地址 第1期话题PK赛 参赛话题 汇编知识分享 话题描述 我们的计算机知识就像一座金字塔 底层是数学 上面是数字电路 然后是汇编 再往上是操作系统 网络 数据库 高级编程语言 框架等等 我们不可能精通这个金
  • HTML语义标签和结构标签详解

    文章目录 实体标签 meta标签 语义化标签 结构化语义化标签 列表标签 在学习标签时我们应该注意的是他的语义 而不是他的显示效果 因为显示效果是在css中进行编写的 我们一定要做到分工明确清晰 实体标签 在网页中编写代码时 我们有时会使用
  • 4.1.4 规划、设计的艺术(技术)流派和常用技法(上)

    最后更新2021 08 25 超写实 人工 gt 脚本 gt 批处理 gt 微服务 gt 公有云 gt 公共IT基础设施 代表作品 Daniel Heilig手机拍照作品 腾讯云 阿里云 amazon azure gt 综合网管 gt 私有
  • 五、easyUI中的datagrid(数据表格)组件

    1 datagrid 数据表格 组件的概述 datagrid以表格形式展示数据 并提供了丰富的选择 排序 分组和编辑数据的功能支持 datagrid的设计用于缩短开发时间 并且使开发人员不需要具备特定的知识 它是轻量级的且功能丰富 单元格合
  • Ubuntu 最简单的方式安装chrome

    1 指定安装目录如下 cd opt 2 下载包 sudo wget https dl google com linux direct google chrome stable current amd64 deb 3 查看并安装 sudo d
  • 搭建 vue 开发环境: node.js安装+vue脚手架配置

    第一步 node环境安装 1 1 如果本机没有安装node运行环境 请下载node 安装包进行安装 1 2 如果本机已经安装node的运行换 请更新至最新的node 版本 下载地址 https nodejs org en 或者 http n