Vue-cli项目详解大全
1、Vue-cli项目结构剖析
(1)、外层目录:
readme //项目的说明文件
package.json //第三方依赖包配置
package.lock.json //帮助我们去确定安装的第三方依赖包的具体的版本,保持团队编程的统一
license //开源协议的说明
index.html //项目默认的首页模版文件
.postcssrc.js //对 postcss 的配置项
(postcss:你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码)
.gitignore //不需要上传到 git 上的文件管理
.eslintrc.js //对写的代码检测是否标准做一个检测
.eslintignore //配置不需要 eslintrc 检测工具检测的文件
.editorconfig //配置编辑器总风格统一的自动化格式的语法
.babelrc //项目写的代码是 Vue 的大文件组件的代码的写法,所以需要通过 babel 这种语法解析器做一些语法上的转换,最终转换成浏览器能够编译执行的代码,babel 需要做额外配置时,就放在文件里面
(2)、文件夹:
static //static 目录放的是静态资源,要用到的静态图片啊或者后续需要模拟的 json 数据
node_modules //项目中需要用到的第三方 node 包
src //放的是项目的源代码
src/main.js //整个项目的入口文件
src/app.vue //整个项目最原始的根组件
src/router/index.js //项目的路由放置位置
src/components //项目中要用到的小组件
src/assets //项目中需要用到的图片
config //放置项目配置文件
config/index.js //放基础配置
config/dev.ent.js //开发环境配置信息
config/prod.ent.js //线上环境配置信息
build //放置项目打包的 webpack 配置信息,vue-cli 会自动构建
build/webpack.base.conf.js //基础的 webpack 配置信息
build/webpack.dev.conf.js //开发环境的 webpack 配置信息
build/webpack.prod.conf.js //线上环境的 webpack 配置信息
2、注意点:babel-polyfill的引用和使用:
(1)、Babel介绍:
理解: babel是javascript语法的编译器。它是为了解决:将ES6语法(不含ES6新的API)编译成可被低版本浏览器识别的语法。
(2)、.babelrc配置
在Babel执行编译的过程中,会从项目的根目录下的 .babelrc文件中读取配置。在.babelrc配置文件中,主要是对预设(presets) 和 插件(plugins) 进行配置。
"presets": [
'env',
{
'modules': false
}
]
这里的modules:false
的目的是:以前我们需要使用babel来将ES6的模块语法转换为AMD, CommonJS,UMD之类的模块化标准语法,但是现在webpack都帮我做了这件事了,所以我们不需要babel来做,因此需要在babel配置项中设置modules为false
,因为它默认值是commonjs
, 否则的话在webpack转换完成后,再用common.js就会产生冲突。
(3)、babel-polyfill
babel-polyfill就是为了解决ES6新的API与这种全局对象或全局对象方法不足的问题。
注意:解决浏览器红色的报错警示:vuex requires a Promise polyfill in this browser.
方法:https://www.cnblogs.com/princ...