精华内容
下载资源
问答
  • 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已经分为了...
    升级步骤
    1、 删除原vue-cli并安装vue-cli3.0
    2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中
    3、把router从目录文件夹改为文件,src/router/index.js提高一层变成src/router.js
    4、 我的项目中src已经分为了views和components所以无需修改,如果不是这个结构需要自己区分下
    5、将原项目的index.html及favicon.ico覆盖到新项目的public中
    6、 将原项目的static文件夹拷贝到新项目的public中
    7、 修改package.json文件,保持和原有项目一致即可
    8、 创建并配置vue.config.js文件

    删除命令:

    npm uninstall vue-cli -g

    安装@vue/cli命令:

    npm install -g @vue/cli

    我在这里省略安装流程,掘金上已经有很多文章了,下面说下会遇到的问题:

    1、找不到vue文件

    CMD中的报错

    These dependencies were not found:
    * @/views/index/index in ./src/router.js
    * @/views/index/otherIndex in ./src/router.js
    To install them, you can run: npm install --save @/views/index/index @/views/index/other

    页面上的报错

    ./src/router.js
    Module not found:
    Error: Can't resolve '@/views/index/index' in 'D:\VUE\haigui-proxy\src'
    这种报错是说明文件路径错误没有找到文件,因为在原项目中设置了“@”也就是alias(别名),也有可能在原项目中设置了extensions(可以省略扩展名),所以需要在新项目的vue.config.js中设置如下内容:
    
    const path = require('path'); // vue.config.js顶部
    const resolve = (dir) => path.join(__dirname, dir);
    module.exports = {
      configureWebpack: config => {
        Object.assign(config, {
          resolve: {
            extensions: ['.js', '.vue', '.json'], // 可以省略后缀名
            alias: { // 别名,在require的时候,可以使用这些别名,来缩短路径的长度
              '@': path.resolve(__dirname, './src'),
              '@c': path.resolve(__dirname, './src/components')
            }
          }
        });
      }
    }

    2、找不到image图片

    Module not found:
    Error: Can't resolve '../../../static/image/avatar_gray.jpg' in 'D:\VUE\haigui-proxy\src\views\index'

    当把原项目的src和static拷贝到新项目后,就会出现图片路径不对的问题,网上很多有关vue-cli3.0配置的文章都说的是把原项目的static直接拷贝到新项目的public中,其实这是不对,官方给出的原因是:

    任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack。需要通过绝对路径来引用它们。

    例如,目录为public/static/image,image里面存放各种图片:

    引入图片logo.png:

    <img src="/static/image/logo.png" > 

    在 css 中 设置背景图片:

    .bg {
      background: url('/satic/image/bg.jpg');
    }

    注意:

    public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。如果你的应用没有部署在域名的根部,那么你需要为你的 URL 配置 publicPath 前缀。

    何时使用 public 文件夹

    • 你需要在构建输出中指定一个文件的名字。
    • 你有上千个图片,需要动态引用它们的路径。
    • 有些库可能和 webpack 不兼容,这时你除了将其用一个独立的 标签引入没有别的选择。

    通过 webpack 的处理好处:

    • 脚本和样式表会被压缩且打包在一起,从而避免额外的网络请求。
    • 文件丢失会直接在编译时报错,而不是到了用户端才产生 404 错误。
    • 最终生成的文件名包含了内容哈希,因此你不必担心浏览器会缓存它们的老版本。
    • public 目录提供的是一个应急手段,当你通过绝对路径引用它时,留意应用将会部署到哪里。

    assets文件夹就是用来放置经过webpack处理的资源的

    需要使用相对路径引入:

    <!-- 具体根据目录结构来 -->
    <img src="../assets/images/logo-black.png">

    img动态路径:

    <img :src="imgurl">
    data () {
      return {  
          imgurl: require("../assets/images/gou.png")  
      }
    }

    css 背景图:

    .login-wrapper {
      background: url('../../assets/images/bg.jpg');
    }

    参考:官方解释

    3、scss全局变量的配置

    Module build failed (from ./node_modules/sass-loader/lib/loader.js):
    Undefined variable.  955 │    
        border-right: 1px solid $borderColor;
                                ^^^^^^^^^^^^
    root stylesheet in D:\VUE\haigui-proxy\src\views\index\index.vue (line 955, column 33)

    若原项目中使用了scss并且使用了全局变量,需要在vue.config.js中重新配置,并把全局变量文件放到src/assets/css目录下

    在原项目中需要在build/utils.js中进行配置

    scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/haigui-variable.scss')
        }
      }
    )

    新项目中就简单的多,直接编辑vue.config.js,加入一节内容即可:

    css: {
      loaderOptions: {
        sass: {
          // @/ 是 src/ 的别名 ~是必须有要加的
          data: '@import "~@/assets/css/haigui-variable";'
          // 如果没有设置别名可以这么写
          // data: '@import "./src/assets/css/haigui-variable";'
        }
      }
    }

    4、runtime-only

    You are using the runtime-only build of Vue where the template compiler is not
    available. Either pre-compile the templates into render functions, or use the
    compiler-included build.

    原因:vue有两种形式的代码 compiler(模板)模式和runtime模式(运行时),vue模块的package.json的main字段默认为runtime模式, 指向了"dist/vue.runtime.common.js"位置。

    这是vue升级到2.0之后就有的特点。

    而在main.js文件中,初始化vue却是这么写的,这种形式为compiler模式的,所以就会出现上面的错误信息。

    new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
    });

    解决办法:

    方法一:将main.js中的代码修改如下就可以

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    到这里我们的问题还没完,那为什么之前是没问题的,之前vue版本也是2.x的呀?

    这也是第二种解决办法:因为之前我们的webpack配置文件里有个别名配置,具体如下

    resolve: {
      alias: {
          'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式 vue结尾的
      }
    }

    也就是说,import Vue from ‘vue’ 这行代码被解析为 import Vue from ‘vue/dist/vue.esm.js’,直接指定了文件的位置,没有使用main字段默认的文件位置。

    所以第二种解决方法就是,在vue.config.js文件里加上webpack的如下配置即可,

    configureWebpack: {
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js' 
        }
      }
    }

    既然到了这里就会想到第三中解决方法,那就是在引用vue时,直接写成如下即可

    import Vue from 'vue/dist/vue.esm.js'

    感谢大佬LeonWuV的分享

    展开全文
  • vue2的老项目如何升级到vue3?请问有没有较为详细的教程
  • 说到项目会分为新建的醒目和...现有的vue老项目或者没使用vue-cli创建项目搭建jset单元测试: 1、安装 npm i @vue/test-utils babel-jest jest jest-serializer-vue jest-transform-stub vue-jest -D 2...

    说到项目会分为新建的醒目和老项目两种。

    jest搭建vue项目单元测试-vue-cli创建新项目

    我们接下来说现有老项目。

    现有的vue老项目或者没使用vue-cli创建项目搭建jset单元测试:

                    

            1、安装

                    npm i @vue/test-utils @vue/cli-plugin-unit-jest babel-jest jest@26.0.0 jest-serializer-vue jest-transform-stub vue-jest babel-core@^7.0.0-bridge.0 babel-preset-env @babel/plugin-transform-runtime @babel/runtime @babel/preset-env @babel/runtime-corejs3 @vue/cli-plugin-babel -D

            运行的时候可能会出现提示缺少包,我们安装提示的依赖。这里面要注意一下babel-core这个包我们需要指定版本

            2、配置package.json

                    scripts 中增加 "unit": "jest --config test/unit/jest.config.js --coverage"

            3、创建目录

                    

                    项目根目录中创建test/unit目录,内部:

                            创建coverage目录 存放覆盖率报告

                            创建specs目录 存放测试用例

                            创建jest.config.js文件,用于配置jset

            4、配置jest.config.js

                    

    const path = require('path');
    
    module.exports = {
        preset: '@vue/cli-plugin-unit-jest',
        verbose: true,
        testURL: 'http://localhost/',
        rootDir: path.resolve(__dirname, '../../'),
        moduleFileExtensions: [
            'js',
            'json',
            'vue'
        ],
        moduleNameMapper: {
            '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1',   // @路径转换,例如:@/components/Main.vue -> rootDir/src/components/Main.vue
            '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js', // 模拟加载静态文件
            '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js'  // 模拟加载样式文件   
        },
        testMatch: [ //匹配测试用例的文件
            '<rootDir>/test/unit/specs/*.spec.js'
        ],
        transform: {
          '^.+\\.vue$': 'vue-jest',
          '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
          '^.+\\.jsx?$': 'babel-jest',
        },
        testPathIgnorePatterns: [
            '<rootDir>/test/e2e'
        ],
        transformIgnorePatterns: ['/node_modules/'],
        // setupFiles: ['<rootDir>/test/unit/setup'],
        snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
        collectCoverage: true, // 开启生成测试报告
        coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
        collectCoverageFrom: [ // 测试报告想要覆盖那些文件,目录,前面加!是避开这些文件
            // 'src/components/**/*.(js|vue)',
            // 'src/components/*.(vue)',
            'src/**/*.(js|vue)',
            '!src/main.js',
            '!src/router/index.js',
            '!**/node_modules/**'
        ]
    }

             5、配置babel

                    项目根目录下创建.babelrc文件

    {
      "presets": [
        ["@babel/preset-env", {
          "modules": "commonjs",
          "targets": {
            "browsers": ["> 1%", "ie > 9"]
          }
        }],
        "@vue/cli-plugin-babel/preset",
        [
          "env", { 
            "modules": false,
            "test": {
              "presets": ["env"]
            }
          }
        ]
      ],
      "plugins": [
        ["@babel/plugin-transform-runtime"],
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": false }],
        ["transform-vue-jsx"]
      ],
      "env": {
        "development": {}
      }
    }
    

            6、创建测试文件

                    在specs目录中创建test.spec.js文件

    
    test('adds 2 + 3 to equal 5', () => {
      expect((2 + 3)).toBe(5);
    });

            7、运行npm run unit

                    看到测试结果:

            至此,已有的vue项目中我们使用jest做单元测试环境我们就安装好了。

                    

    展开全文
  • Vue老项目性能优化

    2019-08-21 18:06:35
    Vue老项目性能优化 1. webpack版本的升级 webpack 升级到4.x,性能可以提升60% 2. Vue-cli的升级 Vue-cli升级到3.0 性能可以提升30%左右 3. dll的运用 dllPlugin将vue, vuex, vue-route 等打入 vue-bucket.dll.js 内...

    Vue老项目性能优化

    1. webpack版本的升级

    webpack 升级到4.x,性能可以提升60%

    2. Vue-cli的升级

    Vue-cli升级到3.0 性能可以提升30%左右

    3. dll的运用

    dllPlugin将vue, vuex, vue-route 等打入 vue-bucket.dll.js 内, 然后用DllReferencePlugin在webpack.base.conf.js 中声明。 结果vue依然被webpack打包进到vendor.js中。

    4. webpack关闭预加载, 可以提升性能

    当项目的文件多起来之后预加载就会使项目变慢

    5. 使用按需加载来引入相应的组件可以减少好多不必要的文件的引入

    6. 不常用的文件打包成js文件通过路由懒加载去加载

    7. 路由的懒加载的使用

    通过以上这些修改项目的性能至少可以加快90%以上

    展开全文
  • vue开发老项目

    2019-09-05 10:34:40
    vue开发老项目一、原项目结构二、技术栈三、需求四、改造后的页面五、request.js 接口文件 一、原项目结构 html css js images font 没有项目管理工具 二、技术栈 js + jquery 三、需求 在老项目的基础上,增加...

    一、原项目结构

    1. html
    2. css
    3. js
    4. images
    5. font
      没有项目管理工具

    二、技术栈

    js + jquery

    三、需求

    在老项目的基础上,增加新的页面。
    由于jquery玩的不熟,且包比较重,所以想加入vue来改造成自己习惯的技术栈

    四、改造后的页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>创建订单</title>
      <link rel="stylesheet" href="./css/creatOrder.css">
    </head>
    <body>
      <div id="app">
        被vue管理的内容
      </div>
    </body>
    
    <!-- js要在dom以后引入,否则获取不到dom节点 -->
    // 引入vue并且创建vue实例,就可以使用vue了
    <script src="./js/vue.min.js"></script>
    // 使用axios发送请求(一下三个配合) 参考博客:https://www.cnblogs.com/dreamcc/p/10752604.html
    <script src="./js/axios.min.js"></script>
    <script src="./js/qs.js"></script>
    <script src="./js/request.js"></script>
    
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
         
        },
        mounted: function () {
          var data = {
            planId: 123456,
            xyId: 123456
          }
          request.getList(Qs.stringify(data), function (res) {
            console.log(res);
          })
        },
        methods: {
         
        }
      })
    </script>
    </html>
    
    

    五、request.js 接口文件

    // axios配置
    var token = getCookie('token');
    // 创建axios实例,并且对请求进行自定义改造
    var instance = axios.create({
      baseURL: url(),
      timeout: 30000,
      headers: {
        'x-token': token,
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      }
    });
    
    // 所有请求统一对象
    var request = {
      // 封装axios的get
      _get: function (url, callback) {
        var requestObj = instance;
        var requestUrl = '/api/' + url;
        if (url.indexOf('http') == 0) {
          requestObj = axios;
          requestUrl = url;
        }
    
        requestObj.get(requestUrl).then(function (response) {
          if (response && response.data) {
            if (callback) {
              // console.log(response.data)
              callback(response.data)
            }
          }
        }).catch(function (error) {
          if (error.response) {
           
          } else if (error.request) {
            console.log(error.request)
          } else {
            alert('Error', error.message)
          }
        })
      },
      // 封装axios的post
      _post: function (url, data, callback) {
        var requestObj = instance;
        var requestUrl = '/api/' + url;
        if (url.indexOf('http') == 0) {
          requestObj = axios;
          requestUrl = url;
        }
        requestObj.post(requestUrl, data).then(function (response) {
          if (response && response.data) {
            if (callback) {
              // console.log(response.data)
              callback(response.data)
            }
          }
        }).catch(function (error) {
          if (error.response) {
            console.log(error.response)
          } else if (error.request) {
            console.log(error.request)
          } else {
            console.log('Error', error.message)
          }
        })
      },
    
      // 测试接口
      getList: function (data, callback) {
        this._post("order/list", data, callback)
      },
    
    
    }
    
    展开全文
  • 老vue项目添加typescript支持 先说一下我的vue版本 "vue": "^2.6.11" @vue/cli 4.5.11 1.添加依赖(我用yarn,也可以用npm) yarn add --dev @types/node typescript ts-loader 2.初始化tsconfig.json 执行yarn ...
  • Vue(2.x)老项目由js转换ts指南 其实在网上有不少关于,vue迁入ts的教程,但是很多并不完善,故做此篇 本项目基于 vue-admin-template进行改造 ,它是有ts版本的,因此本文章讨论的是老项目,由vue-cli构建的迁移 ...
  • 问题 :jq想用vue里面的数据,发现用不了 解决:jq的加载要比vue块,所以想用vue实例 必须把jq写在 mounted生命函数里面。over
  • 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了。 2、开始升级 注:...
  • 脚手架版本和vue版本两者没有必然联系,比如:vue-cli3版本脚手架搭建的环境做vue2.0项目vue-element-admin ...版本脚手架vue-cli,创建项目命令:官网介绍 vue init webpack <project-name> 两个版本.
  • vue老项目添加单元测试

    千次阅读 2019-12-02 11:13:00
    利用vue init webpack my-project新建一个vue工程,然后将下面的文件拷贝到我们的项目中, (注意:该版本的vue使用的测试是chai断言库)2.我们要在package.json文件中安装以下依赖(将下面的依赖贴到package.json中...
  • Jest 在进行测试的时候,它会在整个项目进行查找,只要碰到这三种文件它都会执行。 安装 npm install --save-dev vue-jest @vue/test-utils babel-jest babel-preset-env babel版本 babel版本要保持兼容 "babel...
  • 有些老项目在开发了一段时间之后会出现项目越来越慢, 以及打包时间过长, 加载时间变成等问题, 如果我们讲项目中的webpack升级到4.x项目的性能至少可以提升到百分之六十 第一步骤:删除 build/config 第二步:...
  • 补充知识:vue老项目升级vue-cli3.0问题总结 升级步骤 1、 删除原vue-cli并安装vue-cli3.0 2、删除新项目中src下的内容,把原项目中src目录覆盖到新项目中 3、把router从目录文件夹改为文件,src/router/index.js...
  • 在调试一些比较早期的项目的时候发现,一些项目中不识别 ...mapGetters ,这样引入的时候直接报错。 报错信息: ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=...
  • 老vue项目webpack3升級到webpack5整个过程纪录(一) 情况 19年新创建的vue项目,应用的是webpack3,伴随着新项目的累积,部件的增加造成当地搭建,网上装包等操作速度超慢,十分危害开发设计高效率和布署高效率,...
  • 项目vue2升级vue3记录之前的包版本更新版本嘛,多简单遇到的几个坑现在的package.json 之前的包版本 看视频的时候发现vue3的一些基础配置代码有变,比如出使用createApp,app.use(),app.mount(’#app’)等,跟我现在...
  • 这次给大家带来怎样实现Vue项目中使用Vux,Vue项目中使用Vux的注意事项有哪些,下面就是实战案例,一起来看一下。默认已安装vue环境1.安装vuxnpm install vux --save-dev2.安装vux-loadernpm install vux-loader --...
  • vue ui安装vue项目.pdf

    2021-09-14 14:33:44
    vue ui安装vue项目.pdf
  • 只需要在原项目的终端中输入 ...其实将vue2项目转成vue3项目绝对是有意义的 比起vue2 vue3有这些优势 性能更好 体积更小 更好的ts开发 更好的代码组织 更好的逻辑抽离 更多性功能 做更新绝对是不亏的 ...
  • 搭建Vue项目

    2020-07-04 20:48:51
    一、安装环境 ... 2、检查node是否安装成功:node -v 3、安装cnpm ... 4、安装vue-cli npm install --global vue-cli ...二、搭建vue项目 两种方式搭建项目: 1、vue create textProject 2、vue init webpack textProject 进
  • 遇到一个问题百思无解 最终解决 。记录一下。 问题表现为: 1、copy一个老的vue项目【oldOne】到一个新的...5、这时候就出现问题了:项目启动之后运行的代码不是新项目的代码,而是老项目的代码,甚至在main.js中添
  • VUE 老项目改造,常用方法说明

    千次阅读 2017-10-16 13:39:17
    vue 相较 上一代web框架JQ有更优秀的开发理念,更快的开发速度(这里可能有些低版本浏览器兼容问题)可由于历史遗留问题,很难使用vue的全部生态来开发 比如脚手架,比如我们公司在组织架构上,前端的设计 html css...
  • vue-cli 脚手架创建vue项目很直观,特别是UI控制台。在这里创建项目和搭建本地环境、连接服务端变得很容易,页面ui 也是一流。打开也很方便。 在终端启动UI控制体步骤: 1:按键Windows+R,输入cmd ,调出控制台 ...
  • VUE主要开发单页面应用,并且为了做到前后端分离的一个产物。使用VUE开发单页面应用主要使用Vue CLI的脚手架来...下面我们就介绍一种方法,在做老项目的同志们可以参考下,也欢迎提出更好的方式。 范围:前台jsp ...
  • vue现在在很多公司会大量使用,研究一下vue-cli脚手架构建项目项目结构,有助于理解vue。 博客首发地址:https://www.mwcxs.top/page/570.html 使用vue-cli脚手架搭建vue项目的具体步骤如下: npm install -g ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,867
精华内容 5,946
关键字:

老项目vue

vue 订阅