懵逼，竟然没有中文版。自己对英文不敏感，看一遍记录下来，备用。

介绍

这个模板是针对大型应用，默认你已经熟悉Webpack和vue-loader。确定已经读过vue-loader文档去面对一般的工作流程。

快速开始

为了使用这个模板，需要使用vue-cli脚手架。推荐使用npm3+

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

项目结构

.
├── build/                      # webpack config files(webpack配置文件)
│   └── ...
├── config/
│   ├── index.js                # main project config（主要配置文件）
│   └── ...
├── src/
│   ├── main.js                 # app entry file（入口）
│   ├── App.vue                 # main app component（组件入口）
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)（需要预处理的静态资源）
│       └── ...
├── static/                     # pure static assets (directly copied)（纯静态资源）
├── test/(测试先不看了)
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config（es6适配）
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

build/
这个目录包含生产和开发环境下的webpack构建配置。通常情况下你不需要接触这些文件，除非你想自定义webpack构建。在这种情况下，你需要去浏览build/webpack.base.conf.js
config/index.js
这个是一个暴露了在在build过程中大部分配置选项的配置文件。See API Proxying During Development and Integrating with Backend Framework for more details.
src/
项目代码目录。如果使用了Vuex可以参考recommendations for Vuex applications.
static/
不需要预处理的静态资源文件
See Handling Static Assets for more details.
test/unit
测试文件
See Unit Testing for more details.
test/e2e
e2e测试文件
See End-to-end Testing for more details.
index.html
这个单页面模板。在开发和构建中。webpack 最后生成的资源的都在注入到这个模板。生成最后的html
package.json
包含依赖的npm包文件和build指令

Build 指令

所有执行都是NPM脚本执行
npm run dev
开启node.js本地服务器

单页面组件需要的webpack + vue-loader
热加载（修改文件，无需重启服务器）
编译覆盖
ESlint
原文件映射
npm run build
为生产构建资源文件
js压缩（ UglifyJS v3.）
html压缩html-minifier.
所有组件中的css文件被提取到一个文件中，压缩cssnano.
为了长期缓存素有的静态资源都被编译带有版本哈希。生产模式下的index.html会自动生成url为这些资源
npm run unit
利用Jest在JSDOM中进行单元测试
支持es6
容易mocking
npm run e2e
利用nightWatch进行e2e测试。
在多个浏览器进行并行测试
开箱即用的命令
- Selenium and chromedriver dependencies自动处理
- 自动生成Selenium服务器。
  npm run lint
  运行eslint

Babel 配置

这个模板使用了babel-preset-env来配置babel，更多信息参考http://2ality.com/2017/02/babel-preset-env.html.
一个预选设置的Babel可以自动将es6降级为es5,根据目标浏览器或者运行环境
使用browserslist
去压缩这些信息所以我们可以使用valid query format supported by browserslist.
然后这里有个警告，browserslist推荐定义目标文件类似package.json或者. browserslistrc配置文件。这样允许一些工具，类似 autoprefixer and eslint-plugin-compat 去分享这些配置，在这个模板中browserslist配置在package.json:

{
  "...": "...",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

但在最新的babel-preset-envv1.6.1稳定发行版中。没有支持加载配置文件从package.json，所以配置环境重复在.babelrc.如果你希望改变你的目标环境，请确定更新了package.json和. babelrc。这个问题已经在测试版修正。模板会在正式版出来更新。

Linter配置

这个模板利用ESLinter作为linter,使用标准的预设和一些自定义操作。
如果你不喜欢这些预定的规则，你有已下几种选择。
1。在.eslintrc.js中重写linter规则。例如你可以强制使用分号而不是忽略他们：

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

当生成项目的时候，选择一个不同的预设。例如eslint-config-airbnb.
3 当生成项目定义自己的规则的时候，对于ESLinter选择none。更多细节See ESLint documentation for more details.

修正Linter错误

你可以使用以下命令去修复错误（不能修复所有的错误）

npm run lint -- --fix

在中间的--是有必要的确定--fix是传给lint 而不是npm的
该模板为大多数CSS预处理器预先配置了CSS提取。要使用预处理器，只需要安装相应的webpack加载程序。例如SASS

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

你需要安装node-sass因为sass-loader依赖他

在组件中中使用预处理器

一旦你安装了预处理器，你可以在.vue 中使用style标签的lang属性

一个SASS语法的提示

lang =“scss”对应于CSS超集语法（带花括号和分号）。
lang =“sass”对应于基于缩进的语法。

PostCss

.vue文件和样式文件（* .css，* .scss等）中的样式默认被PostCss输出。你不要使用特定的加载器
你可以简单的增加PostCss插件，通过在根目录添加.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {}
  }
}

See vue-loader's related documentation for more details.

独立的CSS文件

为了确保提取和处理的一致性。推荐你导入全局，独立的样式在App.vue组件中。例如

在程序中你应该只对自己写的样式这样操作。对于已经存在的库 e.g. Bootstrap or Semantic UI你可以放在index.html并且引入他们。这样避免构建时间和浏览器缓存

处理静态Assets

你应该在注意到在项目结构总有2个静态资源文件夹src/assets和static/.区别是什么呢？

Webpacked Assets

为了回答这个问题，我们要知道Webpack如何处理这些assets,在*.vue的组件中。你的所有模板和css样式都被vue-html-loader and css-loader解析以查找资源urls。
举例 and background: url(./logo.png), "./logo.png"是相对资源路径会被webpack作为模块依赖性解决。

因为logo.png不是js,当作为模块依赖性对待的时候，我们需要使用url-loader and file-loader去处理。这个模板，已经配置了这些loaders。你可以免费获得如filename fingerprinting和 base64内联功能，当你使用相对路径的时候不用考虑部署问题。

由于这些资产可能在构建过程中被内联/复制/重命名，因此它们基本上是源代码的一部分。这就是为什么建议将Webpack处理的静态资源放置在/ src中以及其他源文件的原因。实际上，你甚至不必将它们全部放在/ src / assets中：您可以使用它们根据模块/组件组织它们。例如，您可以将每个组件放在其自己的目录中，其静态assets就位于其旁边。

Asset 解析规则

1 urls 相对路径：类似./assets/logo.png会被解释成模块依赖，会被替换成由webpack基于你输出配置的自动生成的url路径
2 没有前缀的urls 类似assets/logo.png等同于./assets/logo.png
3 带有~前缀的urls : 会被作为一个模块请求，类似require('some-module/image.png')，如果你想利用Webpack模块解析配置，你需要使用这个前缀
4 根目录相对路径。不会被处理

在js中获取Asset路径

为了在webpack中返回正确的路径，你需要使用require('./relative/path/to/file.jpg')
，这会被file-loader处理并且返回解析后的路径例如：

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

注释：例子中的图片在最后的build中都会在./bgs/。因为webpack无法猜测在运行是什么时候时候使用到。

真正静态资源

作为对比，在static/不会被webapck处理.他们会被直接复制并且相同的文件名。你必须使用他们用绝对路径。这个绝对路径是这是通过在config.js中加入build.assetsPublicPath和build.assetsSubDirectory来确定的

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

所有放在static/文件加下面的文件必须使用绝对路径static/filename。如果你改变了assetSubDirectory为asset。路径变为asset/filename

环境变量

有时根据应用程序运行的环境具有不同的配置值是可行的。
类似

// config/prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  DEBUG_MODE: false,
  API_KEY: '"..."' // this is shared between all environments
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})

// config/test.env.js
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})

注释：字符串变量需要'"..."'
综上，环境变量

Production
NODE_ENV = 'production',
DEBUG_MODE = false,
API_KEY = '...'
Development
NODE_ENV = 'development',
DEBUG_MODE = true,
API_KEY = '...'
Testing
NODE_ENV = 'testing',
DEBUG_MODE = true,
API_KEY = '...'

test.env 继承dev ,dev继承prod.env

使用

最简单的使用方法

Vue.config.productionTip = process.env.NODE_ENV === 'production'

于后端框架集成

如果你构建的是纯静态界面（没有端口api交互的），你就不需要编辑config/index.js.
然而你像集成这个模板到现有的后端框架中。你需要编辑config/index.js直接生成前段资源给后端。
默认的config/index.js

// config/index.js
'use strict'
const path = require('path')

module.exports = {
  dev: {
    / Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost',
    port: 8080, 

    // skipping other options as they are only convenience features
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    productionSourceMap: true,

    // skipping the rest ...
  },
}

在build的括号中，有这几个选项。
build.index

必须是当地文件系统中的绝对路径

这个是index.html自动生成的
你可以相应地编辑index.html并将此路径指向您的后端应用程序呈现的视图文件，
app/views/layouts/application.html.erb for a Rails app, or resources/views/index.blade.php for a Laravel app.

build.assetsRoot

也必须是绝对路径

必须指向包含静态资源的根目录
For example, public/ for both Rails/Laravel.
build.assetsSubDirectory
webpack生成器嵌套在build.assetsRoot文件夹中，其他文件不应该混合在一起。举个例子，如果build.assetsRoot是/path/to/dist.build.assetsSubDirectory是static。那么webpack 生成的资源就会在path/to/dist/static文件夹下。

这个目录会在每次build的时候清除。所以他应该只包含build生成的资源文件。

在/static中的文件都在会构建时，拷贝到该目录。这意思是如果你改变了这个前缀所有在/static中绝对路径的URLs都需要改变。

build.assetsPublicPath
这应该是你的build.assetsRoot将通过HTTP提供的URL路径。在大多数情况下，这将是根（/）。只有在后端框架为路径前缀提供静态资产时才更改此设置。在内部，这作为output.publicPath传递给Webpack。

build.productionSourceMap
是否在生产模式下生成资源映射

dev.port
指定开发端口号

dev.proxyTable
定义开发服务器的代理规则

在开发模式下的API代理

当需要集成当前模板到现有后台框架的时候。最常见的需求就是使用开发服务器请求后台API。为了这样，我们可以运行开发服务器和后台服务器，让开发服务器代理api请求到真正的后台服务器。

为了配置代理规则。编辑config/index.js中的dev.proxyTable.这个开发服务器是使用http-proxy-middleware
来代理。所以你可以查看文档来了解使用细节。这边有个简单的例子。

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的例子会代理请求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1上面去。

URL 匹配

除了静态URL之外，您还可以使用全局模式来匹配网址，例如/ API/**。除此之外，你可以自定义方法来确定是否请求可以被代理。

proxyTable: {
  '**': {
    target: 'http://jsonplaceholder.typicode.com',
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}

单元测试

项目提供了2种单元测试。
1.Jest
2.Karma and Mocha

Jest

启动JSDOM的测试运行器运行测试并将结果报告给我们。

Files

setup.js
Jest在运行单元测试之前运行此文件。它将Vue生产提示设置为false。

Vue webpack 介绍翻译

介绍

快速开始

项目结构

Build 指令

Babel 配置

Linter配置

修正Linter错误

在组件中中使用预处理器

一个SASS语法的提示

PostCss

独立的CSS文件

处理静态Assets

Webpacked Assets

Asset 解析规则

在js中获取Asset路径

真正静态资源

环境变量

使用

于后端框架集成

在开发模式下的API代理

URL 匹配

单元测试

Jest

Files

Mocking 依赖

Karma and Mocha

你可能感兴趣的:(Vue webpack 介绍翻译)

Vue webpack 介绍 翻译

介绍

快速开始

项目结构

Build 指令

Babel 配置

Linter配置

修正Linter错误

在组件中中使用预处理器

一个SASS语法的提示

PostCss

独立的CSS文件

处理静态Assets

Webpacked Assets

Asset 解析规则

在js中获取Asset路径

真正静态资源

环境变量

使用

于后端框架集成

在开发模式下的API代理

URL 匹配

单元测试

Jest

Files

Mocking 依赖

Karma and Mocha

你可能感兴趣的:(Vue webpack 介绍 翻译)

Vue webpack 介绍翻译

你可能感兴趣的:(Vue webpack 介绍翻译)