精华内容
参与话题
问答
  • 最近由于新项目需要升级到@vue/cli3.x +, 所以我开启了本来以为非常简单顺利的升级踩坑之路。 首先卸载vue-cli 2.x npm uninstall -g vue-cli 接着,全局安装@vue/cli3.x + npm install -g @vue/cli 由于现在...

    最近由于新项目需要升级到@vue/cli3.x +, 所以我开启了本来以为非常简单顺利的升级踩坑之路。

    首先卸载vue-cli 2.x

    npm uninstall -g vue-cli

    接着,全局安装@vue/cli3.x +

    npm install -g @vue/cli

    由于现在已经有了@vue/cli4.x的版本,所以默认一次性直接就升级到了@vue/cli 4.1.1

    本来以为到这里就好了,因为正常 来讲升级就应该是这样的步骤,但没想到,坑非常之多。

     

    首先,大坑1:全局安装完@vue/cli 4.1.1 之后,执行vue -V, 居然报错,不是不识别vue命令,而是报错,也就是vue命令用不了。

    我这里的报错是:

    internal/modules/cjs/loader.js:638

    对此,网上资料甚少,

    唯一找到有人也碰到一样的问题,但他们的解决办法在我这不管用,所以我懵了。

    其中有个人的解决方案是:

    找到“C:\Users\你的用户名”底下的.npmrc文件删除,然后在cmd进入你出错的目录下用"npm uninstall vue-cli"命令卸载vue2.x版本。这里不要加 -g。因为我之前已经全局安装了3.x版本,所以就不用再安装了,到这里我的问题就解决了。

    但,我这里居然找不到 .npmrc这个文件,所以我只能自己去摸索别的方法。

    这里再说一下另外一个大坑,那就是vue-cli2.x版本在之前执行完卸载操作之后,根本就没卸载,或者说没卸载干净,因为我执行npm view vue-cli version的命令,结果出来版本:2.9.6。

    所以,这里又好玩了。

    网上又查了一下,基本上在升级的时候,每个人都碰到了这个问题,就是其实2.9.6根本没卸载完成。最直接的证据就是node 安装包下面的的npm 包里,确实还存在vue-cli的文件夹和文件。

     

    所以我这里猜测,第一个坑的出现应该也和vue-cli2.x的版本没卸载干净有关。

    然后我就直接把那个vue-cli的文件夹全部干掉了,现在查vue-cli的版本,就查不到了。

    然后我再去执行vue -V, 依然有那个报错。

    然后我又在nodejs环境变量里搞了一番,发现一无所用。

     

    至此,我已经放弃了解决这个报错,来恢复@vue/cli3.x+版本的正常了。

    所以,既然治标没用,那我就来治本——重装nodejs。

    ok, 卸载nodejs, 删除npm下所有全局安装过的包。

     

    重新安装node,建议修改安装目录,不要把node直接安装到c盘下,我安装到了D盘。

    声明一下,我之前电脑安装的是nodejs10.x版本,这次重装,我直接拿了最新的稳定版nodejs12.x的版本。(这里又会有一个坑)

     

    新的nodejs安装完之后,建议在nodejs的安装目录下,新建两个文件夹:

    用来存放,npm全局安装的包,便于管理,不然默认会被安装到这个目录。

    C:\Users\用户名\AppData\Roaming\npm

    然后在命令行执行:

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

    这样,npm全局安装的包就会到这个目录下,而不是默认的C:\Users\用户名\AppData\Roaming\npm这个目录。

    此时,你去C:\Users\用户名  这个目录下,也能看到.npmrc这个文件,打开它,你可以看到你刚刚配置的一些东西。

    到此,npm和nodejs配置好了, 你可以执行npm -v 查到npm的版本,确定它是否安装成功。

    这个时候你再去全局安装@vue/cli,

    npm install -g @vue/cli

    然后再执行 vue -V, 发下你vue命令不识别。

    这个时候不用担心了,不是什么其他奇葩的错误,只是因为环境变量还没配好。

    到系统环境变量那里,添加一个新的路径,D:\nodejs\node_global。也就是刚刚我们npm全局安装包的路径,因为刚刚安装的@vue/cli这个包在那个路径下。

     这个时候你再去命令行执行vue -V, 运气好就能看到这个,

    运气不好,你需要重启,新的环境变量才能生效。

    注意,很多人说需要再加一个NODE-PATH的系统环境变量,其实现在已经不需要,加了上面那个变量路径就可以了。

     

    接着你用新的vue 命令创建基本@vue/cli3.x + 的项目,就没问题了。

    vue create vuecli-3-demo

    最后,前面还提到了一个nodejs 10.x升级到nodejs12.x的版本会导致一些问题。

    那就是vue-cli2.x的老项目你再跑的时候,会报错,告诉你nodejs12.x的版本依赖的node-sass的版本也不一样,你需要执行下

    npm rebuild node-sass

    但是又会报错,报的错忘记截图了,但是很解决方法很简单,网上一查就有了。就是将vc 2012环境升级到vc 2015, 然后再npm rebuild node-sass

    这样就是可以了。

    当然你也可以重新把nodejs的版本降低,或者重装node-sass新的版本,再rebuild一下,也能解决这个问题。

     

    end~

    展开全文
  • vue-cli的安装及版本查看更新

    千次阅读 2019-09-20 21:07:48
    vue-cli安装 npm install vue-cli -g vue-cli的版本查看 vue -V vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的 npm ...

    vue-cli安装

    npm install vue-cli -g

    vue-cli的版本查看

    vue -V

    vue-cli的3.0+以后使用的不是vue-cli了,如果用以上的安装命令安装的并不是最新版的3.0+的,而如果安装3.0的话就需要使用新的

    npm install @vue/cli -g

    如果原来已经安装了vue-cli的话需要先卸载原来的安装

    npm uninstall vue-cli -g

     

    转载于:https://www.cnblogs.com/wyongz/p/11505048.html

    展开全文
  • vue-cli2.+版本 升级 vue-cli3.+版本 首先卸载旧版本 npm uninstall vue-cli -g ...安装更新之后 , 通过 vue -V 查看 vue-cli 安装的版本,如果版本没有发生变化,排除掉 npm 环境的问题,那么可能是因为缓存...

    vue-cli2.+版本 升级 vue-cli3.+版本

    首先卸载旧版本

    npm  uninstall vue-cli -g

     安装新版本

    npm i @vue/cli -g

      包名称由 vue-cli  改成了   @vue/cli

    安装更新之后 , 通过 vue -V  查看 vue-cli 安装的版本,如果版本没有发生变化,排除掉 npm 环境的问题,那么可能是因为缓存,

    这时,需要清理缓存。注意:使用管理员身份运行此命令

    清除缓存

    npm  cache  clear  --force

     查看版本号:


    @vue/cli(3.版本) 和 vue-cli(2.版本)的区别

    1. vue-cli 创建项目 : vue   init   webpack  [项目名称]                                                                                                                  @vue/cli创建项目 : vue create 项目名称      如果使用git  Bash  Here ,则 需要通过  winpty  vue.cmd  create 项目名称      创建项目,否则,交互提示符无效
    2. vue-cli  启动项目: npm  run  dev                                                                                                                                             @vue/cli 启动项目 : npm  run   serve
    3. @vue/cli 相对于 vue-cli 少了 build(项目的配置文件webpack.config.js等)和config(dev环境、prod环境)目录文件           可通过 新建  vue.config.js 进行代替
    4. vue-cli中的.babelrc文件替换成@vue/cli中的babel.config.js文件
    5. vue-cli 2.版本中 package.json 包配置文件 browserslist                                                                                                                                                                                                                           @vue/cli 3. 版本中 package.json 包配置文件 browserslist                                                
    6. vue-cli 2.版本中 .postcssrc.js 文件                                                                                                                                                                                                                        @vue/cli 3.版本中  .postcssrc.js   文件                                                                                                                                                                                                                                                                                                                                                                                                  

    创建@vue/cli 项目

    vue   create   hello-world                      hello-world:项目名称

     

    默认创建 则 一路安装依赖 ,坐等 安装完成即可

    手动创建:

    按空格进行对应选择,a全选,i反选

    这里我们只采用  Babel + Router + Vuex + Css Processors

    npm run serve  运行时 报错:

    去less的github中找问题和答案   https://github.com/less/less.js/issues/3414  ,下载less3.9.0的版本即可


    安装@vue/cli 3的版本后还想使用vue-cli 2的版本?

    默认情况下,@vue/cli已经没有  vue  init   webpack  命令了,可通过全局安装一个桥接工具

    npm i -g @vue/cli-init

    即可使用   vue  init   webpack  项目名称          创建项目

    创建的依然是vue-cli  2.版本的 vue项目(包含build和config目录等)


     

     

     

     

     

     

     

     

     

    展开全文
  • vue-cli的安装及版本查看更新 vue-cli安装 npm install vue-cli -g vue-cli的版本查看 [注意:-V是大写的] vue -V 现在使用的是vue-cli3.0+,以前使用的是vue-cli,如果用以上的安装命令安装的并不是最新版的...

    vue-cli的安装及版本查看更新

    vue-cli安装

    npm install vue-cli -g

    vue-cli的版本查看  [注意:-V是大写的]

    vue -V

    现在使用的是vue-cli3.0+,以前使用的是vue-cli,如果用以上的安装命令安装的并不是最新版的3.0+的,如果你需要安装3.0的话就需要使用新的就要卸载之前的版本,

    卸载方法:

    npm uninstall vue-cli -g

    vue-cli3.0+的安装

    npm install @vue/cli -g

     

    vue/cli4的安装与使用

    1:若你已安装过vue-cli2的话,你得先卸载掉,命令如下

    //首先查看是否已安装过vul-cli
    vue -V
    //如是有的话,就用下面命令卸载
    npm uninstall vue-cli -g

    2:安装vue-cli 4.0.5 

    //一键初始化项目
    npm init -y
    // 安装vue-cli  
    npm install @vue/cli -g 
    //也可使用cnpm 来安装 ,比较快些
    cnpm install @vue/cli -g

    3:创建一个项目

    //1.命令 回车
     vue create 项目名
    //2.选择自定义配置  Manually select features 
    //3.选择你需要的配置
      Babel (必选)
      TypeScript(项目中使用ts开发的话,就勾选)
      Progressive Web App (PWA) Support  (接口缓存,优化项目)
      Router
      Vuex 
      CSS Pre-processors (css预处理器,需要)
      Linter / Formatter (代码格式,一般默认选中)
      Unit Testing (代码测试)
      E2E Testing(需求界面测试)
    //4.根据你选的配置进行Y/N选择
    //5.选择完之后,就可以运行项目  
    npm run serve

    https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack

    条件:

    node在4.以上,npm在3以上

    安装步骤:cmd打开命令行窗口,命令如下

    展开全文
  • vue cli 3 升级到 vue cli 4 方法步骤及升级点总结

    万次阅读 热门讨论 2019-10-26 18:45:44
    vue cli 3 升级到 vue cli 4 指南 vue cli 3 升级到 vue cli 4 方法步骤及升级点总结 vue-cli 3升级vue-cli 4 官方英文升级文档,中文滞后 一.首先,在全局安装最新的 Vue CLI: npm install -g @vue/cli # OR yarn ...
  • vue-cli3 热更新配置

    万次阅读 多人点赞 2019-02-25 21:34:47
    在使用vue-cli3搭建项目之后,发现修改.vue文件里面的内容之后,页面不会自动刷新。 解决方案: 只需要在vue.config.js文件中配置一下就可以实现热更新了,如下: chainWebpack: config => { // 修复...
  • vue-cli4更新历程

    千次阅读 2019-10-17 09:32:16
    4.0.1 (2019-10-16) ...@vue/cli-plugin-eslint, @vue/cli-plugin-router, @vue/cli-plugin-vuex, @vue/cli-service-global, @vue/cli-ui-addon-webpack, @vue/cli-ui-addon-widgets, @vue/cli-ui, @vue/cli...
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...
  • vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html 1. 简介 版本:2.x vue-cli是一个vue脚手架,可以快速构造项目结构 vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码...
  • 升级vue-cli

    2019-11-16 11:25:27
    如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。 然后就可以使用下列任一命令安装这个新的包: npm install -g @vue/cli # OR ...
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是 让你选...
  • 提到 vue-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目...
  • 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置 迁移目录 src->src static->public 对比新旧 package.json,然后yarn install,完毕。 然鹅… ...
  • vue-cli 更新对比

    万次阅读 2018-03-01 09:17:47
    vue-cli 更新对比 Vue-cliVue 官方提供的脚手架工具,他的github 地址是: vue-cli github vue-cli 3.0发布了,相对比于2.0,更新挺大的。本文简单介绍了下初采坑的一些区别 vue-cli 2.0以上 下载...
  • 备忘一下linux下将vue-cli2升级vue-cli3的的过程 1.查看vue-cli的版本命令 vue -V 2.卸载vue-cli2 npm uninstall vue-cli -g 3.安装vue-cli3 npm install -g @vue/cli 我在linux系统下安装失败,报错没有权限。...
  • 使用npm uninstall vue-cli -g 卸载vue-cli的解决方案 卸载原有vue-cli sudo npm uninstall @vue/cli -g 输入密码 Password: 安装最新版vue-cli npm install -g @vue/cli@版本号
  • 浅谈vue-cli 3 和 vue-cli 2的区别!!!

    万次阅读 多人点赞 2018-08-13 17:12:21
    Vue-cli3.0于8.11日正式发布,看了下评论,不是特别的乐观,说说我个人的意见,我是Vue的忠实粉,so.... 大概三个月前超哥就已经得知3.0的消息,试着用了下,相比之下现在的3.0和测试时的区别: modern mode。启用...
  • 关于升级vue-cli3.0踩坑记录

    千次阅读 2019-03-11 16:56:24
    最近在看@vue/cli 3.x 版本,升级vue-cli3.0最新版本的时候遇到很多坑,绕了很多弯。查了很多资料,最终解决。记录一下遇到的问题,以防以后再次发生。 1.升级@vue/cli 3.x 需要安装node.js最新版本。卸载重新安装...
  • vue老项目升级vue-cli3.0问题总结

    千次阅读 2019-07-22 15:45:21
    1、删除原vue-cli并安装vue-cli3.0 2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3、把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js 4、我的项目中src已经分为了...
  • 目前网上关于vue-cli的文字/视频教程多数停留在2.9.6或3.x版本,但毕竟IT行业学新的总不会错。官方推出的版本从3.0开始也做了较大的变动,这里简单做个升级教程。 - 卸载旧版本 卸载命令:npm uninstall -g vue-cli ...
  • vue-cli2 与 vue-cli3

    千次阅读 2019-08-23 09:55:52
    自己是个菜逼,下周还要在自己公司前端团队做简单培训:先提前在此记录内容,如果有什么要补充与建议的,欢迎交流 ...vue-cli2 npm install -g vue-cli vue -V vue init webpack my-project //文件名不能大写 ...
  • vue-cli3相对vue-cli有很多重要的更新。 首先说一些vue-cli这些工具的初衷吧: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的,它们秉承的是“约定大于配置”思想,简单说就是"能不配置的就不...
  • vue-cli3升级vue-cli4

    2020-03-22 14:39:35
    1、全局更新cli 全局安装最新版本的cli npm install -g @vue/cli 查看版本 vue -V 2、项目中更新cli vue upgrade 注意:我在更新的时候中间出现了一次失败,但是重新vue upgrade就成功了 ...
  • 关于vue-cli 中执行的 vue-cli-service

    千次阅读 2020-04-21 17:17:20
    最近又整回vue去了,不说了,还是脚手架先整吧。..."scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 这里执行的是vue-cli...
  • 具体步骤如下: 1.vue-cli2.x.x 版本卸载 ...注意:3.0 级以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 3.检测vue版本(注意:-V, “V”大写) vue -V 4.构建项目(注意:“vuepr...
  • vue-cli 3.x & vue-cli 4.x修改dist路径

    万次阅读 热门讨论 2018-07-04 18:10:50
    前端的世界真的太奇妙,更新速度真的跟火箭一样。没有一颗真正热爱它的心,真的很难继续走下去。前段时间 Node 之父 Ryan Dahl 发布新的开源项目 deno,受到了大量的关注。Ryan Dahl直言node是一个失败品,充斥很多...
  • 1. 安装 vue-cli3.0 ,可以使用下列任一命令安装这个新的包: 2.打开终端,创建一个项目 3. 配置 自己选择 4. 项目构建完成 启动项目 4.1启动成功 4.2 运行报错 无报错 忽略 5.安装axios 6. 配置 vue....
  • 浅析vue-cli2和vue-cli4

    千次阅读 2020-05-11 16:04:39
    查看当前版本,如果是2开头说明当前使用的是vue-cli2,3开头的话就是vue-cli3 vue --version 如果无法识别vue命令说明没有安装vue-cli,使用以下说明进行安装 安装2.0版本: npm install -g vue-cli 安装3.0版本: ...
  • vue-clivue-router(一)

    千次阅读 2017-11-13 23:19:55
    使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: ‘#container ‘}) 在每个页面内指定一个容器元素。当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,这种做法的缺点很多:全局定义 ...

空空如也

1 2 3 4 5 ... 20
收藏数 85,124
精华内容 34,049
关键字:

vue-cli更新

vue 订阅