vue单页面模板说明文档(1)
Introduction
This boilerplate is targeted towards large, serious projects and assumes you are somewhat familiar with Webpack and vue-loader
. Make sure to also read vue-loader
's documentation for common workflow recipes.
If you just want to try out vue-loader
or whip out a quick prototype, use the webpack-simple template instead.
Quickstart
To use this template, scaffold a project with vue-cli. It is recommended to use npm 3+ for a more efficient dependency tree.
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
Project Structure
.
├── build/ # webpack config files
│ └── ...
├── 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
│ │ ├── index.js # test build entry file
│ │ └── karma.conf.js # test runner config file
│ └── 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
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
build/
This directory holds the actual configurations for both the development server and the production webpack build. Normally you don't need to touch these files unless you want to customize Webpack loaders, in which case you should probably look at build/webpack.base.conf.js
.
config/index.js
This is the main configuration file that exposes some of the most common configuration options for the build setup. See API Proxying During Development and Integrating with Backend Framework for more details.
src/
This is where most of your application code will live in. How to structure everything inside this directory is largely up to you; if you are using Vuex, you can consult the recommendations for Vuex applications.
static/
This directory is an escape hatch for static assets that you do not want to process with Webpack. They will be directly copied into the same directory where webpack-built assets are generated.
See Handling Static Assets for more details.
test/unit
Contains unit test related files. See Unit Testing for more details.
test/e2e
Contains e2e test related files. See End-to-end Testing for more details.
index.html
This is the template index.html
for our single page application. During development and builds, Webpack will generate assets, and the URLs for those generated assets will be automatically injected into this template to render the final HTML.
package.json
The NPM package meta file that contains all the build dependencies and build commands.
Build Commands
All build commands are executed via NPM Scripts.
npm run dev
Starts a Node.js local development server. See API Proxying During Development for more details.
- Webpack +
vue-loader
for single file Vue components. - State preserving hot-reload
- State preserving compilation error overlay
- Lint-on-save with ESLint
- Source maps
npm run build
Build assets for production. See Integrating with Backend Framework for more details.
- JavaScript minified with UglifyJS.
- HTML minified with html-minifier.
- CSS across all components extracted into a single file and minified with cssnano.
- All static assets compiled with version hashes for efficient long-term caching, and a production
index.html
is auto-generated with proper URLs to these generated assets.
npm run unit
Run unit tests in PhantomJS with Karma. See Unit Testing for more details.
- Supports ES2015+ in test files.
- Supports all webpack loaders.
- Easy mock injection.
npm run e2e
Run end-to-end tests with Nightwatch. See End-to-end Testing for more details.
- Run tests in multiple browsers in parallel.
- Works with one command out of the box:
- Selenium and chromedriver dependencies automatically handled.
- Automatically spawns the Selenium server.
vue单页面模板说明文档(1)的更多相关文章
- vue单页面模板说明文档(3)
Environment Variables Sometimes it is practical to have different config values according to the env ...
- vue单页面模板说明文档(2)
Linter Configuration This boilerplate uses ESLint as the linter, and uses the Standard preset with s ...
- vue render {} 对象 说明文档
Vue学习笔记进阶篇——Render函数 http://www.mamicode.com/info-detail-1906336.html 深入data object参数 有一件事要注意:正如在模板语 ...
- Vue 单文件元件 — vTabs
简书原文 这是我做了第二个单文件元件 第一个在这里vCheckBox 这次这个叫vTabs,用于操作标签页 演示DEMO 演示DEMO2 - 子组件模式及别名 演示DEMO3 - 极简模式 示例: h ...
- webpack入坑之旅(五)加载vue单文件组件
这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...
- SWFUpload 2.5.0版 官方说明文档 中文翻译版
原文地址:http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#setFileUploadLimit SWFUpload v2 ...
- 《暗黑世界GM管理后台系统》部署+功能说明文档
http://www.9miao.com/product-10-1073.html <暗黑世界GM管理后台系统>部署+功能说明文档 <暗黑世界GM管理后台系统>部署+功能说明文 ...
- BasicExcel说明文档
BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
随机推荐
- python 协程、I/O模型
一.引子 (超哥协程) 并发本质:保存状态+切换 cpu正在运行一个任务,转而执行另一个任务的情概况:1.是该任务发生了阻塞:2.该任务计算的时间过长或有一个优先级更高的程序替代了它. 协程本质上就是 ...
- 基于vue-cli的vue项目移动端样式适配,lib-flexible和postcss-px2rem
安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save ...
- dp 洛谷P1977 出租车拼车 线性dp
题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...
- 【gdoi2018 day2】第二题 滑稽子图
题意: 给出一棵树.设\(E\)表示边集,\(V\)表示点集,\(S\)为\(V\)的一个子集. \(f(S)=|(u,v)|(u,v)\in E \ \&\&\ u\in V\ \& ...
- Linux三剑客-SED
1.Sed是什么 Sed:字符流编辑器,Stream Editor 2.Sed功能与版本 处理日志文件,日志,配置文件等 增加.删除.修改.查询 sed --version 可以通过man sed 来 ...
- php文件管理,能够点击依照时间,大小,名称排序
php文件管理.能够点击依照时间.大小,名称排序 本例没实用到jquery 演示 PHP Code <?php $rootdir="./"; $spacen ...
- 002_关于six版本过低报cannot import name urllib_parse的问题
一. 参考:https://github.com/Parsely/pykafka/issues/222 [root@jyall.com tmp]#python check.py #报错如下 Trace ...
- 18.JAVA经典编程题(50题及答案)
用oop做一个进销存系统:1.货物对象属性:编号(唯一),名称,单价,类别,厂家,厂家地址,厂家联系方式,库存,最后进货时间2.功能:登录,入库,出库,库存查询,操作记录查询3.功能描述:登录:管理员 ...
- Spring MVC Content Negotiation 转载
Spring MVC Content Negotiation 2017年11月15日 00:21:21 carl-zhao 阅读数:2983 Spring MVC有两种方式生成output的方法: ...
- Qt中使用Boost库
关于boost库的编译,请看https://www.cnblogs.com/HackerArt/p/10539516.html 网上可以查到很多介绍qt使用库文件的教程,但是大多都没有注意到,qt中支 ...