从零开始搭建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组件中的预处理器，使用 <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 */]
  }
}

有关详细信息，请参阅vue-loader's的相关文档。

Standalone CSS Files:

为了确保一致的提取和处理，建议从您的根App.vue组件导入全局独立样式文件，例如：

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

请注意，您应该仅为自己为您的应用程序编写的样式。对于现有的图书馆引导或语义UI，您可以将它们放在/静态中，并直接在index.html中引用它们。这避免了额外的构建时间，也更适合浏览器缓存。（见 Static Asset Handling）

处理静态资产(Static Assets):

您将在项目结构中注意到，静态资产有两个目录：src / assets和static /。他们有什么区别？

Webpacked资产:

为了回答这个问题，我们首先需要了解Webpack如何处理静态资产。在* .vue组件中，所有的模板和CSS都由vue-html-loader和css-loader解析来查找资源URL。例如，在和background：url（./ logo.png）中，“./logo.png”是相对的资产路径，将由Webpack解析为模块依赖关系。

因为logo.png不是JavaScript，当被视为模块依赖关系时，我们需要使用url-loader和file-loader来处理它。此样板已经为您配置了这些加载程序，因此您可以免费获得文件名指纹和条件base64内联等功能，同时可以使用相对/模块路径，而不必担心部署。

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

资产解决规则:

.相对网址，例如 ./assets/logo.png将被解释为模块依赖关系。它们将被基于Webpack输出配置的自动生成的URL替换。

.非前缀网址，例如 assets / logo.png将被视为与相对URL相同，并被翻译成./assets/logo.png。

.前缀为〜的URL被视为模块请求，类似于require（'some-module / image.png'）。如果要使用Webpack的模块解析配置，则需要使用此前缀。例如，如果您有资产的解决别名，则需要使用 “〜assets 来确保别名符合要求。

.根相对URL，例如 /assets/logo.png根本没有被处理。

在JavaScript中获取资源路径:

为了使Webpack返回正确的资源路径，您需要使用require（'./ relative / path / to / file.jpg'），这将由文件加载程序处理，并返回已解析的URL。例如：*

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

注意上面的例子将包括最终构建中的./bgs/下的每个图像。这是因为Webpack无法猜测它们在运行时将被使用，所以它包括它们。

“真实”静态资产:

相比之下，静态的文件根本不被Webpack处理：它们直接以相同的文件名复制到最终目的地。您必须使用绝对路径引用这些文件，这是通过在config.js中加入build.assetsPublicPath和build.assetsSubDirectory来确定的。

例如，使用以下默认值：

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

使用绝对URL / static / [filename]引用静态/中的任何文件。如果将assetSubDirectory更改为资产，则这些URL将需要更改为/ assets / [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"'
})

注意：字符串变量需要用单引号和双引号引起来 '"..."'

因此，环境变量为：

生产
- NODE_ENV ='生产'，
- DEBUG_MODE = false，
- API_KEY ='...'
发展历程
- NODE_ENV ='发展'，
- DEBUG_MODE = true，
- API_KEY ='...'
测验
- NODE_ENV ='正在测试'，
- DEBUG_MODE = true，
- API_KEY ='...'

如我们所见，test.env继承了dev.env和dev.env继承了prod.env。

用法

在代码中使用环境变量很简单。例如：

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

与后端框架集成

如果您要构建一个纯静态的应用程序（一个与后端API分开部署的应用程序），那么您甚至可能不需要进行编辑config/index.js。但是，如果您想将此模板与现有的后端框架（例如Rails / Django / Laravel）集成在一起，它们都具有自己的项目结构，则可以进行编辑config/index.js以将前端资产直接生成到您的后端项目中。

让我们看一下默认值config/index.js：

// config/index.js
var path = require('path')

module.exports = {
  build: {
    index: path.resolve(__dirname, 'dist/index.html'),
    assetsRoot: path.resolve(__dirname, 'dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

在此build部分中，我们有以下选项：

build.index

必须是本地文件系统上的绝对路径。

这是生成index.html（带有注入的资产URL）的地方。

如果您将此模板与后端框架一起使用，则可以进行相应的编辑index.html，并将此路径指向后端应用程序渲染的视图文件，例如，app/views/layouts/application.html.erb用于Rails应用程序或resources/views/index.blade.phpLaravel应用程序。

build.assetsRoot

必须是本地文件系统上的绝对路径。

这应该指向包含应用程序所有静态资产的根目录。例如，public/对于两个Rails / Laravel。

build.assetsSubDirectory

将webpack生成的资产嵌套在此目录下build.assetsRoot，以使它们不会与中可能包含的其他文件混合build.assetsRoot。例如，如果build.assetsRootis/path/to/dist和build.assetsSubDirectoryis static，则所有Webpack资产都将在中生成path/to/dist/static。

该目录将在每次构建之前清除，因此它应仅包含由构建生成的资产。

内部文件static/将在构建过程中原样复制到此目录中。这意味着，如果您更改此前缀，则所有引用文件的绝对URLstatic/也将需要更改。有关更多详细信息，请参见处理静态资产。

build.assetsPublicPath

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

build.productionSourceMap

是否生成用于生产构建的源地图。

dev.port

指定开发服务器要监听的端口。

dev.proxyTable

定义开发服务器的代理规则。有关更多详细信息，请参见开发期间的API代理。

跨域代理

当将此样板与现有后端集成时，通常需要在使用dev服务器时访问后端API。为了实现这一点，我们可以并行（或远程）运行dev服务器和API后端，并让dev服务器将所有API请求代理到实际的后端。

要配置代理规则，请在config / index.js中编辑dev.proxyTable选项。 dev服务器正在使用http代理中间件进行代理，因此您应参考其文档以获取详细的用法。但这是一个简单的例子：

// 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.

网址匹配：

除了静态网址之外，您还可以使用glob模式来匹配网址，例如/ API/ **。有关详细信息，请参阅上下文匹配。此外，您可以提供一个过滤器选项，该选项可以是自定义函数，用于确定请求是否应被代理：

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

单元测试

该项目为单元测试提供了两种选择：

Karma：启动浏览器，运行测试并将结果报告给我们的测试运行程序。
karma-webpack：Karma插件，使用Webpack捆绑了我们的测试。
Mocha：我们用来编写测试规范的测试框架。
Chai：测试断言库，提供更好的断言语法。
Sinon：提供间谍，存根和模拟的测试实用程序库。

Chai 和 Sinon是使用karma-sinon-chai进行集成的，因此所有的柴接口（should，expect，assert），并sinon在测试文件全局可用。

端到端测试

该样板使用Nightwatch.js进行e2e测试。Nightwatch.js是建立在Selenium之上的高度集成的e2e测试运行程序。该样板随附为您预先配置的Selenium服务器和chromedriver二进制文件，因此您不必自己弄乱这些文件。

让我们看一下目录中的test/e2e文件：

runner.js
一个Node.js脚本，该脚本启动开发服务器，然后启动Nightwatch对它运行测试。这是运行时将运行的脚本npm run e2e。
nightwatch.conf.js
Nightwatch配置文件。有关更多详细信息，请参见Nightwatch的有关配置的文档。
custom-assertions/
可在Nightwatch测试中使用的自定义断言。有关更多详细信息，请参见Nightwatch的有关编写自定义断言的文档。
specs/
您的实际测试！有关更多详细信息，请参见Nightwatch的有关编写测试的文档和API参考。

在更多浏览器中运行测试

要配置在其中运行测试的浏览器，请在中的“ test_settings”下添加一个条目test/e2e/nightwatch.conf.js，并在中添加--env标记test/e2e/runner.js。如果希望在SauceLabs等服务上配置远程测试，则可以根据环境变量使Nightwatch配置为条件，或者完全使用单独的配置文件。有关更多详细信息，请查阅Nightwatch关于Selenium的文档。

预渲染SEO

如果您希望预先投放一旦推送到生产时不会显着更改的路线，请使用此Webpack插件：prerender-spa-plugin，它已经过Vue测试。对于频繁更改的页面，Prerender.io和Netlify都提供定期重新预览您的搜索引擎内容的计划。

使用prerender-spa-plugin

将其安装为开发人员依赖关系：

npm install --save-dev prerender-spa-plugin

需要在build / webpack.prod.conf.js中：

// 该行应该位于其他“进口”生活的文件的顶部
var PrerenderSpaPlugin = require('prerender-spa-plugin')

在plugins数组中（也在build / webpack.prod.conf.js中）进行配置：

new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, '../dist'),
  // List of endpoints you wish to prerender
  [ '/' ]
)

如果您还想预先投射/关于和/接触，那么该数组将是['/'，'/ about'，'/ contact']。

启用vue-router的历史记录模式

const router = new VueRouter({
mode: 'history',
routes: [...]
})

【学无止境❤️谦卑而行】欢迎关注白羊🐏，感谢观看ヾ(◍°∇°◍)ﾉﾞ

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

前言📋

快速开始🚀

项目结构🌈

项目完整配置

Babel配置

Linter配置

预处理器

PostCSS

Webpacked资产:

环境变量

与后端框架集成

跨域代理

单元测试

端到端测试

在更多浏览器中运行测试

预渲染SEO

启用vue-router的历史记录模式

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前言📋

快速开始🚀

项目结构🌈

项目完整配置

Babel配置

Linter配置

预处理器

PostCSS

Webpacked资产:

环境变量

与后端框架集成

跨域代理

单元测试

端到端测试

在更多浏览器中运行测试

预渲染SEO

启用vue-router的历史记录模式

热门文章

最新文章

相关课程

相关电子书

相关实验场景