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

注意：解决浏览器红色的报错警示：vuex requires a Promise polyfill in this browser.方法：

3、移动端（微信等）调试工具：使用 vConsole调试console