Vue-cli 搭建移动端项目

linxner

2019-07-01

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...