精华内容
下载资源
问答
  • 1. 为什么 vue升级到 3.x 以上版本? 这里关于一篇 vue 实战教程 :https://www.bilibili.com/video/BV1EE411B7SU?t=111&p=5 如果vue 版本为 2.x 时,无法使用 vue ui 指令生成 下面为 vue 3.x 以上版本才能...

    1. 为什么 vue 要升级到 3.x 以上版本?

    这里关于一篇 vue 实战教程 :https://www.bilibili.com/video/BV1EE411B7SU?t=111&p=5
    如果vue 版本为 2.x 时,无法使用 vue ui 指令生成

    下面为 vue 3.x 以上版本才能执行,并且显示的 UI 页面效果

    在这里插入图片描述
    在这里插入图片描述

    2. 如果当前mac系统下的 vue 版本为2.x

    查看vue版本指令 注意:这里V是大写

    vue -V 
    

    执行升级指令

    npm i -g @vue/cli
    

    会出现如下效果
    在这里插入图片描述
    正常情况下,mac系统执行指令无法将 vue 升级

    3. 如何将 vue 优雅的升级到 3.x 以上的版本

    3. 1 第一步:找到 vue的路径

    which vue
    

    在这里插入图片描述

    3. 2 第二步:cd url (/usr/local/bin) 进到vue项目上级的文件夹

    注意:这里进行一个知识的扫盲,usr是Unix System Resource并不是user的缩写(这里存放系统级别的程序文件)

    cd /usr/local/bin
    

    在这里插入图片描述

    3. 3 第三步:rm -rf vue 彻底删除vue文件夹及其所有文件

    rm -rf vue 
    

    3. 4 第四步:重新安装 vue 最新版本

    使用sudo时,会输入本机的密码(如果不使用sudo 则仍旧报错)

    sudo npm install -g @vue/cli
    

    3. 5 第五步:检查是否安装成功

    vue -V
    

    在这里插入图片描述

    4. 启动 vue ui 界面

    在这里插入图片描述

    展开全文
  • 前言 从1.0.X版本就开始使用vue了,应该也是vue很早的一批用户。...如今vue升级2.0后,在自定义指令部分的API全部变化了!对于一个插件作者来说这简直是崩溃的!毫无兼容可言。本文我就讲介绍下一个自定义指...
        

    前言

    从1.0.X版本就开始使用vue了,应该也是vue很早的一批用户。在我司使用vue这一年多以来(偏向移动端),我发现vue的插件真的是少之又少,这也是我当初一开始想写v-tap指令插件的初衷。

    如今vue升级2.0后,在自定义指令部分的API全部变化了!对于一个插件作者来说这简直是崩溃的!毫无兼容可言。本文我就讲介绍下一个自定义指令从1.0升级到2.0所走的坑。T.T

    吐槽

    我们知道,一个方法最重要的就是传参,所以自定义指令最需要的也是这点。在实现过程中,最大的变化就是这点。

    // 1.0版本能实现以下API
    v-tap="args($index,el,$event)"
    // 而2.0版本后完全不能,必须使用对象的形式,如下
    v-tap="{ methods:args , index : index, item:item }"

    简直了!完全不知道作者为啥这样设计!(这太让我蛋碎了,如果你有更好的姿势,请尽快告诉我)

    好吧,习惯了这样不优雅的画风之后其实还是可以勉强适应的。

    踩坑

    一开始如果你直接实现一个指令不需要传参你会发现,vue的指令机制是直接取value得,所以你可以直接写v-directive="func"这样执行完全没有问题,在你的自定义指令中只需要 binding.value.call即可

    但是如果你写了 v-directive="func('aa')" 你将会发现,vue的指令机制把它解析成了expression,正如文档所说(大写懵逼)

    expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。

    这又将导致了一个问题,在vue1.0中你可以写v-directive="a++" 这样可以直接使data里的变量a++,而在2.0中这会报错,应该都是解析成了expression的原因

    在我使用百般姿势后,最后不得不从了文档中的最后一种写法--对象字面量

    <div v-demo="{ color: 'white', text: 'hello!' }"></div>
    Vue.directive('demo', function (el, binding) {
      console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    })

    那指令插件如何兼容1.0和2.0呢?我是这样处理的,分别写两个对象,判断版本不同注册不同指令

    var vue1 = { ... };
    var vue2 = { ... };
    
    vueTap.install = function (Vue) {
        if(Vue.version.substr(0,1) > 1 ) {
            isVue2 = true;
        }
        
        Vue.directive('tap', isVue2 ? vue2 : vue1);
    };

    以上就是本次自定义指令升级的两个大坑!

    vue自定义指令实现v-tap插件

    github vue-tap


    这个月的奶粉钱有没有,就看你们赞赏不啦了。

    Have a nice day

    展开全文
  • 如今vue升级2.0后,在自定义指令部分的API全部变化了!对于一个插件作者来说这简直是崩溃的!毫无兼容可言。本文我就讲介绍下一个自定义指令从1.0升级到2.0所走的坑。T.T 吐槽 我们知道,一...

    前言

    从1.0.X版本就开始使用vue了,应该也是vue很早的一批用户。在我司使用vue这一年多以来(偏向移动端),我发现vue的插件真的是少之又少,这也是我当初一开始想写v-tap指令插件的初衷。

    如今vue升级2.0后,在自定义指令部分的API全部变化了!对于一个插件作者来说这简直是崩溃的!毫无兼容可言。本文我就讲介绍下一个自定义指令从1.0升级到2.0所走的坑。T.T

    吐槽

    我们知道,一个方法最重要的就是传参,所以自定义指令最需要的也是这点。在实现过程中,最大的变化就是这点。

    // 1.0版本能实现以下API
    v-tap="args($index,el,$event)"复制代码
    // 而2.0版本后完全不能,必须使用对象的形式,如下
    v-tap="{ methods:args , index : index, item:item }"复制代码

    简直了!完全不知道作者为啥这样设计!(这太让我蛋碎了,如果你有更好的姿势,请尽快告诉我)

    好吧,习惯了这样不优雅的画风之后其实还是可以勉强适应的。

    踩坑

    一开始如果你直接实现一个指令不需要传参你会发现,vue的指令机制是直接取value得,所以你可以直接写v-directive="func"这样执行完全没有问题,在你的自定义指令中只需要 binding.value.call即可

    但是如果你写了 v-directive="func('aa')" 你将会发现,vue的指令机制把它解析成了expression,正如文档所说(大写懵逼)

    expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。

    这又将导致了一个问题,在vue1.0中你可以写v-directive="a++" 这样可以直接使data里的变量a++,而在2.0中这会报错,应该都是解析成了expression的原因

    在我使用百般姿势后,最后不得不从了文档中的最后一种写法--对象字面量

    复制代码
    Vue.directive('demo', function (el, binding) {
      console.log(binding.value.color) // => "white"
      console.log(binding.value.text)  // => "hello!"
    })复制代码

    那指令插件如何兼容1.0和2.0呢?我是这样处理的,分别写两个对象,判断版本不同注册不同指令

    var vue1 = { ... };
    var vue2 = { ... };
    
    vueTap.install = function (Vue) {
        if(Vue.version.substr(0,1) > 1 ) {
            isVue2 = true;
        }
    
        Vue.directive('tap', isVue2 ? vue2 : vue1);
    };复制代码

    以上就是本次自定义指令升级的两个大坑!


    vue自定义指令实现v-tap插件

    github vue-tap


    Have a nice day

    展开全文
  • vue项目升级

    千次阅读 2019-06-06 18:13:36
    项目中使用的依赖包版本比较旧,在新的版本中一些指令被废弃了,也添加了一些新的指令用法,修复了之前版本存在的局限性。如果不定期升级版本,后期维护起来会很麻烦。 依赖包 旧版本号 新版本升级命令 ...

    一、需要升级的依赖包

    项目中使用的依赖包版本比较旧,在新的版本中一些指令被废弃了,也添加了一些新的指令用法,修复了之前版本存在的局限性。如果不定期升级版本,后期维护起来会很麻烦。

    依赖包 旧版本号 新版本号 升级命令
    vue 2.5.16 2.6.10 npm update vue
    vue-router 3.0.1 3.0.3 npm update vue-router
    vuex 3.0.1 3.1.1 npm update vuex
    @vue/cli 3.0.0-rc.3 3.8.2 npm update @vue/cli

    二、升级方式

    1. 手动修改pageage.json文件中依赖项版本号。
    2. 命令行升级。

    三、node版本升级

    1. 查看node的安装路径:which node
    2. 查看远程node版本:nvm ls-remote
    3. 查看本地安装的node版本:nvm list
    4. 安装不同版本node:nvm install v8.11.3
    5. 选定node版本作为开发环境:nvm use 8.11.3
    6. 卸载对应的node版本:nvm uninstall v8.11.3
    7. 切换本地最新node版本:nvm use node
    
    展开全文
  • vue项目1.0升级2.0总结

    2018-07-17 09:52:39
    vue版本升级官网地址:https://cn.vuejs.org/v2/guide/migration.html 配置文件的更改 依赖包更新 路由写法更改 指令更改 钩子函数更改 通信方法 废弃的api 相应依赖包不适合当前框架版本的重构 props的属性不能在...
  • 目前vue-cli已经升级版本4,所以执行如下命令会安装vue-cli版本4。 > npm install -g @vue/cli 如果想要安装vue-cli3.0版本,可以执行如下指令。 > npm install -g @vue/cli@3.11.0 二、详解 如果要...
  • 2021年1月9日更新:新增:解决国内用户下载electron速度太慢的问题调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句背景朋友是做商品零售,每月都需要将销售数据汇总至年度销售表格中,...
  • vue脚手架vue-cli的卸载和安装

    万次阅读 多人点赞 2019-11-22 09:12:50
    若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级vue-cli的最新版本4.0.5,则需要将旧版本卸载,然后再重新安装@vue/cli。 vue-cli:vue3.0之前版本使用此名称 @vue/...
  • Vue CLI 3搭建

    2019-03-28 16:27:57
    vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本。 卸载指令:npm uninstall vue-cli -g or yarn global remove vue-cli 安装 ...
  • 在git中输入指令vue create hello-world,没反应,因为vue-cli的...vue-cli从2.x版本升级到3.x版本卸载包报错. 根据官网的指令输入:yarn global remove vue-cli 报错: error This module isn't specified in a p...
  • vue2.0实战案例之高级教程-老孟编程

    千次阅读 2017-06-10 21:39:51
    vue版本升级和使用方式,vue和jquery.js,和zepto.js的优劣势分析。 vue为什么无法在开发小程序里无法使用,Windows对象分析。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 009:...
  • Vue3.0 路由的配置

    千次阅读 2020-09-08 10:45:42
    由于 vue-cli 没有直接支持创建 Vue3.0 项目,所以需要通过插件升级,我们输入指令vue add vue-next 升级后的版本 "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0-beta.1", "vue-class-component":...
  • 文档参照: vue-property-decorator ...vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,官方的建议是,把旧版本的卸载了,再安装新版本。 卸载指令如下:npm uninstall vue-cli ...
  • vue/cli 3.0脚手架搭建

    2018-11-15 11:42:02
    如今,官方文档已经升级3.0,在 vue-cli 3.0中,我们需要重新配置: 如果你已经安装了vue 2.9.6 的话,则需要先将其删除: npm uninstall -g vue-cli  更新Vue-cli 指令: npm install -g @vue/cli # OR ...
  • Vue3项目搭建

    2021-01-15 16:38:40
    此文将介绍如何搭建一个Vue3项目 基于官方文档 ...要升级,你应该需要全局重新安装最新版本的 @vue/cli: // 卸载 npm uninstall vue-cli -g // 安装 npm install @vue/cli -g 也可以使用cnpm下载,这
  • VUE Cli安装与应用

    2019-08-13 22:32:43
    Vue_CLI :脚手架工具,借助WebPack用于快速构建标准vue项目。...vue cli 升级到3后,package的名字从 vue-cli 改为了 @vue/cli,装了旧版本的,建议把旧版本的卸载了,再安装新版本。 卸载指令如下: npm uninstal...
  • Vue 4.0创建项目流程

    2020-10-23 09:53:18
    1.将Vue升级到最新版本 1.1 先卸载旧版本Vue, 命令为 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载 1.2.npm删除全部依赖node_modules目录 1.2.1 安装npm包–rimraf 命令为: npm install rimraf ...
  • vue3.0 新的api属性

    2020-09-02 13:29:17
    创建项目后,执行该操作 vue add vue-next 执行上述指令后,会自动安装 vue-cli-plugin-vue-next ...自动将代码中的 Vue Router 和 Vuex 升级到 4.0 版本,如果未安装则不会升级 自动生成 Vue Router 和 Vuex .
  • 项目均已最新技术实现,Vue3配套升级全家桶和涉及的插件组件等 项目采用技术: vue3 + composition api typescript3.9 sass (dart sass) echats5 vue next 系列: element-plus vue-router-next vuex-4.0 vue-i18n-...
  • vue-cli3.0使用及配置(部分)

    万次阅读 多人点赞 2018-06-19 22:18:28
    搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) ...
  • vue3.0 - 1.初体验

    2020-06-23 18:01:44
    Vue 3.0 项目初始化 第一步,安装 vue-cli: ...vue-cli 还没有直接支持,我们进入项目目录,并输入以下指令: cd vue-next-test vue add vue-next vue2.0 vs 3.0 默认进行懒观察(按需监听) 在 2.x 版本里,不管
  • 问题描述在router-view外面引用的组件(比如导航栏), v-link 指令不起作用,无法跳转,会报错:Failed to resolve directive: link (found in component:...这个问题是因为vue 版本的问题,vue版本升级后,取消了v-...
  • 1、安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好) 2、在目标文件夹下打开终端 3、执行cnpm install...
  • vue 3.0脚手架搭建(详解)

    千次阅读 2019-11-28 10:01:23
    一、下载升级 npm i @vue/cli@3.6.3 -g //这里可以使用cnpm 下载的快点 //下载好后可以使用 vue -V 查看版本 这是3.6.3版本的,很多人看官网下载的都是最新版本的 npm run serve——启动项目指令 二、下载好后,...
  • vue3.0搭建,从零开始

    2020-11-27 16:36:38
    vue3.0搭建,从零开始(2020年11月27日14:56:35) 搭建vue3.0脚手架插件分布情况(最新版) 输入npm info xxxx(插件名称) versions可...1.第一步(监测及升级vue-cli到最新版) 打开你的终端命令界面(输入以下指令查看
  • vue前端框架第二天

    2019-05-30 21:35:43
    升级版本加了过滤器1>.在vue中定义过滤器2>.使用过滤器3>.过滤器调用的时候采用的是就近原则3.padStart(让时间显示为1月变成01月)4.键盘自定义修饰符1.>基本使用2.>起别名5.自定义指令使用:功能:...
  • 搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了)   这里...
  • 点击这里查看的Vue 3.X的升级版本(Element-plus) 1、输入指令 npm i element-ui -S 2、安装成功 3、引用 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

vue版本升级指令

vue 订阅