Vue-Cli安装和配置(全)

这篇具有很好参考价值的文章主要介绍了Vue-Cli安装和配置(全)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue-cli是Vue的脚手架,类似Java中的SpringBoot框架,用于搭建一个标准的项目。 Vue-cli大大降低了webpack的使用难度,支持热部署,有webpack-dev-server的支持,相当于启动了一个请求服务器作为测试环境,我们只关注开发就可以了。

目录

安装和配置

安装Node.js

npm工具

npm配置国内镜像(淘宝镜像)

nrm工具

安装Vue-Cli

 可能出现的问题

vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本……解决办法

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称


安装和配置

安装Node.js

官网:Node.js

Node下载(Download | Node.js)

安装后配置环境变量:在Path中添加NodeJS的全局安装路径:

安装vue cli,html+css+js,vue.js,javascript,前端

检查是否安装成功:在命令行输入npm -v 如果安装成功,会显示版本号

安装vue cli,html+css+js,vue.js,javascript,前端

npm工具

NodeJS的包管理工具,类似Maven,安装Node.js后就有了 基本命令:

npm -v 查看版本

npm install 包名 --save 安装     可简写成npm i 包名 -s

npm uninstall 包名 --save 卸载

npm run serve 运行项目

npm build 项目打包

npm list --depth=0 -global 查看已经全局安装的模块

如果不是最新版本,运行指令

npm install -g npm

如果想更新到指定版本,运行指令

npm -g install npm@6.8.0

 PS: -s是安装到当前目录,-g是安装到全局

npm配置国内镜像(淘宝镜像)

npm是node.js库的包管理工具,因为镜像地址在国外,安装库会比较慢,可以将镜像地址修改为国内地址,来提供安装库的速度。配置国内镜像命令如下:

// npm配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
 
// 查看npm镜像是否配置成功
npm config get registry
 
// npm回复镜像
npm config delete register
npm config edit
 
// npm安装cnpm,使用cnpm来安装js库
npm install -g cnpm --registry=https://registry.npm.taobao.org

nrm工具

npm默认站点在国外,配置国内镜像,提高下载速度

npm install nrm -g 安装nrm

nrm ls 查看镜像

nrm use 镜像名 使用镜像

安装vue cli,html+css+js,vue.js,javascript,前端

也可以使用淘宝镜像:

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

安装Vue-Cli

npm install -g @vue/cli

vue --version

安装vue cli,html+css+js,vue.js,javascript,前端

 可能出现的问题

vue无法加载文件C:\Users\Administrator\AppData\Roaming\npm\vue.ps1因为在此系统上禁止运行脚本……解决办法

管理员身份运行PowerShell(命令提示符,来源于Linux的命令提示符也叫Shell)

右键开始

安装vue cli,html+css+js,vue.js,javascript,前端

执行:set-ExecutionPolicy RemoteSigned (签名或运行这些脚本)

 set-ExecutionPolicy RemoteSigned

安装vue cli,html+css+js,vue.js,javascript,前端

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

1 去C盘查看用户下npm里是否有node.exe文件 ,大概路径

C:\Users\29412\AppData\Roaming\npm

2 如果少了node.exe,找到node安装路径目录,复制node.exe文件到上面文件路径下,重启即可

安装vue cli,html+css+js,vue.js,javascript,前端

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm list --depth=0 -global   查看已经全局安装的模块

如果全局安装的模块中没有npm 则重新安装  

npm -g install npm@6.13.4

或者

npm install npm@指定版本 -g

安装vue cli,html+css+js,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-767799.html

如果出现一些依赖无法找到的问题,解决办法最好就是将以前能运行的项目中node_modules文件夹复制进来,并且复制package.json文件

到了这里,关于Vue-Cli安装和配置(全)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue学习 之 MacOS 安装 vue-cli

    vue-cli(Vue Command Line Interface)是Vue.js官方提供的一个脚手架工具,它提供了一些命令,可以帮助我们创建基于Vue.js的项目模板,快速开发Vue.js单页面应用(SPA)。使用vue-cli可以配置构建工具、插件、路由、状态管理等等,可以大大提升开发效率,减少重复操作。 vue-cli 的安装

    2024年02月15日
    浏览(48)
  • 使用vue-cli创建vue2项目以及项目配置

    1、安装vue-cli cmd:npm install -g @vue/cli@4.5.19 验证是否安装成功:vue -v   出现版本号说明安装成功 2、创建项目 vue create 项目名称 根据自己的需求选择特性,如下所示: 手动选择: 选择自己需要的特性:例如: 选择vue版本 选择路由模式 (输入y和n都可以,y代表history模式没有

    2024年02月06日
    浏览(55)
  • vue-cli4 配置不同开发环境打包命令

    为什么会需要配置多种环境变量? 在一个产品的开发过程中,一般来说都是会经历这么一个过程: 本地开发 → 测试版部署 → 测试 → 预上线 → 正式上线 。对应的每一个环节中的服务器地址,接口地址...都会不一样。那么我们需要怎么去处理这种情况。 #1. 创建文件 在

    2024年02月16日
    浏览(69)
  • vue-cli3的安装和项目创建

    一 vue-cli3的安装 (注意:vue-cli3在安装之前,需要先删除旧版本,即vue-cli2)   cnpm i -g @vue/cli vue-cli3的卸载:cnpm uninstall -g @vue/cli  然后用命令“vue -V”查看是否删除vue,如果没有删掉,就直接去文件夹里面删除vue文件夹即可 (二)vue-cli3项目创建 1,用dos命令的方式 vue cre

    2024年02月09日
    浏览(56)
  • vue-cli安装后vue -V报错:C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js

    运行 vue -V 一直报错, 网上常识各种办法无效。 包括: 卸载: npm uninstall -g @vue/cli 和 npm uninstall -g vue-cli 重新安装: npm install -g vue-cli 和 npm install -g @vue/cli 清理缓存: npm cache clean --force 更新: npm update 关机重启 N次 依然报错: C:UsersadminAppDataRoamingnpmnode_modules@vueclibin

    2024年02月03日
    浏览(39)
  • windows系统下安装Nodejs并安装vue-cli

    Node.js下载地址 根据自己的电脑选择下载 下载完成后点击下载好的文件 一路 next 安装地址可以根据自己的喜好修改 按住 win + r 输入cmd,按回车,打开命令窗口 输入 node -v ,若显示版本号则安装成功 安装完之后npm指令可以直接使用 输入 npm -v 查看npm版本 node.js会自动帮我们配置

    2024年02月11日
    浏览(57)
  • vue项目(vue-cli)配置环境变量和打包时区分开发、测试、生产环境

    在自定义配置Vue-cli 的过程中,想分别通过.env.development .env.test .env.production 来代表开发、测试、生产环境。 本来想使用上面三种配置来区分三个环境,但是发现使用test来打包后在测试环境会报错,报错信息: Uncaught ReferenceError: exports is not defined 本来以为真的是程序出现什么

    2023年04月08日
    浏览(69)
  • 做法一: vue-cli(webpack)配置开发环境、测试环境、生产环境

            由于开发环境、测试环境、生产环境三者是放在不同的服务器导致请求的接口URL地址不同,所有需要配置根据不同的环境使用不同的服务器地址。 请先简单阅读一下官方文档,了解一下概念 1、根目录创建 .env.development 、 .env.test 、 .env.production 文件(开发、测试、生

    2024年02月07日
    浏览(65)
  • uniapp之通过vue-cli命令行创建Vue3/Vite版,JavaScript开发,引入uni-ui扩展组件

    注意: Vue3/Vite版要求 node 版本^14.18.0 || =16.0.0 如果使用 HBuilderX(3.6.7以下版本)运行 Vue3/Vite 创建的最新的 cli 工程,需要在 HBuilderX 运行配置最底部设置 node路径 为自己本机高版本 node 路径(注意需要重启 HBuilderX 才可以生效) HBuilderX Mac 版本菜单栏左上角 HBuilderX-偏好设置

    2024年02月12日
    浏览(57)
  • less中:export 无效问题,vue-cli中导出公共变量,js对象为空对象

    试例 解决方案 注:在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象 通过阅读官方文档,发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾,这样就可以识别出css module。 这里是将自己项目中的variables.le

    2024年02月13日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包