精华内容
下载资源
问答
  • 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 项目从 Vue CLI 2 升级到 Vue CLI 4

    千次阅读 2020-01-11 14:57:48
    介绍如何将使用 Vue CLI 2 构建的项目升级到 Vue CLI 4 更多精彩 更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线 相关网址 介绍 - Vue CLI 配置参考 - Vue CLI 升级细则 实际升级起来还算比较...

    介绍如何将使用 Vue CLI 2 构建的项目升级到 Vue CLI 4

    更多精彩

    相关网址

    1. 介绍 - Vue CLI
    2. 配置参考 - Vue CLI

    升级细则

    1. 实际升级起来还算比较方便,基本不会影响项目内部的逻辑

    安装 Vue CLI 4

    1. 按照官方文档 安装 - Vue CLI 直接全局安装即可,之后查看 Vue 版本得到下图结果,说明已经安装成功
      • 如果当前安装了 Vue CLI 的 2.x 版本,官方在上述文档中也给予提示,需要先卸载,再安装

    创建新项目

    1. 在旧项目上直接升级自然是不太稳妥,还是推荐创建一个新的项目,然后逐步将旧项目的内容迁移到新项目比较稳妥,这样就算迁移失败了,旧项目也不会受到影响
    2. 首先通过 vue create projectName 创建一个新项目,具体步骤可以参考 创建一个项目 - Vue CLI
      • 指定项目名称后,其他使用默认配置即可

    迁移 package.json

    1. 项目创建完之后,需要将旧项目的 package.json 中的依赖项都复制到新项目的 package.json
    2. 这时候可以好好检查一下 dependenciesdevDependencies 中哪些是需要的,哪些是不需要的,将需要的依赖项复制到新项目的对应节点即可

    迁移静态资源

    1. 如果旧项目中的 /static/ 目录下存在静态资源,直接全部复制到新项目的 /public/ 目录即可
    2. 同样的,旧项目中 index.html 中的内容,也可以直接复制到新项目的 /public/index.html

    迁移 src 目录

    1. 项目的所有关键内容,自然都是在 /src/ 目录中,然而这个目录迁移起来几乎没有什么成本
    2. 直接将旧项目 /src/ 目录下的所有内容,复制到新项目的 /src/ 目录即可

    创建 vue.config.js ,准备迁移配置

    1. Vue CLI 3 之后,官方开始推荐 零配置搭建项目 ,就像 Java 的 SpringBoot 一样
    2. 在 Vue CLI 2 时代,Vue 的项目配置被分散在项目的 /build//config/ 目录中
    3. 然而从 Vue CLI 3 开始,所有的配置都被集成到了 vue.config.js 这一个文件中,并且这个文件默认是不被创建的
    4. 所以我们首先需要在项目根目录创建一个 vue.config.js 文件,并且参考 配置参考 - Vue CLI 在文件中添加如下顶层内容
    module.exports = {
      // ...
    }
    

    指定项目在开发和生产环境的根请求

    1. 如果项目在开发和生产环境有不同的根请求,可以在文件中添加 publicPath 进行指定,可以参考 配置参考 - publicPath ,具体如下
      • 这个配置项之前被叫做 baseUrl ,现在已经弃用
    module.exports = {
      publicPath: process.env.NODE_ENV === 'production' ? '/sts/' : '/'
    }
    

    迁移项目的开发环境配置

    1. 之前项目的开发环境配置是在 /config/index.jsmodule.exports.dev 节点下
    2. 通常会在这个节点下配置开发环境的 hostport 以及会通过 proxyTable 配置一些对接后端的端口映射代理
    3. 这些这些配置也统一在 vue.config.js 中完成,可以参考 配置参考 - devServer ,具体如下
    module.exports = {
      devServer: {
        // 前端请求的链接
        host: '127.0.0.1',
        // 前端请求的端口
        port: 3002,
        // 代理
        proxy: {
          '/': {
            target: 'http://127.0.0.1:8099',
            changeOrigin: true,
            pathRewrite: {
              '^/': '/'
            }
          }
        }
      }
    }
    

    迁移项目的目录别名

    1. 我们在进行项目开发时,通常会给常用的目录指定一些别名,例如 /components/ 组件目录,完整路径是 /src/components/
    2. 为了在引入对应组件时使用更简洁的引入目录,会在 /build/webpack.base.conf.jsmodule.exports.resolve.alias 节点下配置对应目录的别名
    3. 现在这个配置自然也是需要在 vue.config.js 中完成,可以参考 配置参考 - chainWebpack ,以及 配置参考 - webpack 相关
    4. 但上述两份文档中只描述了 chaninWebpack 字段的基础内容,没有描述如何配置目录别名,具体代码如下
      • 如果有更多目录需要指定别名,只需要继续在后面添加 .set(dirName, resolve(absoluteDirName)) 即可
    const path = require('path')
    
    function resolve (dir) {
      return path.join(__dirname, dir)
    }
    
    module.exports = {
      chainWebpack: (config) => {
        const alias = config.resolve.alias
          alias.set('@', resolve('src'))
          .set('components', resolve('src/components'))
      }
    }
    

    迁移 eslint 配置

    1. 根据 Vue CLI3 EsLint Config -CSDN博客 得到以下参考

    创建项目时选择了集成 EsLint

    1. Vue 默认会将 EsLint 的配置集成到 package.json 中,代码如下
    2. 将之前项目中 ./eslintrc 中的规则移植到下图中的 "rules": {} 节点即可

    创建项目时没有选择集成 EsLint

    1. 只需要将旧项目根目录下的 ./eslintrc 文件复制到新项目的根目录即可
    2. 但我的项目在复制完之后启动项目时,总是有几率会抛出这个文件中存在异常的错误,所以就在 vue.config.js 中添加了 lintOnSave: false
    3. 具体配置可以参考 配置参考 - lintOnSave

    开发环境启动项目

    1. 如果之前没有在迁移 package.json 内容时,没有直接进行安装,则需要先执行 npm i 或者 npm install
    2. 之后执行 npm run serve 即可启动项目,Vue CLI 2 是通过 npm run dev 启动的
    3. 启动之后的输出内容也和之前有所不同,如下图
    展开全文
  • 主要介绍了使用vue cli4.x搭建vue项目的过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • vuecli4安装axios以及简单使用

    千次阅读 2020-07-29 11:53:59
    vuecli4安装axios以及简单使用

    vuecli4安装axios

    • 地址

      https://www.npmjs.com/package/axios
    • 进入终端项目根目录安装,命令

      npm install axios
    • 安装之后,node_modules里面会多一个axios文件;

    使用

    • 全局引入,在main.js中引入

      //引入axios Axios别名 axios文件

      import Axios from 'axios'
    • 定义绑定到vue实例上面去,后面就可以直接用了
    //定义绑定到vue实例上面去
    //给vue定义一个属性,属性的名字自定义,暂时叫axios,这个随便定义,可以叫$http或$axios;Axios是引入是定义的别名
    //后面使用的时候,直接用vue实例访问定义的axios这个属性就可以了
    Vue.prototype.axios = Axios
    
    • eg:
    import Axios from 'axios'
    
    //定义绑定到vue实例上面去
    //给vue定义一个属性,属性的名字自定义,暂时叫axios,这个随便定义,可以叫$http或$axios;Axios是引入是定义的别名
    //后面使用的时候,直接用vue实例访问定义的axios这个属性就可以了
    Vue.prototype.axios = Axios
    
    ..............................................................
    
    
    <template>
    	<ul class="lan-list">
    		<li v-for="(v,index) in nav_list" :key="index">{{v}}</li>				
    	</ul>
    </template>
    
    <script>
    	export default{
    		// 生命周期函数,创建成功的时候调用
    		created:function(){
    			var url = 'http://139.196.186.154:8080'
    			console.log(url)
    			this.axios.get(url).then(res=>{
    				console.log(res.data.data)
    				this.nav_list = res.data.data
    			})			
    		},
    		data:function(){
    			return{ 
    				nav_list:[]
    			}
    		}
    	}
    </script>
    
    <style scoped="scoped">
    	
    </style>
    
    

    vue-axios 这种也有人用,上面那种最简单

    • 安装 npm install --save axios vue-axios
    • 使用
    //引入axios Axios别名  axios文件
    import Axios from 'axios'
    import VueAxios from 'vue-axios'
    // Vue.prototype.axios = Axios
    Vue.use(VueAxios, Axios)
    
    展开全文
  • 主要介绍了VueCli4项目配置反向代理proxy的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了Vue CLI4 Vue.config.js标准配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了解决vue cli4升级sass-loader(v8)后报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue cli4快速创建项目

    千次阅读 2020-05-29 23:04:18
    项目中使用的是Vue cli3脚手架,最新的已经更新到了cli4.xx,于是直接官网上从最新的学习,这里总结一下在idea中使用Vue cli4快速创建项目的过程。 1.新建项目目录,使用idea打开 本地新建一个项目目录vueStudy,...

    最近公司一期项目接近尾声,没有那么忙了,前端框架使用到了Vue,于是抽空花了几天时间来学习它,记录一些点滴。项目中使用的是Vue cli3脚手架,最新的已经更新到了cli4.xx,于是直接官网上从最新的学习,这里总结一下在idea中使用Vue cli4快速创建项目的过程。

    1.新建项目目录,使用idea打开

    本地新建一个项目目录vueStudy,使用idea打开:

     

    2.安装node.js,npm依赖,cli脚手架,查看版本

    环境准备:

    这里安装好node.js环境后,就可以安装cli了:

    准备好环境后,在idea中查看安装的版本,如下:

    3.创建项目

    创建项目命令:vue create 【项目名称】

    出现如下选择,第一项默认配置,这里我选择第二项,手动配置:

    我选择的项目自定义配置如下(空格选中当前项,再次空格取消选择):

    选择是否使用路由 history router,其实就是是否路径带 # 号(这里我只是简单描述,并不贴切),我选择n:

    css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。dart-sass需要保存后才会生效,sass 官方目前主力推 dart-sass :

    选择 ESLint 代码校验规则,我选择ESLint + Prettier :

    代码校验,我选择第一项,保存就检查,相当于热部署:

    存放配置,由于只是学习的简单项目,我就选择了package.json:

    是否保存本次的配置,这里我选择了否:

    最后回车,等待项目创建完成:

    如果创建成功,会有如下描述:

    查看项目目录机构,如下(这里就不多描述了):

    4.启动项目

    根据项目创建完成的提示,可以看到如下命令:

    先进入项目目录(cd vue1):

    在输入启动项目命令(npm run serve):

    启动成功后,点击下面任一链接即可打开页面:

    启动项目后的界面如下(一个基于cli4快速创建的项目就完成了):

    展开全文
  • Vue CLI 4预设 :party_popper: 安装 vue create my-project --preset MUTASANTE/vue-cli-plugin-preset-tpl :electric_plug: 外挂程式 我们不再维护的Vue CLI 3预设可以在分支
  • Vuecli4 本地服务跨域问题解决

    千次阅读 2020-03-27 10:37:32
    Vuecli4请求非本地接口时发生:No 'Access-Control-Allow-Origin' header is present on the requested resource.错误
  • 使用vuecli4,按需引入vantui 样式引入不成功 main.js中引入 ``` import {Button} from 'vant' Vue.use(Button) ``` babel.config.js ``` module.exports = { presets: ["@vue/cli-plugin-babel/preset...
  • Vue--vuecli4使用axios,及解决跨域问题

    千次阅读 2020-03-23 23:57:48
    Vue–vuecli4使用axios,及解决跨域问题 使用版本 vue-cli 4.1.2 VScode 1.42.0 问题一、配置问题(根据此配置,可避免跨域问题) 我配置访问后台路径时,发现vue-cli4已经没有了config/index.js文件,只有一个vue...
  • vue cli4中引用bootstrap框架的两种方法

    千次阅读 2020-02-11 17:54:50
    bootstrap前端框架,是目前全球最流行的前端样式。 由于目前网上没有一个基于bootstrap v4.x的与vue cli 4.x结合引用的教程,所以不才动手,整理一下,...方法一:在Vue cli4中,可以直接加载BootstrapVue插件,此插...
  • vue CLI 官网链接: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
  • vuecli4下,postcss-pxtorem移动端适配的实现 前言:前端菜鸡,在vuecli4情况下,实现了postcss-pxtorem对移动端进行适配——可在编译过程中将px转化为rem。 安装插件postcss-pxtorem npm install postcss-pxto...
  • vue-cli@3 + element 搭建的基本框架,包含axios封装http请求,请求拦截,请求设置参数加密,引入加密配置等,兼容ie浏览器
  • vue cli4搭建cesium环境

    千次阅读 2020-05-21 11:09:47
    搭建项目之前,请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。 如何安装node 如何安装vue cli 1.进入一个目录,开始创建 输入: vue create project-one 2.我们这里选择手动配置 ...
  • Vue Cli4 热更新失效 在VScode中,需要保存文件后自动刷新浏览器的内容,否则还得手动刷新浏览器,给开发造成极大的不便。我们要在项目根目录下找到vue.config.js(若没有这个文件,则新建一个),增加 hot: true。 ...
  • vue cli4 配置资源CDN

    千次阅读 热门讨论 2020-03-13 15:05:02
    脚手架经过升级,cli4的相关配置都需要在vue.config.js这个文件中进行,如果你没有这个文件请自己新建一个(与package.json同级)。 这里我们首先配置configureWebpack的externals字段,把不需...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 119,130
精华内容 47,652
关键字:

vuecli4

vue 订阅