Vue-Cli安装和配置(全)

Vue-cli是一个用于快速搭建Vue项目的脚手架工具,简化了Webpack的配置和使用,支持热部署。文章详细介绍了如何安装Node.js和配置npm,包括设置国内镜像(如淘宝镜像)以加速下载,以及如何解决安装过程中可能出现的问题,如执行权限和找不到文件的错误。
摘要由CSDN通过智能技术生成

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的全局安装路径:

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

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 镜像名 使用镜像

也可以使用淘宝镜像:

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

安装Vue-Cli

npm install -g @vue/cli

vue --version

 可能出现的问题

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

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

右键开始

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

 set-ExecutionPolicy RemoteSigned

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

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

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

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

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

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

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

npm -g install npm@6.13.4

或者

npm install npm@指定版本 -g

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

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: vue-cli2和vue-cli3有一些重要的区别: 1.配置文件: vue-cli2使用的是`config/index.js`文件来配置项目,而vue-cli3使用的是`.env`和`.env.xxx`文件来配置项目. 2.构建工具: vue-cli2使用的是webpack1,而vue-cli3使用的是webpack4. 3.项目结构: vue-cli2项目结构比较简单,而vue-cli3提供了更加灵活的项目结构. 4.插件系统: vue-cli2使用的是局插件,而vue-cli3使用的是局部插件. 5.使用方式: vue-cli2是安装,而vue-cli3是局部安装. ### 回答2: Vue-cli是一个vue.js的官方脚手架工具,它可以帮助我们更快地搭建一个基于Vue的项目。Vue-cli2和Vue-cli3是Vue-cli的不同版本,在一些方面存在一些显著的差异。 1. 项目结构: Vue-cli2生成的项目结构中,代码和配置信息都放在同一个文件夹中,每一个功能模块都需要手动创建;而Vue-cli3采用了新的配置方案,将项目的配置信息单独抽离出来,并且在工具创建项目时自动生成了更完整的项目结构,使项目结构更加清晰和易于管理。 2. 配置方式: Vue-cli2是通过修改webpack.config.js文件来进行项目配置的,而Vue-cli3则是通过创建vue.config.js文件来进行项目配置的。在Vue-cli3中,我们可以直接在vue.config.js中添加一些特定的配置,而无需修改webpack.config.js文件。这样做更加方便,也更加容易管理项目的开发和部署。 3. 优化: 在Vue-cli3中,作者对项目进行了一些自动优化的处理,例如:自动抽取第三方库等,以优化打包和运行速度。而Vue-cli2则需要手动配置优化选项。 总之,Vue-cli3相比Vue-cli2在工程化方面有了更多的改进和优化,我们将会更加方便、快捷地构建一个基于Vue的项目。 ### 回答3: Vue是一个流行的JavaScript框架,它允许开发人员构建动态Web应用程序。而Vue CLI是Vue的脚手架工具,用于快速构建Vue项目。Vue CLI 2和Vue CLI 3是Vue CLI的不同版本,下面将介绍它们之间的不同: 1.项目结构:Vue CLI 2生成的项目结构是采用传统的单一的Webpack配置文件,而Vue CLI 3则是基于插件的灵活的配置,将Webpack配置拆分为多个小的配置文件。 2.依赖:Vue CLI 2使用的是Vue Router 2,而Vue CLI 3升级到了Vue Router 3,同时也使用了新的Vuex。 3.插件化: Vue CLI 3采用了插件化的概念,每个插件都可以为开发者提供定制的Webpack配置和功能增强。 4.内置功能:Vue CLI 3集成了一些内置功能如:PWA支持、自动生成样式和文档等。 5.提高性能:Vue CLI 3对webpack的配置进行了深度优化,提供了更优秀的性能表现,同时还加入了预编译,tree shaking 外置化了 `webpack`,对项目编译速度支持了更大的提升。 总的来说,Vue CLI 3采用了更先进的技术、更简单的配置结构、更多的内置功能和更好的性能。如果你计划开始一个新的Vue项目,强烈建议使用Vue CLI 3,以提高代码的开发效率和性能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Stella呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值