从零开始搭建Vue2.0项目(一)之项目快速开始
前言📋
该样板适用于大型，严肃的项目，并假定您对Webpack和有所了解vue-loader。确保还阅读vue-loader的文档，了解常见的工作流程配方。
如果您只想尝试vue-loader或快速制作出原型，请改用webpack-simple模板。
快速开始🚀
要使用此模板，请使用vue-cli搭建项目。建议使用npm 3+以获得更有效的依赖关系树。
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 
安装完成后，成功运行：
项目结构🌈
. ├── build/ # webpack配置文件 │ └── ... ├── config/ │ ├── index.js # 主要项目配置 │ └── ... ├── src/ │ ├── main.js # 应用入口文件 │ ├── App.vue # 主应用程序组件 │ ├── components/ # ui组件 │ │ └── ... │ └── assets/ # 模块资源（由webpack处理） │ └── ... ├── static/ # 纯静态资源（直接复制） ├── test/ │ └── unit/ # 单元测试 │ │ ├── specs/ # 测试spec文件 │ │ ├── index.js # 测试构建条目文件 │ │ └── karma.conf.js # 测试跑步者配置文件 │ └── e2e/ # e2e测试 │ │ ├── specs/ # 测试spec文件 │ │ ├── custom-assertions/ # e2e测试的自定义断言 │ │ ├── runner.js # 测试跑步脚本 │ │ └── nightwatch.conf.js # 测试跑步者配置文件 ├── .babelrc # babel 配置 ├── .postcssrc.js # postcss 配置 ├── .eslintrc.js # eslint 配置 ├── .editorconfig # editor 配置 ├── index.html # index.html模板 └── package.json # 构建脚本和依赖关系 下面的内容建议根据需要自行了解哈，这里就不再细讲了😛！
想直接上手下一步配置的可以直接跳转到下一篇了 👉
项目完整配置
详细配置参考webpack官网：http://vuejs-templates.github.io/webpack/😎
Babel配置
该样板babel-preset-env用于配置Babel。您可以在此处了解更多信息-http://2ality.com/2017/02/babel-preset-env.html。因此，通过配置Babel可以使程序运行在不同版本的浏览器中(比如：IE 11+)
一个Babel预设，可根据目标浏览器或运行时环境自动确定所需的Babel插件和polyfill，从而将ES2015 +向下编译为ES5。
它用于browserslist解析此信息，因此我们可以使用所支持的browserslist任何有效查询格式。
但是有一个警告。browserslist建议在定义像一个共同的地方目标package.json或在.browserslistrc配置文件中。这允许像autoprefixer和eslint-plugin-compat共享配置的工具。对于此模板，browserslist在中配置package.json：
{ "...": "...", "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] } 但最新的稳定版本babel-preset-env，v1.6.1不支持从中加载配置package.json。因此，在中重复了目标环境.babelrc。如果要更改目标环境，请确保同时更新package.json和.babelrc。请注意，此问题已在beta版本（@babel/preset-env@7.0.0-beta.34）中修复，一旦模板超出beta版本，模板就会进行更新。
Linter配置
该样板使用ESLint作为临时对象，并使用带有一些小的定制的Standard预设。
如果您对默认的掉毛规则不满意，则可以选择以下几种方法：
-
覆盖中的单个规则
.eslintrc.js。例如，您可以添加以下规则来强制使用分号而不是省略分号：// .eslintrc.js "semi": [2, "always"] -
生成项目时，请选择其他ESLint预设，例如eslint-config-airbnb。
-
生成项目并定义自己的规则时，为ESLint预设选择“无”。有关更多详细信息，请参见ESLint文档。
修复棉绒错误
您可以运行以下命令让eslint修复发现的任何错误（如果可以的话-并非所有错误都可以像这样修复）：
npm run lint -- --fix （--中间的，以确保将--fix选项传递给eslint，而不是npm）是必要的
预处理器
此样板为大多数流行的CSS预处理器（包括LESS，SASS，Stylus和PostCSS）预先配置了CSS提取。 要使用预处理器，您需要做的就是为其安装适当的webpack加载器。 例如，要使用SASS：
npm install sass-loader node-sass --save-dev 请注意，您还需要安装node-sass，因为sass-loader将其视为对等依赖关系。
在组件内部使用预处理器:
安装完成后，您可以使用* .vue组件中的预处理器，使用
