Skip to content

Commit 40e4771

Browse files
devCrossNetdevCrossNet
committed
initial commit
0 parents  commit 40e4771

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+16001
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
logs
2+
*.log
3+
node_modules/
4+
.idea
5+
dist

‎.vuepress/config.js

+210
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
base: '/docs/',
5+
dest: path.join(path.resolve(__dirname), '../dist'),
6+
locales: {
7+
'/en/': {
8+
lang: 'en',
9+
title: 'vuesion',
10+
description:
11+
'The most complete boilerplate for production-ready PWAs. With focus on performance, development speed, and best practices',
12+
},
13+
'/zh-cn/': {
14+
lang: 'zh-CN',
15+
title: 'vuesion',
16+
description:
17+
'一个灵活的、可扩展的、自定的，已经准备好用于生产的渐进式网络应用样板，聚焦于性能、开发速度和最佳实践',
18+
},
19+
},
20+
head: [
21+
[
22+
'link',
23+
{
24+
rel: 'icon',
25+
href: `/logo.png`,
26+
},
27+
],
28+
[
29+
'link',
30+
{
31+
rel: 'manifest',
32+
href: '/manifest.json',
33+
},
34+
],
35+
[
36+
'meta',
37+
{
38+
name: 'theme-color',
39+
content: '#f43b6c',
40+
},
41+
],
42+
[
43+
'meta',
44+
{
45+
name: 'apple-mobile-web-app-capable',
46+
content: 'yes',
47+
},
48+
],
49+
[
50+
'meta',
51+
{
52+
name: 'apple-mobile-web-app-status-bar-style',
53+
content: 'black',
54+
},
55+
],
56+
[
57+
'link',
58+
{
59+
rel: 'apple-touch-icon',
60+
href: `/icons/apple-touch-icon-152x152.png`,
61+
},
62+
],
63+
[
64+
'link',
65+
{
66+
rel: 'mask-icon',
67+
href: '/icons/safari-pinned-tab.svg',
68+
color: '#f43b6c',
69+
},
70+
],
71+
[
72+
'meta',
73+
{
74+
name: 'msapplication-TileImage',
75+
content: '/icons/msapplication-icon-144x144.png',
76+
},
77+
],
78+
[
79+
'meta',
80+
{
81+
name: 'msapplication-TileColor',
82+
content: '#f43b6c',
83+
},
84+
],
85+
],
86+
serviceWorker: true,
87+
themeConfig: {
88+
repo: 'vuesion/docs',
89+
editLinks: true,
90+
locales: {
91+
'/en/': {
92+
label: 'English',
93+
selectText: '中文',
94+
editLinkText: 'Edit this page on GitHub',
95+
nav: [
96+
{
97+
text: 'FAQ',
98+
link: '/en/FAQ',
99+
},
100+
{
101+
text: 'Guide',
102+
link: '/en/introduction',
103+
},
104+
{
105+
text: 'Interactive Demo',
106+
link: 'https://vuesion.herokuapp.com/',
107+
},
108+
{
109+
text: 'Components',
110+
link: 'https://vuesion.herokuapp.com/storybook',
111+
},
112+
{
113+
text: 'Discord',
114+
link: 'https://discord.gg/59x5cg2',
115+
},
116+
{
117+
text: 'Slack',
118+
link: 'https://slack-vuesion.herokuapp.com/',
119+
},
120+
],
121+
sidebar: {
122+
'/en/': [
123+
{
124+
title: 'Getting started',
125+
collapsable: false,
126+
children: [
127+
'FAQ',
128+
'guide/install',
129+
'guide/run',
130+
'guide/test',
131+
'guide/clean-up',
132+
'guide/i18n',
133+
'guide/cli',
134+
'guide/vuex',
135+
'guide/build',
136+
'guide/config',
137+
'guide/contribute',
138+
'guide/update',
139+
'guide/deployment',
140+
],
141+
},
142+
{
143+
title: 'Tutorials',
144+
collapsable: false,
145+
children: ['tutorials/redirects', 'tutorials/prefetch-and-state-transfer', 'tutorials/third-party'],
146+
},
147+
{
148+
title: 'Docs',
149+
collapsable: false,
150+
children: ['docs/style-guide', 'docs/pwa', 'docs/npm-scripts'],
151+
},
152+
],
153+
},
154+
},
155+
'/zh-cn/': {
156+
label: '简体中文',
157+
selectText: 'English',
158+
editLinkText: '在GitHub上编辑这页',
159+
nav: [
160+
{
161+
text: '指南',
162+
link: '/zh-cn/introduction',
163+
},
164+
{
165+
text: '交互演示',
166+
link: 'https://vuesion.herokuapp.com/',
167+
},
168+
{
169+
text: '组件',
170+
link: 'https://vuesion.herokuapp.com/storybook',
171+
},
172+
{
173+
text: 'Discord',
174+
link: 'https://discord.gg/59x5cg2',
175+
},
176+
{
177+
text: '交流',
178+
link: 'https://slack-vuesion.herokuapp.com/',
179+
},
180+
],
181+
sidebar: {
182+
'/zh-cn/': [
183+
{
184+
title: '开始',
185+
collapsable: false,
186+
children: [
187+
'guide/install',
188+
'guide/run',
189+
'guide/test',
190+
'guide/clean-up',
191+
'guide/i18n',
192+
'guide/cli',
193+
'guide/vuex',
194+
'guide/build',
195+
'guide/config',
196+
'guide/contribute',
197+
'guide/update',
198+
],
199+
},
200+
{
201+
title: '文档',
202+
collapsable: false,
203+
children: ['docs/style-guide', 'docs/npm-scripts', 'docs/i18n', 'docs/storybook', 'docs/redirects'],
204+
},
205+
],
206+
},
207+
},
208+
},
209+
},
210+
};

‎.vuepress/override.styl

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
$accentColor = #f43b6c
2+
$textColor = #010b0a
3+
$borderColor = #d9dada
4+
$codeBgColor = #010b0a
5+
$arrowBgColor = #f43b6c

‎.vuepress/public/analyzer.png

958 KB
Loading

‎.vuepress/public/architecture.jpg

30.1 KB
Loading

‎.vuepress/public/logo.png

72.7 KB
Loading

‎.vuepress/style.styl

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@import url('https://rsms.me/inter/inter.css');
2+
3+
html {
4+
font-family: 'Inter', sans-serif;
5+
font-weight: 200;
6+
}
7+
8+
h1, h2, h3, h4, h5, h6 {
9+
font-weight: 400;
10+
}
11+
12+
.home .hero h1, .home .hero .description {
13+
text-shadow: 0 0 5px rgba(15, 15, 15, 0.4);
14+
}
15+
16+
.home .hero h1 {
17+
font-weight: 200;
18+
}
19+
20+
.home .hero .description, .home .feature p, .home .footer {
21+
color: #010b0a;
22+
}
23+
.custom-block.tip {
24+
border-color: #00B84A;
25+
}
26+
.custom-block.warning {
27+
border-color: #FFAA00;
28+
}
29+
.custom-block.warning .custom-block-title {
30+
color: #FFAA00;
31+
}
32+
.page-edit .edit-link a {
33+
color: #f43b6c;
34+
}
35+
.content code {
36+
color: #010b0a;
37+
}

‎en/FAQ.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# FAQ
2+
3+
## Why not vue-cli or nuxt.js ?
4+
5+
This boilerplate is opinionated, aiming to educate and empower users to essentially configure their own framework,
6+
ideally suited to their needs. It also includes as few libraries as possible to keep you flexible and to enable you
7+
to implement every product requirement that comes down the road.
8+
9+
Use cases for this boilerplate:
10+
11+
- The requirements for the product might change and you want to maintain maximum flexibility and control.
12+
- You'd like to focus on developing skills that will transfer across any Vue project.
13+
- You're working in a large team, so you need tooling to help everyone avoid common mistakes,
14+
write in a consistent style, and avoid bikeshedding in PRs.
15+
16+
## Why are my properties not reactive?
17+
18+
In Vuex and on your component instance, properties must be defined in the initial state otherwise, they will not be
19+
observed for changes.
20+
21+
[Please read the rules of reactivity.](https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules)
22+
23+
## I don't need to build my own design-system, can I use vuesion with a 3rd party UI framework?
24+
25+
Yes, you can! [See this tutorial.](tutorials/third-party.md)
26+
27+
## I don't need server-side-rendering, can I use vuesion to build a single-page-application?
28+
29+
Yes, [here is the tutorial!](guide/deployment.md#static-single-page-application)
30+
31+
**The following features are not available in the single-page-application build:**
32+
33+
- App Config
34+
- Runtime Config

‎en/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
home: true
3+
heroImage: /logo.png
4+
actionText: Get Started →
5+
actionLink: /en/introduction
6+
features:
7+
- title: Quick scaffolding
8+
details: Create components, connected components, modules - and their tests - right from the CLI
9+
- title: Instant feedback
10+
details: Enjoy the best DX and code your app at the speed of thought! With HMR for client and server
11+
- title: Enterprise ready
12+
details: Common style guide, TypeScript and the best test setup guarantee code quality and non-breaking changes
13+
- title: SEO
14+
details: SEO (document head tags management) and server-side-rendering for search engines
15+
- title: Industry-standard i18n support
16+
details: Scalable apps need to support multiple languages, easily add and support multiple languages
17+
- title: Progressive-Web-App
18+
details: Offline-first support with service-workers and a lighthouse score as high as possible
19+
- title: Customizable Design System
20+
details: Includes a blueprint for a 100% customizable Design System with a huge amount of components
21+
- title: Routing with data prefetching
22+
details: Server-side-rendering of prefetched data and state-transfer from server to client
23+
- title: Storybook
24+
details: Allows interactive development, testing and sharing of UI components in various property states
25+
- title: Predictable state management
26+
details: Centralised state management with VueX.
27+
- title: Tons of already implemented use-cases
28+
details: e.g. HttpService with interceptors, vuex persist middleware, redirect scenarios, configs for different environments, etc.
29+
- title: Documentation
30+
details: Carefully written docs to on board new team members as quickly as possible
31+
footer: MIT Licensed | Copyright © 2018 - present Johannes Werner
32+
---

‎en/docs/npm-scripts.md

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# NPM Scripts
2+
3+
| Script | Description |
4+
| --------------------- | ----------------------------------------------------------------- |
5+
| dev | Run application in development mode and server component |
6+
| generate | Add new component, connected components or modules to the project |
7+
| add | Add official vuesion packages to the project |
8+
| extract-i18n-messages | Extract default i18n message from source code |
9+
| test | Run unit tests with jest |
10+
| e2e | Run e2e tests with cypress.io |
11+
| lint | Lint project files |
12+
| clean | Clean up project files |
13+
| storybook:dev | Run Storybook in development mode |
14+
| storybook:build | Generate static files from Storybook |
15+
| update | Update the project to the latest vuesion version |
16+
| prettier | Format project files with prettier |
17+
| release:major | Release a new major version of the project |
18+
| release:minor | Release a new minor version of the project |
19+
| release:patch | Release a new patch version of the project |
20+
| build | Build the project for production with server component |
21+
| build:analyze | Analyze the client bundle |
22+
| build:spa | Build the project for production without server component |
23+
| start | Run the compile server component in production mode |
24+
| ci | Script for integrating with the CI/CD service |

‎en/docs/pwa.md

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Progressive-Web-App
2+
3+
Vuesion comes with an integrated service-worker which makes it a so called `progressive-web-app`.
4+
It enables the users of your app to install it on their home-screen and use the app offline.
5+
6+
By default vuesion caches all assets, webpack chunks and the HTML of the index (`/`) route.
7+
8+
If you want to change the default behavior have a look in the file `./src/client/sw.ts`.
9+
10+
```js
11+
...
12+
13+
let assetsToCache = [...assets.map((path: string) => '/client' + path), '../', '../manifest.json'];
14+
15+
...
16+
```
17+
18+
The service-worker implementation is based on the [serviceworker-webpack-plugin](https://github.com/oliviertassinari/serviceworker-webpack-plugin).
19+
20+
We have chosen this plugin over the [Offline-Plugin](https://github.com/NekR/offline-plugin) because it gives much more
21+
freedom to the developer how the service-worker should behave for the specific app.
22+
23+
::: tip Further read
24+
If you have issues with the service-worker and how the cache works - have a look at this [gist](https://gist.github.com/Rich-Harris/fd6c3c73e6e707e312d7c5d7d0f3b2f9).
25+
26+
It explains pretty well the pitfalls with service-workers in development mode and the cache invalidation.
27+
:::

0 commit comments

Comments
 (0)