Vue Web开发遇到问题汇总

1.Vue Web开发遇到问题汇总

1.1. vue项目main.js文件下import router from ‘./router‘默认导入router文件夹下index.js的原因

  vue项目main.js文件下import router from './router’默认导入router文件夹下index.js的原因

import router from './router'
//等效于
//import router from './router/index.js'

  这个不是vue的规定而是node加载模块的方式,当require(’./router’)(import会被转为require),node是这样的寻找目标的:
  （1）首先寻找目录下有没有router.js或者router.node,如果有就导入
  （2）如果没有看是否有router目录,如果没有就require失败,抛出异常"Cannot find module ‘./router’"
  （3）如果有router目录会在其下寻找package.json文件,如果有则按照package的配置来导入
  （4）如果没有package.json,看是否有index.js或者index.node,如果有就导入没有就失败
  详细见node文档：https://nodejs.org/api/modules.html#modules_folders_as_modules

1.2. error Component name “Home“ should always be multi-word vue/multi-word-component-names

1.2.1. 错误

error Component name “Home” should always be multi-word vue/multi-word-component-names

1.2.2. 原因

  在操作npm run serve 的时候会出现以下的报错，
  报错原因是希望组件名写成驼峰式或者链-先形式的，
  但是官方又明确单个单词组件命名是符合规定的，
  总结在编译的时候eslint 会检测将次写法判定为不规格。

1.2.3. 解决方案

  在项目根目录找到一个vue.config.js 文件，没有就在根目录创建一个，写上下面标注的代码，保存，在重新编译。项目就可以正常运行了。

const {
   
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
   
  transpileDependencies: true,
   lintOnSave: false
})

1.3. Navigating to current location (“/user”) is not allowed

   this.$router.push({
   
   
                    name: item.name//名字路由指引