vue入门

2020-02-21

直接添加<el-upload发现点击不了，后来才知道，要加在<el-form-item></el-form-item>里面

2020-02-22

1、<template></template>必须以<div>为根，不能两个<div>并列作为根【<template><div></div><div></div></template>】。

2020-02-25

vue-router.esm.js?fe87:1981 Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined
    at isESModule (vue-router.esm.js?fe87:1981)
    at eval (vue-router.esm.js?fe87:1910)
    at eval (vue-router.esm.js?fe87:1996)
    at <anonymous>

原来写法

{
        path: '/add_operate',
        name: 'add_operate',
        component: resolve => require(['@/views/operate/add'])
    }

正确写法

{
        path: '/add_operate',
        name: 'add_operate',
        component: resolve => require(['@/views/operate/add'], resolve)
    }

 2020-02-25

修改日期控件，发现上面显示的日期并没有改变。

以前的错误写法

   this.ruleForm = {
        remark: this.addEditData.remark
      };
      if(this.addEditData.purcharsDate!=null && this.addEditData.purcharsDate>0){
          this.ruleForm["purcharsDate"] = this.$dateFormat(this.addEditData.purcharsDate, "yyyy/MM/dd")
      }//后插入

现在正确的写法：

 var purcharsDate = '';
      //alert(this.addEditData.purcharsDate);
      if(this.addEditData.purcharsDate!=null && this.addEditData.purcharsDate>0){
          purcharsDate = this.$dateFormat(this.addEditData.purcharsDate, "yyyy/MM/dd")
      }
      this.ruleForm = {
        remark: this.addEditData.remark,
        purcharsDate: purcharsDate
      };//前插入

2022-11-24

vue打包命令：npm run build

const wslToWindowsPath = async path => {
                               ^^^^
SyntaxError: Unexpected identifier
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\10-10\sx-vue\node_modules\@vue\cli-shared-utils\lib\openBrowser.js:9:1
4)

这个报错是nodejs版本太低了，下载一个最新的就好了。

因为我的系统是win7的，支持的最高版本是v13.14.0

链接：https://pan.baidu.com/s/1xM8m8GxpjoSoGUbbMA2OFw
提取码：05u4

nodejs再高版本就要win8.1及以上了：

This application is only supported on Windows 8.1, Windows Server 2012 R2, or higher.

2025-12-14

    let vm = this;
    alert(123 + vm);

报错 runtime-core.esm-bundler.js:454 Uncaught TypeError: Cannot convert object to primitive value  的错误

控制台把它报错挂在createApp(App).mount('#app');语句中，一时没找到原因。。。

 - - - - 

let app = createApp(App);
app.use(router);
app.mount('#app');

先use(router)再挂载mount，要不然报错：Failed to resolve component: router-view

2025-12-15

要死哟，犯了一个语法错误: [Vue warn]: invalid template option:

原来的定法：

 需要改成：

component: HelloWorld才对。

2025-12-16

vant组件自动导入功能：

ai说最新的版本不兼容，就先卸载旧的：

# 卸载当前版本

npm uninstall unplugin-auto-import unplugin-vue-components -D

# 安装兼容版本（亲测 Vue CLI 环境可用）

npm install unplugin-auto-import@0.16.1 unplugin-vue-components@0.25.2 -D

然后修改vue项目根目录下的：vue.config.js

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
// 导入Webpack版本的插件（注意路径带/webpack）
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
// 导入UI库解析器（以Vant为例，其他库同理）
// const { VantResolver } = require('unplugin-vue-components/resolvers')
const { VantResolver } = require('@vant/auto-import-resolver');

module.exports  = defineConfig({
  // 关键：通过configureWebpack注入插件 
  configureWebpack: {
    plugins: [
      // 1. 自动导入Vue API（ref、reactive等）
      AutoImport({ resolvers: [VantResolver()] }),
      Components({ resolvers: [VantResolver()] })
    ]
  }
})