code学习

从零开始搭建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      
从零开始搭建Vue2.0项目(一)之项目快速开始

安装完成后,成功运行:

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

项目结构🌈

.
├── 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"]      
  1. 生成项目时,请选择其他ESLint预设,例如​​eslint-config-airbnb​​。
  2. 生成项目并定义自己的规则时,为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。 例如,在<img src =“./ logo.png”>和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的模块解析配置,则需要使用此前缀。 例如,如果您有资产的解决别名,则需要使用<img src =“〜assets / logo.png”>来确保别名符合要求。

.根相对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.php​

​Laravel应用程序。

build.assetsRoot

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

这应该指向包含应用程序所有静态资产的根目录。例如,​

​public/​

​对于两个Rails / Laravel。

build.assetsSubDirectory

将webpack生成的资产嵌套在此目录下​

​build.assetsRoot​

​​,以使它们不会与中可能包含的其他文件混合​

​build.assetsRoot​

​​。例如,如果​

​build.assetsRoot​

​​is​

​/path/to/dist​

​​和​

​build.assetsSubDirectory​

​​is ​

​static​

​​,则所有Webpack资产都将在中生成​

​path/to/dist/static​

​。

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

内部文件​

​static/​

​​将在构建过程中原样复制到此目录中。这意味着,如果您更改此前缀,则所有引用文件的绝对URL​

​static/​

​​也将需要更改。有关更多详细信息,请参见​​处理静态资产​​。

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: [...]
})