从零开始搭建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组件中的预处理器，使用\3c/code>\3c/pre>
\3cp>关于SASS语法的注释:\3c/p>
\3cp>lang =“scss”对应于CSS-superset语法（带大括号和分号）。\3c/p>
\3cp>lang =“sass”对应于基于缩进的语法。\3c/p>
\3ch3 id="postcss">PostCSS\3c/h3>
\3cp>默认情况下，* .vue文件中的样式通过PostCSS管道传输，因此您不需要使用特定的加载器。 您可以在vue块下简单添加要在build / webpack.base.conf.js中使用的PostCSS插件：\3c/p>
\3cpre>\3ccode>// build/webpack.base.conf.js
module.exports = { }
来确保别名符合要求。\3c/p>
\3cp>.根相对URL，例如 /assets/logo.png根本没有被处理。\3c/p>
\3cp>在JavaScript中获取资源路径:\3c/p>
\3cp>为了使Webpack返回正确的资源路径，您需要使用require（'./ relative / path / to / file.jpg'），这将由文件加载程序处理，并返回已解析的URL。 例如：*\3c/p>
\3cpre>\3ccode>computed: { }
\3c/code>\3c/pre>
\3cp>注意上面的例子将包括最终构建中的./bgs/下的每个图像。 这是因为Webpack无法猜测它们在运行时将被使用，所以它包括它们。\3c/p>
\3cp>“真实”静态资产:\3c/p>
\3cp>相比之下，静态的文件根本不被Webpack处理：它们直接以相同的文件名复制到最终目的地。 您必须使用绝对路径引用这些文件，这是通过在config.js中加入build.assetsPublicPath和build.assetsSubDirectory来确定的。\3c/p>
\3cp>例如，使用以下默认值：\3c/p>
\3cpre>\3ccode>// config/index.js
module.exports = { }
\3c/code>\3c/pre>
\3cp>使用绝对URL / static / [filename]引用静态/中的任何文件。 如果将assetSubDirectory更改为资产，则这些URL将需要更改为/ assets / [filename]。\3c/p>
\3cp>我们将在后端集成部分中详细了解配置文件。\3c/p>
\3ch3 id="环境变量">环境变量\3c/h3>
\3cp>有时，根据应用程序运行的环境，使用不同的配置值是可行的。\3c/p>
\3cp>举个例子：\3c/p>
\3cpre>\3ccode class="language-js">// 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 }
\3c/code>\3c/pre>
\3cp>在此\3ccode>build\3c/code>部分中，我们有以下选项：\3c/p>
\3cp>\3cstrong>build.index\3c/strong>\3c/p>
\3cblockquote>
\3cp>必须是本地文件系统上的绝对路径。\3c/p>
\3c/blockquote>
\3cp>这是生成\3ccode>index.html\3c/code>（带有注入的资产URL）的地方。\3c/p>
\3cp>如果您将此模板与后端框架一起使用，则可以进行相应的编辑\3ccode>index.html\3c/code>，并将此路径指向后端应用程序渲染的视图文件，例如，\3ccode>app/views/layouts/application.html.erb\3c/code>用于Rails应用程序或\3ccode>resources/views/index.blade.php\3c/code>Laravel应用程序。\3c/p>
\3cp>\3cstrong>build.assetsRoot\3c/strong>\3c/p>
\3cblockquote>
\3cp>必须是本地文件系统上的绝对路径。\3c/p>
\3c/blockquote>
\3cp>这应该指向包含应用程序所有静态资产的根目录。例如，\3ccode>public/\3c/code>对于两个Rails / Laravel。\3c/p>
\3cp>\3cstrong>build.assetsSubDirectory\3c/strong>\3c/p>
\3cp>将webpack生成的资产嵌套在此目录下\3ccode>build.assetsRoot\3c/code>，以使它们不会与中可能包含的其他文件混合\3ccode>build.assetsRoot\3c/code>。例如，如果\3ccode>build.assetsRoot\3c/code>is\3ccode>/path/to/dist\3c/code>和\3ccode>build.assetsSubDirectory\3c/code>is \3ccode>static\3c/code>，则所有Webpack资产都将在中生成\3ccode>path/to/dist/static\3c/code>。\3c/p>
\3cp>该目录将在每次构建之前清除，因此它应仅包含由构建生成的资产。\3c/p>
\3cp>内部文件\3ccode>static/\3c/code>将在构建过程中原样复制到此目录中。这意味着，如果您更改此前缀，则所有引用文件的绝对URL\3ccode>static/\3c/code>也将需要更改。有关更多详细信息，请参见\3ca href="http://vuejs-templates.github.io/webpack/static.html" target="_blank">处理静态资产\3c/a>。\3c/p>
\3cp>\3cstrong>build.assetsPublicPath\3c/strong>\3c/p>
\3cp>这应该是\3ccode>build.assetsRoot\3c/code>将通过HTTP为您提供服务的URL路径。在大多数情况下，这将是根（\3ccode>/\3c/code>）。仅当您的后端框架提供带有路径前缀的静态资产时才更改此设置。在内部，这作为传递给Webpack \3ccode>output.publicPath\3c/code>。\3c/p>
\3cp>\3cstrong>build.productionSourceMap\3c/strong>\3c/p>
\3cp>是否生成用于生产构建的源地图。\3c/p>
\3cp>\3cstrong>dev.port\3c/strong>\3c/p>
\3cp>指定开发服务器要监听的端口。\3c/p>
\3cp>\3cstrong>dev.proxyTable\3c/strong>\3c/p>
\3cp>定义开发服务器的代理规则。有关更多详细信息，请参见\3ca href="http://vuejs-templates.github.io/webpack/proxy.html" target="_blank">开发期间的API代理\3c/a>。\3c/p>
\3ch3 id="跨域代理">跨域代理\3c/h3>
\3cp>当将此样板与现有后端集成时，通常需要在使用dev服务器时访问后端API。 为了实现这一点，我们可以并行（或远程）运行dev服务器和API后端，并让dev服务器将所有API请求代理到实际的后端。\3c/p>
\3cp>要配置代理规则，请在config / index.js中编辑dev.proxyTable选项。 dev服务器正在使用http代理中间件进行代理，因此您应参考其文档以获取详细的用法。 但这是一个简单的例子：\3c/p>
\3cpre>\3ccode class="language-js">// config/index.js
module.exports = { }
\3c/code>\3c/pre>
\3cp>以上示例将代理请求/ api / posts / 1 到 \3ccode>http://jsonplaceholder.typicode.com/posts/1\3c/code>.\3c/p>
\3cp>网址匹配：\3c/p>
\3cp>除了静态网址之外，您还可以使用glob模式来匹配网址，例如/ API/ **。 有关详细信息，请参阅上下文匹配。 此外，您可以提供一个过滤器选项，该选项可以是自定义函数，用于确定请求是否应被代理：\3c/p>
\3cpre>\3ccode>proxyTable: { }
\3c/code>\3c/pre>
\3ch3 id="单元测试">单元测试\3c/h3>
\3cp>该项目为单元测试提供了两种选择：\3c/p>
\3cul>
\3cli>\3ca href="https://karma-runner.github.io/" target="_blank">Karma\3c/a>：启动浏览器，运行测试并将结果报告给我们的测试运行程序。\3c/li>
\3cli>\3ca href="https://github.com/webpack/karma-webpack" target="_blank">karma-webpack\3c/a>：Karma插件，使用Webpack捆绑了我们的测试。\3c/li>
\3cli>\3ca href="https://mochajs.org/" target="_blank">Mocha\3c/a>：我们用来编写测试规范的测试框架。\3c/li>
\3cli>\3ca href="http://chaijs.com/" target="_blank">Chai\3c/a>：测试断言库，提供更好的断言语法。\3c/li>
\3cli>\3ca href="http://sinonjs.org/" target="_blank">Sinon\3c/a>：提供间谍，存根和\3ca href="http://sinonjs.org/" target="_blank">模拟的\3c/a>测试实用程序库。\3c/li>
\3c/ul>
\3cp>\3ccode>Chai\3c/code> 和 \3ccode>Sinon\3c/code>是使用\3ccode>karma-sinon-chai\3c/code>进行集成的，因此所有的柴接口（\3ccode>should\3c/code>，\3ccode>expect\3c/code>，\3ccode>assert\3c/code>），并\3ccode>sinon\3c/code>在测试文件全局可用。\3c/p>
\3ch3 id="端到端测试">端到端测试\3c/h3>
\3cp>该样板使用\3ca href="http://nightwatchjs.org/" target="_blank">Nightwatch.js\3c/a>进行e2e测试。Nightwatch.js是建立在Selenium之上的高度集成的e2e测试运行程序。该样板随附为您预先配置的Selenium服务器和chromedriver二进制文件，因此您不必自己弄乱这些文件。\3c/p>
\3cp>让我们看一下目录中的\3ccode>test/e2e\3c/code>文件：\3c/p>
\3cul>
\3cli>
\3cp>\3ccode>runner.js\3c/code>\3c/p>
\3cp>一个Node.js脚本，该脚本启动开发服务器，然后启动Nightwatch对它运行测试。这是运行时将运行的脚本\3ccode>npm run e2e\3c/code>。\3c/p>
\3c/li>
\3cli>
\3cp>\3ccode>nightwatch.conf.js\3c/code>\3c/p>
\3cp>Nightwatch配置文件。有关更多详细信息，请参见\3ca href="http://nightwatchjs.org/gettingstarted#settings-file" target="_blank">Nightwatch的有关配置的文档\3c/a>。\3c/p>
\3c/li>
\3cli>
\3cp>\3ccode>custom-assertions/\3c/code>\3c/p>
\3cp>可在Nightwatch测试中使用的自定义断言。有关更多详细信息，请参见\3ca href="http://nightwatchjs.org/guide#writing-custom-assertions" target="_blank">Nightwatch的有关编写自定义断言的文档\3c/a>。\3c/p>
\3c/li>
\3cli>
\3cp>\3ccode>specs/\3c/code>\3c/p>
\3cp>您的实际测试！有关更多详细信息，请参见\3ca href="http://nightwatchjs.org/guide#writing-tests" target="_blank">Nightwatch的有关编写测试的文档\3c/a>和\3ca href="http://nightwatchjs.org/api" target="_blank">API参考\3c/a>。\3c/p>
\3c/li>
\3c/ul>
\3ch3 id="在更多浏览器中运行测试">在更多浏览器中运行测试\3c/h3>
\3cp>要配置在其中运行测试的浏览器，请在中的“ test_settings”下添加一个条目\3ca href="https://github.com/vuejs-templates/webpack/blob/master/template/test/e2e/nightwatch.conf.js#L17-L39" target="_blank">\3ccode>test/e2e/nightwatch.conf.js\3c/code>\3c/a>，并在中添加\3ccode>--env\3c/code>标记\3ca href="https://github.com/vuejs-templates/webpack/blob/master/template/test/e2e/runner.js#L15" target="_blank">\3ccode>test/e2e/runner.js\3c/code>\3c/a>。如果希望在SauceLabs等服务上配置远程测试，则可以根据环境变量使Nightwatch配置为条件，或者完全使用单独的配置文件。有关更多详细信息，请查阅\3ca href="http://nightwatchjs.org/guide#selenium-settings" target="_blank">Nightwatch关于Selenium的文档\3c/a>。\3c/p>
\3ch3 id="预渲染seo">预渲染SEO\3c/h3>
\3cp>​ 如果您希望预先投放一旦推送到生产时不会显着更改的路线，请使用此Webpack插件：prerender-spa-plugin，它已经过Vue测试。 对于频繁更改的页面，Prerender.io和Netlify都提供定期重新预览您的搜索引擎内容的计划。\3c/p>
\3cp>​ 使用prerender-spa-plugin\3c/p>
\3cp>将其安装为开发人员依赖关系：\3c/p>
\3cpre>\3ccode>npm install --save-dev prerender-spa-plugin
\3c/code>\3c/pre>
\3cp>需要在build / webpack.prod.conf.js中：\3c/p>
\3cpre>\3ccode>// 该行应该位于其他“进口”生活的文件的顶部
var PrerenderSpaPlugin = require('prerender-spa-plugin')
\3c/code>\3c/pre>
\3cp>在plugins数组中（也在build / webpack.prod.conf.js中）进行配置：\3c/p>
\3cpre>\3ccode>new PrerenderSpaPlugin(
// Path to compiled app
path.join(__dirname, '../dist'),
// List of endpoints you wish to prerender
[ '/' ]
)
\3c/code>\3c/pre>
\3cp>如果您还想预先投射/关于和/接触，那么该数组将是['/'，'/ about'，'/ contact']。\3c/p>
\3ch3 id="启用vue-router的历史记录模式">启用vue-router的历史记录模式\3c/h3>
\3cpre>\3ccode>const router = new VueRouter( { mode: 'history',
routes: [...] }