从零开始搭建VUE项目
前言：php
此样板面向大型，严肃的项目，并假定您对Webpack和vue-loader有些熟悉。 请务必阅读vue-loader的常见工做流配方的文档。css
若是您只想尝试vue-loader或者鞭打一个快速原型，请改用webpack-simple模板。html
快速开始：前端
要使用这个模板，能够用vue-cli来支持一个项目。 建议使用npm 3+更高效的依赖关系树：vue
$ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev
项目结构：node
. ├── 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
build/git
此目录包含开发服务器和生产webpack构建的实际配置。 一般，您不须要触摸这些文件，除非您要自定义Webpack加载器，在这种状况下，您应该看看build / webpack.base.conf.js。github
config/index.jsweb
这是显示构建设置的一些最多见配置选项的主配置文件。 有关详细信息，请参阅开发期间的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 */] } }
有关详细信息，请参阅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"' })
注意：字符串变量须要被包装成单引号和双引号'“...”'
因此环境变量是：
- 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.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.index
必须是本地文件系统上的绝对路径。
若是您使用带有后端框架的此模板，则能够相应地编辑index.html，并将此路径指向由您的后端应用程序呈现的视图文件，例如。 Rails应用的app / views / layouts / application.html.erb或Laravel应用程序的resources / views / index.blade.php。
build.assetsRoot
必须是本地文件系统上的绝对路径。
这应该指向包含应用程序的全部静态资源的根目录。 例如，公开/为Rails / Laravel。
build.assetsSubDirectory
在build.assetsRoot中的此目录下嵌入webpack生成的资源，以便它们与build.assetsRoot中可能具备的其余文件不混合。 例如，若是build.assetsRoot是/ path / to / dist，而且build.assetsSubDirectory是静态的，则全部Webpack资源都将以path / to / dist / static生成。
此目录将在每次构建以前进行清理，所以只应包含生成生成的资源。
静态中的文件将在构建期间按原样复制到该目录中。 这意味着若是您更改此前缀，则全部绝对URL引用static /中的文件也将须要更改。 有关详细信息，请参阅 Handling Static Assets。
build.assetsPublicPath
这应该是您的build.assetsRoot将经过HTTP提供的URL路径。 在大多数状况下，这将是根（/）。 只有当您的后端框架提供具备路径前缀的静态资产时，才能更改此选项。 在内部，这是做为output.publicPath传递给Webpack。
build.productionSourceMap
是否生成源地图进行生产构建。
dev.port
指定要监听的服务器的端口。
dev.proxyTable
定义开发人员服务器的代理规则。 有关详细信息，请参阅 API Proxying During Development。
开发期间的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：使用Webpack捆绑咱们的测试的Karma插件。
.摩卡：咱们编写测试规范的测试框架。
.Chai：提供更好的断言语法的测试断言库。
.Sinon：提供间谍，存根和模拟的测试实用程序库。
Chai和Sinon是使用karma-sinon-chai进行集成的，因此全部Chai接口（应该是，指望，断言）和sinon均可以在测试文件中全球使用。
和文件：
index.js
这是由karma-webpack用于捆绑全部测试代码和源代码（为了覆盖目的））的条目文件。 你能够忽略它大部分。
specs/
该目录是您编写实际测试的地方。 您能够在测试中使用完整的ES2015 +和全部受支持的Webpack加载器。
karma.conf.js
这是Karma配置文件。 有关详细信息，请参阅Karma docs 。
在更多浏览器中运行测试
您能够在多个真正的浏览器中运行测试，方法是在test / unit / karma.conf.js中安装更多的业务发射器并调整浏览器字段。
模拟依赖
默认状况下，此样板安装了注入装载机。 有关* .vue组件的使用，请参阅vue-loader文档进行测试。
端到端测试：
此样板使用Nightwatch.js进行e2e测试。 Nightwatch.js是一个高度集成的e2e测试赛跑者，构建在硒上。 这个样板附带了Selenium服务器和Chromedriver二进制文件，为您预配置，因此你没必要搞砸本身。
咱们来看看test / e2e目录中的文件：
runner.js
启动开发服务器的Node.js脚本，而后启动Nightwatch以对其执行测试。 这是运行npm运行e2e时运行的脚本。
nightwatch.conf.js
夜视配置文件。 有关详细信息，请参阅Nightwatch的配置文档。
custom-assertions/
能够在夜视测试中使用的自定义断言。 有关详细信息，请参阅Nightwatch的文档编写自定义声明。
specs/
你的实际测试！ 有关详细信息，请参阅Nightwatch的文档测试和API参考。
在更多浏览器中运行测试
要配置哪些浏览器运行测试，请在test / e2e / nightwatch.conf.js中的“test_settings”下添加一个条目，以及test / e2e / runner.js中的--env标志。 若是您但愿在诸如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: [...] })
这篇文章就分享到这里了。欢迎关注下面的公众号，进一步技术交流：
