精华内容
下载资源
问答
  • 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 cli 3 升级到 vue cli 4 方法步骤及升级点总结

    官方升级英文文档中文文档相对滞后。

    简介:vue cli 4 官方已经更新有一段时间了,现在是4.0.5 版本,看了官方文档大概有二十几点的更新,还是干货满满呀,值得升级一下,下面是升级步骤。

    一.首先,在全局安装最新的 Vue CLI:

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    检查安装的版本

    vue -V  # 输出:@vue/cli 4.x.x  说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )
    

    踩坑记录

    npm install -g @vue/cli 执行成功,但是执行 vue -V 输出的还是3.5.6(我以前安装的版本),

    于是又重新执行 npm install -g @vue/cli,显示成功,执行 vue -V 输出的还是3.5.6

    一脸懵逼 ,然后重启电脑,再执行vue -V 输出 @vue/cli 4.0.5,解决 。

    二.在项目根目录下执行

    vue upgrade
    

    然后出现
    在这里插入图片描述

    提示 继续升级这些插件吗? 输入 Y 即可.

    三.等步骤二 执行完会发现主要有 2 个文件被修改

    1.文件 babel.config.js

    主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset

    原来的

    module.exports = {
      presets: [
        '@vue/app', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
    

    升级后的

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset', //  这行
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'entry'
          }
        ]
      ]
    }
    

    2.文件 package.json (package-lock.json 也会更改)

    主要是依赖升级

    原来的

    {
      "@vue/cli-plugin-babel": "^3.11.0",
      "@vue/cli-plugin-eslint": "^3.11.0",
      "@vue/cli-service": "^3.11.0"
    }
    

    升级后的

    {
      "@vue/cli-plugin-babel": "^4.0.5",
      "@vue/cli-plugin-eslint": "^4.0.5",
      "@vue/cli-service": "^4.0.5"
    }
    

    四.然后启动项目

    npm run serve
    

    然后报下面的错

    在这里插入图片描述

    1.第一个错(警告)

     WARN  A new version of sass-loader is available. Please upgrade for best experience.
    

    这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的

    它把 sass-loader^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0

    所以升级一下自己项目的 sass-loader 就好了

    执行下面命令即可

    npm i sass-loader@8.0.0 -D
    

    2.然后第二个错说没有安装core-js

    vue cli 4core-js^2.x.x 的版本升级到了 ^3.x.x

    于是安装一下

    npm i core-js
    

    然后重启项目还是不行,看了下官方文档和 babel 有关

    main.js 代码中

    import '@babel/polyfill'
    

    隐藏这个代码

    重启好了

    然后把 @babel/polyfill 换成 babel-polyfill 即可

    npm i babel-polyfill
    

    main.js 代码中 改为

    import 'babel-polyfill'
    

    五.vue cli 4 主要升级点总结

    1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"v3 的版本升级到了 v4

    2.sass-loaderv7 的版本升级到了 v8

    3.core-jsv2 的版本升级到了 v3

    4.webpack-chainv4 的版本升级到了 v6

    5.css-loaderv1 的版本升级到了 v3

    6.url-loaderv1 的版本升级到了 v2

    7.file-loaderv3 的版本升级到了 v4

    8.copy-webpack-pluginv4 的版本升级到了 v5

    9.terser-webpack-pluginv1 的版本升级到了 v2

    10.@vue/cli-plugin-pwav3 的版本升级到了 v4

    11.新增插件 vue add vuex vue add router

    12.pug-plain已重命名为pug-plain-loader

    13.默认目录结构已更改

    src/store.js 改为 src/store/index.js

    src/router.js 改为 src/router/index.js

    14.由于兼容性原因,仍支持 router&routerHistoryMode 选项 preset.json

    但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }

    获得更好的一致性

    15.api.hasPlugin('vue-router')不再受支持,现在 api.hasPlugin('router')

    16.lintOnSave 选项的默认值(未指定时)从 true 更改为 default

    17.废弃vue-cli-service test:e2e

    18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

    19.@vue/cli-plugin-unit-mocha 升级到Mocha 6

    20.@vue/cli-plugin-unit-jest jestv23 升级到v24

    21.@vue/cli-plugin-typescript 更好的ts(x)支持 ,胜过js(x)

    参考链接

    vue cli 4 官方英文升级文档

    展开全文
  • Vue CLI

    千次阅读 2020-11-02 19:42:49
    Vue CLI 安装 Node 版本要求 Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 可以使用下列任一命令安装这个新的包: npm ...

    Vue CLI

    安装

    Node 版本要求

    Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 nnvmnvm-windows 在同一台电脑中管理多个 Node 版本。

    可以使用下列任一命令安装这个新的包:

    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli
    

    你还可以用这个命令来检查其版本是否正确:

    vue --version
    

    升级

    如需升级全局的 Vue CLI 包,请运行:

    npm update -g @vue/cli
    
    # 或者
    yarn global upgrade --latest @vue/cli
    

    创建一个项目

    运行以下命令来创建一个新项目:

    vue create testapp
    

    终端会弹出以下信息

    image-20201101103746870

    • Default ([Vue 2] babel, eslint) - 选择 Vue2
    • Default (Vue 3 Preview) ([Vue 3] babel, eslint) - 选择 Vue3
    • Manually select features - 手动选择

    我选择第三种,手动选择,出现以下界面

    image-20201101104044392

    需要使用/取消哪些功能,按空格进行使用/取消即可

    • Choose Vue version - 选择 Vue 版本
    • Babel - 编译
    • TypeScript - TypeScript语言
    • Progressive Web App (PWA) Support - PWA技术支持
    • Router - 路由
    • Vuex - Vuex
    • CSS Pre-processors - CSS 预处理器
    • Linter / Formatter - 代码格式化警告
    • Unit Testing - 单元测试
    • E2E Testing - 端对端的测试

    我只选择了 Babel

    image-20201101104952079

    • In dedicated config files - 使用单独的文件
    • In package.json - 将所有的文件都配置在 package.json 文件中

    我选择 In package.json

    然后后面的配置直接写 Yes ,下面随便写个名,我写的 esayconfig

    image-20201101105518519

    等待安装即可…

    我安装了五分钟

    image-20201101111148662

    安装好之后,我们看一下它安装了哪些文件,它的目录结构是什么样的

    image-20201101110205468

    • node_modules - 安装的依赖包,里面有 754 个项目

    • public - 存放静态文件的目录

    • src- 工作的地方!

      • 注意里面的 .vue 文件不能直接在浏览器运行,需要通过 vue-cli 编译成 .html 之后才能运行

    按照提示执行命令试一下

    cd testapp
    npm run server
    

    提示服务开启成功

    image-20201101111416089

    去浏览器访问看看吧

    如果想要对代码进行编译,那就使用下面的命令吧

    npm run build
    

    会生成一个 dist 目录,这是可以放到服务器上的代码目录

    需要注意的是,现在这个项目中的 html 文件不能运行,是因为路径没有改,这个后面可能才会讲怎么改吧,先在这里放着吧

    使用图形化界面

    你也可以通过 vue ui 命令以图形化界面创建和管理项目:

    vue ui
    

    上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。😂

    image-20201101113518216

    点击创建

    image-20201101113641333

    点击在此创建新项目

    image-20201101113735577

    填好之后点击下一步

    image-20201101113835524

    选择手动,点击下一步

    image-20201101113936297

    我只选择 Babel,点击创建项目

    image-20201101114044489

    直接点击创建项目,不保存预设

    image-20201101114203240

    等待即可…

    创建完成之后会出现以下界面

    image-20201101115340315

    点击配置,修改公共路径为 ./ ,这样就能使 .html 文件可以正常访问了,点击保存修改

    image-20201101115530696

    点击任务,点击 build 进行编译并压缩(用于生产环境),然后点击运行

    image-20201101115735490

    等待即可…

    Vue 脚手架的自定义配置

    1.通过 package.json 项目

    //必须是符合规范的json语法
    "vue" : {
        "devserver" : {
            "port" : "8888", // 端口号
            "open" : true // 服务启动后自动打开浏览器
        }
    },
    

    注意: 不推荐使用这种配置方式。因为package.json主要用来管理包的配置信息;为了方便维护,推荐将vue脚手架相关的配置,单独定义到 vue.config.js 配置文件中。

    2通过单独的配置文件配置项目

    ① 在项目的跟目录创建文件vue.config.js

    ② 在该文件中进行相关配置,从而覆盖默认配置

    // vue.config.js
    module.exports = {
        devServer: {
            open: true, // 服务启动后自动打开浏览器
        	port: 8888 // 端口号
        }
    }
    

    Element-UI 的基本使用

    Element-UI:一套为开发者、设计师和产品经理准备的基于vue 2.0 的桌面端组件库官网地址为: http://element-cn.eleme.io/#/zh-CN

    1.基于命令行方式手动安装

    ① 安装依赖包 npm i element-ui -S

    ②导入 Element-UI 相关资源

    // 导入组件库
    import ElementUI from 'element-ui';
    // 导入组件相关样式
    import 'element-ui/lib/theme-chalk/index.css';
    // 配置vue插件
    Vue.use(ElementUI);
    

    2.基于图形化界面自动安装

    ① 运行 vue ui 命令,打开图形化界面

    ② 通过 vue项目管理器,进入具体的项目配置面板

    ③ 点击 插件->添加插件,进入插件查询面板

    ④ 搜索 vue-cli-plugin-element 并安装

    ⑤ 配置插件,实现按需导入,从而减少打包后项目的体积

    展开全文
  • vuecli创建项目 vuecli创建项目
  • 下面记录本人从卸载Vue CLI 2更新Vue CLI 3开始,一步步搭建VUE项目,并同时能用Vue CLI 2 启动Vue CLI 2搭建的项目。 注:本人电脑MAC。 一、卸载Vue CLI 2,安装Vue CLI 3: 1.关于旧版本: Vue CLI 的包名称...

    Vue CLI 3问世后,因为公司项目紧张,一直没有机会学习。在项目上线后,本人终于抽出时间来自学一下。下面记录本人从卸载Vue CLI 2更新Vue CLI 3开始,一步步搭建VUE项目,并同时能用Vue CLI 2 启动Vue CLI 2搭建的项目。

    注:本人电脑MAC。

    一、卸载Vue CLI 2,安装Vue CLI 3:

    1.关于旧版本:

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

    2.Node 版本要求

    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

    3.卸载安装

    先卸载旧版本(npm uninstall vue-cli -g),本人运行后权限不够,所以前面加了 sudo;卸载后,查看vue的版本,显示无此文件,表示卸载成功:

     

    卸载成功后,安装Vue CLI 3(npm install -g @vue/cli):

    安装成功后,可用下边命令行查看版本,我的版本是3.1.0:

    vue --version 或 vue -V 

    也可用命令:vue,查看vue相关命令:

     OK,目前为止,Vue CLI 2卸载完成,Vue CLI 3也已经安装成功。

    4.想继续使用Vue CLI2

    官网上介绍:

    Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

    npm install -g @vue/cli-init

     

     安装成功后,启动了自己的cli 2项目,结果成功:

    到此为止,Vue CLI 3安装升级完成,并成功启动了Vue CLI 2。

    二、搭建Vue CLI 3项目

    1.快速原型开发

    官网上写的清楚明白:

    你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:

    npm install -g @vue/cli-service-global

    vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

    按照官网上的命令,安装完成@vue/cli-service-global,下边开始快速原型开发:

    1>.仅需创建一个vue文件:

    2>.在app.vue文件所在的目录下运行:

    vue serve

    但是本人运行的时候报错:

     然后在项目的GitHub中找到了答案【点击查看】,原来自己的项目中没有安装eslint,安装(我把项目移动到myTest下的serve目录下了):

    3>.安装完成后,运行:

     

    大功告成,可看到项目目录:

    打开网址:

    官网上也说的明白:

    vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.jsindex.jsApp.vue 或 app.vue 中的一个。你也可以显式地指定入口文件:vue serve App.vue。

    如果需要,你还可以提供一个 index.htmlpackage.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。

    4>.build项目:

     

    成功,目录中build后生成的文件:

    到此为止,对快速原型开发不做过深探究,完成。

     

    2.创建项目【点击查看官网教程

    1>.命令行创建

    运行(这里不做手动配置,按照默认配置走):

    vue create hello-world

    创建成功:

    2>.使用图形化界面创建管理项目

    运行命令:

    vue ui

    上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

    运行:

    npm run serve

    至此,Vue CLI 3项目算是搭建起来了。完。 

    展开全文
  • 主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x), 你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 2.Node 版本要求: Vue CLI...

    1.关于旧版本:

    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。
    如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),
    你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
    

    2.Node 版本要求:

    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
    你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
    

    3.卸载安装:

    先卸载旧版本(npm uninstall vue-cli -g)
    再安装Vue CLI 3(npm install -g @vue/cli):
    
    ==> 查看版本 vue --version 或 vue -V
    

    最后新建项目 hello world

    vue create hello-world
    接着一步一步选择配置,安装依赖。
    

    4.想继续使用Vue CLI2
    官网上介绍:

    Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接工具:

    npm install -g @vue/cli-init
    

    安装成功后,启动了自己的cli 2项目,结果成功:
    到此为止,Vue CLI 3安装升级完成,并成功启动了Vue CLI 2。

    展开全文
  • SpringBoot +Vue CLI案例之安装Vue CLI

    千次阅读 2021-07-08 16:37:19
    SpringBoot +Vue CLI案例之安装Vue CLI
  • Vue 项目从 Vue CLI 2 升级到 Vue CLI 4

    千次阅读 2020-01-11 14:57:48
    介绍如何将使用 Vue CLI 2 构建的项目升级到 Vue CLI 4 更多精彩 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 介绍 - Vue CLI 配置参考 - Vue CLI 升级细则 实际升级起来还算比较...
  • cocos-vuecli-demo 将cocos嵌入vuecli vueTem文件夹下执行 cnpm i npm run dev 如果更改了cocosTem内的文件打包路径需要指定到 vueTem/static/cocos-build下。
  • Vue-cli 3结构变了很多,更优雅,开发体验更好。 当你输入一个命令时可能会提示vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.如下情况 这段的意思是要先卸载vue cli2,然后重新安装vue...
  • vuecli2升级至vuecli3

    千次阅读 2019-07-09 21:19:24
    卸载旧版本vuecli与安装新版本vuecli npm uninstall vue-cli -g npm install -g @vue/cli 二.创建一个新的项目 vue create hello-world 三.正式开始改造 1. 直接复制替换src文件夹2. 安装项目需要的依赖...
  • 1、Vue CLI 3 和老版本的 Vue ClI 创建的项目方式是不一样的,创建项目的用法是一样的。Vue CLI 3 在项目编译速度上面做了一些优化。Vue CLI3需要安装nodejs的高版本,推荐8.11.0+高版本 。 2、检查本机是否已经...
  • 安装Vue脚手架 版本3以上安装:npm install -g @vue/cli@(版本号) ...安装了vuecli3还想vuecli2的模板:npm install -g @vue/cli-init Vue Cli2 初始化项目 vue init webpack my-project ...
  • 一.vue cli2升级到vue cli3 1.先升级npm的版本 npm install -g npm 2.再卸载之前的vue cli 2.9.6 npm uninstall -g @vue/cli 3.下载最新的vue cli版本 npm install -g @vue/cli 二.vue3,0版本创建项目 1、vue ...
  • vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.You may want to run the following to upgrade to Vue CLI 3: 这是应为vue的版本存在更新,需要先卸载vue cli2,然后重新安装vue cli 3 ...
  • 安装Vue CLI

    千次阅读 2020-11-28 17:30:27
    安装Vue CLI 1.安装Vue CLI=>3 npm install -g @vue/cli 2.检验Vue CLI版本 vue -V 3.创建vue project vue create projectname 4.拉取2.x模板 有时后会使用Vue CLI2.x的项目模板,就需要拉取2.x的模板下来 #...
  • Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. 2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project 这是因为你安装的...
  • Vue CLI的Vuetify插件集合 可用包装 外挂程式 项目 版本 描述 一组用于创建Vue CLI插件的帮助程序实用程序 一个Vue CLI插件,用于搭建Vue应用程序 使用的补充Vue CLI插件 一个使用带Vuetify的Storybook的Vue ...
  • 从零开始学习vuecli

    2020-10-04 22:48:44
    从node.js的下载、安装开始,学习vuecli的环境配置,安装,启动,单页面路由,axios实现ajax,组件传值等相关vuecli的必知必会内容 备注:本课程不提供学习下载资料,大家跟着视频进行练习,如需视频中的示例案例,...
  • 一、Vue+JavaScript需要项目npm run dev运行后自动打开浏览器(VueCli2) 1.1、版本说明 "vue": "^2.5.2" "vue-router": "^3.0.1" vuecli2 1.2、修改项目目录下/config/index.js文件,设置dev....
  • vuecli2: 修改vue项目根目录下的 build/webpack.prod.conf.js文件==》 js模块: output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'),==》utils.assetsPath('js...
  • vue cli3 配置proxy代理无效

    万次阅读 热门讨论 2019-04-12 22:33:47
    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配...
  • ├─01 VueCli3实战项目-还原eleme订餐App1(短信验证码登录和高德定位) │ 001 VueCli3-饿了吗项目成果展示和注意事项.mp4 │ 002 VueCli3-构建项目和准备工作.mp4 │ 003 VueCli3-构建登录组件.mp4 │ 004 VueCli3-...
  • 主要介绍了全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • :electric_plug: vue-cli-plugin-p11n Vue CLI 3插件可插件您的Vue项目 p11n =插件化 :star: 特征 将Vue CLI 3生成的项目调整为插件开发环境。 设置JavaScript或TypeScript的插件开发代码 使用汇总构建生产代码 ...
  • 本文主要介绍vue cli3的功能和特点,以及它和vue cli2X的对比,vue cli3具有功能丰富,易于扩展,无需Eject,更具有面向未来的特点,那么把你的项目构建于vue cli3之上吧
  • Vue CLI 3搭建项目详解

    万次阅读 2018-09-12 21:16:32
    vue cli 3 介绍 上次用vue的时候,vue cli的版本还是2,对应指令还是 vue init < 模板名称 > < 项目名称 > vue-cli提供的模板有: webpack 一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 121,141
精华内容 48,456
关键字:

vuecli

vue 订阅