vue中的常见问题与知识点

1.在vue项目中引入组件时出现的Module is not installed问题

当我们通过@的方式引入相对路径取代繁琐的绝对路径时，这个路径会出现下划线告警，提示Module is not installed。

比如这种：import TheAPI from '@/api/projectAPI/home'

首先解释一下导入组件常用的三种符号：

@/：		指向src目录
./：		表示当前目录下
../:  	表示父级目录

出现问题的原因：未能识别@所表达的意思需要指定webpack的配置文件来进行解释说明。

解决方案：

1.指定webpack的配置文件路径(正常项目开发中会在build路径下配置了不同环境的webpack.conf.js配置文件，如果没有在node_modules依赖中也有相应的配置文件，具体位置如下图所示)

2.在项目中配置一个用来解释@符号的.json文件，具体代码如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

2.模版字符串

前端一般不需要字符串拼接，直接使用模版字符串即可

特点：支持换行，可以直接引入变量

模版字符串格式为： ``
let a = '3'
let b =`1
2
${a}
`
console.log(b)

3.展开运算符

可将展开运算符后面的数组展开，也可以遍历

展开运算符的格式： ...
let a = [1,2,3,4]
let b = [...a]
const params ={
	...a,
	...b
}
console.log(params)