技巧

require.context 当文件数量多可以代替improt 实现模块化导入

/**
 * @param {String} directory 说明需要检索的目录
 * @param {Boolean} useSubdirectories 是否检索子目录
 * @param {RegExp} regExp 匹配文件的正则表达式,一般是文件名
 * @return {Function} req 一个类似于import和require的导入方法 内传 keys 返回的模块的名字 内有两个静态方法
 */
/*
req
require.context执行后，返回一个方法webpackContext，这个方法接收一个参数（key）又返回一个执行的方法__webpack_require__(id)，
这个__webpack_require__就相当于require或者import。同时webpackContext还有二个静态方法keys与resolve，一个id属性。

keys: 返回匹配成功模块的名字组成的数组
resolve: 接受一个参数request，request为test文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
id: 执行环境的id，返回的是一个字符串，主要用在module.hot.accept，应该是热加载
*/
 
const req = require.context('./', false, /\.vue$/)

const re = /\.\/(.*)\.vue/

const requireAll = requireContext => requireContext.keys()

let msg = {}

req.keys().forEach(key => {
  msg[key.match(re)[1]] = req(key).default
})

console.log(msg)

ts导入js文件 或者其它文件

导入js

在tsconfig中加上 "allowJs": true, "noImplicitAny": true,

allowJs 是否允许导入js或者jsx noImplicitAny 可选 编译器是否进行强制类型检查

其它文件

在和main.ts同级的.d.ts文件中添加对应的文件类型

declare module "*.svg" {
  const content: string;
  export default content;
}

eslint 在git commit 配置某些地方的不语法检测 文件或者文件夹

.eslintignore 创建一个文件

build/
config/
src/

.gitignore 配置git提交忽略的文件或者文件夹

.DS_Store
teamones.json
teamones.json~dev
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
teamones.json

为什么vue组件的驼峰命名法 在使用的时候需要将其用小写 并 用-连接

因为HTML属性名称是不区分大小写的，浏览器会将其全部转换为小写

process.env.NODE_ENV

在package.json scripts 中配置当前命令启动的环境

"dev": "set NODE_ENV=dev&&vue-cli-service serve",
"build-dev": "set NODE_ENV=dev&&vue-cli-service build",

通过 process.env.NODE_ENV 获取当前的环境