从零开始搭建VUE项目

前言：

      此样板面向大型，严肃的项目，并假定您对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                # 构建脚本和依赖关系

下面详细讲解下这个项目解构：

   build/

        此目录包含开发服务器和生产webpack构建的实际配置。 通常，您不需要触摸这些文件，除非您要自定义Webpack加载器，在这种情况下，您应该看看build / webpack.base.conf.js。

   config/index.js

        这是显示构建设置的一些最常见配置选项的主配置文件。 有关详细信息，请参阅开发期间的API代理和后端框架集成。

    src/

        这是你的大部分应用程序代码所在的位置。如何构建此目录中的所有内容，主要取决于您; 如果您使用Vuex，您可以查阅Vuex应用程序的建议。

    static/

        此目录是您不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

有关详细信息，请参阅处理静态资产。

    test/unit

        包含单元测试相关文件。 有关详细信息，请参阅单元测试

    test/e2e

         包含e2e测试相关文件。 有关详细信息，请参阅端到端测试。

 index.html

         这是我们的单页应用程序的模板index.html。 在开发和构建期间，Webpack将生成资产，并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。

    package.json

        包含所有构建依赖项和构建命令的NPM软件包元文件。

  构建命令:

    

npm run dev

    启动Node.js本地开发服务器。 有关详细信息，请参阅开发期间的API代理。

        .用于单个文件Vue组件的Webpack + vue-loader。
        .状态保存热重载
        .状态保存编译错误覆盖
        .使用ESLint保存
        .源地图

npm run build

    建立资源进行生产。 有关详细信息，请参阅与后端框架集成。

        .用UglifyJS缩小了JavaScript。

        .HTML用html-minifier缩小。
        .将所有组件的CSS提取到单个文件中，并用cssnano进行缩小。
        .使用版本散列编辑的所有静态资源都可以进行高效的长期缓存，并且生成index.html是自动生成的，具有适当的URL到这些生成的资产。

npm run unit

    使用Karma在PhantomJS中进行单元测试。 有关详细信息，请参阅单元测试

         .在测试文件中支持ES2015 +。

        .支持所有webpack加载器。
        .轻松模拟注射。

npm run e2e

    使用Nightwatch进行端到端测试。 有关详细信息，请参阅端到端测试 

        .在多个浏览器中并行运行测试。

        .开箱即用的一个命令：
        .硒和chromedriver依赖关系自动处理。
        .自动生成Selenium服务器。

  Linter配置：

    此样板使用ESLint作为linter，并使用标准预设与一些小的定制。如果您对默认的linting规则不满意，您可以选择几种：

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

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

        2.在生成项目时选择不同的ESLint预设，例如eslint-config-airbnb。

        3.在生成项目并定义自己的规则时，为ESLint预设选择“无”。 有关详细信息，请参阅ESLint文档。

  预处理器:

    此样板为大多数流行的CSS预处理器（包括LESS，SASS，Stylus和PostCSS）预先配置了CSS提取。 要使用预处理器，您需要做的就是为其安装适当的webpack加载器。 例如，要使用SASS：

npm install sass-loader node-sass --save-dev

    请注意，您还需要安装node-sass，因为sass-loader将其视为对等依赖关系。

  在组件内部使用预处理器:

    安装完成后，您可以使用* .vue组件中的预处理器，使用<style>标签上的lang属性：   

<style lang="scss">
/* write SASS! */
</style>

  关于SASS语法的注释:

    lang =“scss”对应于CSS-superset语法（带大括号和分号）。

    lang =“sass”对应于基于缩进的语法。

  PostCSS:

    默认情况下，* .vue文件中的样式通过PostCSS管道传输，因此您不需要使用特定的加载器。 您可以在vue块下简单添加要在build / webpack.base.conf.js中使用的PostCSS插件：

// build/webpack.base.conf.js
module.exports = {
  // ...
  vue: {
    postcss: [/* your plugins */]
  }
}