从零开始搭建Vue2.0项目(一)之快速开始

从零开始搭建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预设。

如果您对默认的掉毛规则不满意，则可以选择以下几种方法：

1. 覆盖中的单个规则.eslintrc.js。例如，您可以添加以下规则来强制使用分号而不是省略分号：

   // .eslintrc.js
   "semi": [2, "always"]
   

2. 生成项目时，请选择其他ESLint预设，例如eslint-config-airbnb。

3. 生成项目并定义自己的规则时，为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组件中的预处理器，使用