Skip to content

Commit e9c0ddc

Browse files
bluezhanbluezhan
committedJul 22, 2020
feat: first commit
0 parents  commit e9c0ddc

39 files changed

+13450
-0
lines changed
 

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎.eslintrc.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true,
5+
},
6+
extends: [
7+
"plugin:vue/vue3-essential",
8+
"eslint:recommended",
9+
"@vue/typescript/recommended",
10+
"@vue/prettier",
11+
"@vue/prettier/@typescript-eslint",
12+
],
13+
parserOptions: {
14+
ecmaVersion: 2020,
15+
},
16+
rules: {
17+
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
18+
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
19+
},
20+
};

‎.gitattrbutes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*.js lingist-language=vue
2+
*.html lingist-language=vue
3+
*.css lingist-language=vue

‎LICENSE

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Bruce Jenn vue3
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
22+

‎README.md

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
## 开始
2+
3+
```
4+
npm install
5+
npm run serve
6+
npm run build
7+
```
8+
9+
vue3.x 结合 typescript 初体验
10+
11+
### 一、Vue3.0 的设计目标
12+
13+
- 更小\更快 - Vue 3.0 大小大概减少一半，只有 10kB
14+
- 加强 TypeScript 支持
15+
- 加强 API 设计一致性 - 易读
16+
- 提高自身可维护性
17+
- 开放更多底层功能
18+
19+
vue3.x 采用 Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式，以函数组合的方式完成逻辑，天然与 typescript 结合。（vue2.x 中的组件是通过声明的方式传入一系列 options 的，所以在 2.x 下使用 typeScript 需要装饰器的方式`vue-class-component`才行）
20+
21+
22+
```
23+
// vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html
24+
<script lang="ts">
25+
import Vue from 'vue'
26+
import Component from 'vue-class-component'
27+
@Component
28+
export default class App extends Vue {}
29+
</script>
30+
```
31+
32+
### 二、typescript 有什么优点
33+
34+
#### 1、增加代码的可读性与可维护性
35+
36+
- 大部分函数看类型定义就知道是干嘛的
37+
- 静态类型检查，减少运行时错误
38+
39+
#### 2、社区活跃，大牛都在用
40+
41+
- **在 vue3 热潮下，之后 typescript 要成为主流，快学**
42+
43+
### 三、搭建 vue3.x + typescript + vue-router 环境
44+
45+
#### 1、全局安装 vue-cli
46+
47+
```
48+
npm install -g @vue/cli
49+
```
50+
51+
#### 2、初始化 vue 项目
52+
53+
```
54+
vue create vue-next-project
55+
```
56+
57+
这里在输入命令后，需要选择`Manually select features`, 至少要把 `babel` `typescript` `router` 选上，（`vuex` 看自身情况是否需要）。如下图:
58+
59+
![](https://user-gold-cdn.xitu.io/2020/5/22/1723b9c80913e36d?w=566&h=237&f=png&s=9590)
60+
61+
不清楚 vue-cli 的可参考[文章](https://juejin.im/post/5e69de93f265da570c75453e)
62+
63+
#### 3、升级为 vue3.x 项目
64+
65+
```
66+
cd vue-next-project
67+
vue add vue-next
68+
```
69+
70+
这个命令会自动帮你把 vue2.x 升级到 vue3.x ，包括项目中对应的依赖进行升级与模板代码替换，像：`vue-router` `vuex`
71+
72+
完成以上三步主体环境算搭建完成，看刚才创建的目录里多了个 tsconfig.json 配置文件，可以根据自身与项目需要，进行配置。
73+
74+
接下来需要简单处理一下，使其支持 typescript 形式。（模板 cli 还没完善 typescript 的模板代码）
75+
76+
![](https://user-gold-cdn.xitu.io/2020/5/22/1723bb003f8fc297?w=965&h=520&f=png&s=30033)
77+
78+
- 将`shims-vue.d.ts`文件中的内容修改一下，这步操作应该会少了一些报错。
79+
80+
```
81+
// declare module "*.vue" {
82+
// import Vue from 'vue';
83+
// export default Vue;
84+
// }
85+
declare module "*.vue" {
86+
import {defineComponent} from 'vue'
87+
const Component: ReturnType<typeof defineComponent>;
88+
export default Component
89+
}
90+
```
91+
92+
- 组件里使用需声明 `script lang="ts"` ,然后用`defineComponent`进行包裹,即可。
93+
94+
```
95+
<script lang="ts">
96+
import {
97+
defineComponent,
98+
ref,
99+
onMounted,
100+
onUpdated,
101+
onUnmounted,
102+
} from "vue";
103+
104+
export default defineComponent({
105+
name: "hello world",
106+
props: {},
107+
setup(props: any) {
108+
const count = ref(0);
109+
const increase = (): void => {
110+
count.value++;
111+
};
112+
function test(x: number): string {
113+
return props.toString();
114+
}
115+
test(1);
116+
// test('number');
117+
// 生命周期
118+
onMounted(() => {
119+
console.log("mounted vue3 typescript");
120+
});
121+
onUpdated(() => {
122+
console.log("updated vue3 typescript");
123+
});
124+
onUnmounted(() => {
125+
console.log("onUnmounted vue3 typescript");
126+
});
127+
// 暴露给模板
128+
return {
129+
count,
130+
increase
131+
};
132+
},
133+
});
134+
135+
</script>
136+
```
137+
138+
生命周期对应
139+
![](https://user-gold-cdn.xitu.io/2020/5/22/1723bc18105dcd9f?w=488&h=319&f=png&s=15352)
140+
141+
### 四、附上学习 vue-next 与 typescript 的官方秘籍
142+
143+
- [composition-api](https://composition-api.vuejs.org/zh/api.html#setup)
144+
- [typescript](https://www.tslang.cn/)
145+
- [typescript 教程](https://ts.xcatliu.com/introduction/what-is-typescript)
146+
147+
### 五、不想搭建你也可以直接拉去 github demo
148+
149+
[vue3+typescript 环境](https://github.com/vue3/vue3-router4-typescript)

‎babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ["@vue/cli-plugin-babel/preset"],
3+
};

‎package-lock.json

+12,620
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "vue3-awesome-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"serve": "vue-cli-service serve",
7+
"build": "vue-cli-service build",
8+
"lint": "vue-cli-service lint"
9+
},
10+
"dependencies": {
11+
"@types/lodash": "^4.14.157",
12+
"core-js": "^3.6.5",
13+
"dayjs": "^1.8.29",
14+
"lodash": "^4.17.19",
15+
"register-service-worker": "^1.7.1",
16+
"vue": "^3.0.0-rc.4",
17+
"vue-class-component": "^7.2.3",
18+
"vue-property-decorator": "^9.0.0",
19+
"vue-router": "^4.0.0-beta.3",
20+
"vuex": "^4.0.0-beta.4"
21+
},
22+
"devDependencies": {
23+
"@typescript-eslint/eslint-plugin": "^3.6.1",
24+
"@typescript-eslint/parser": "^3.6.1",
25+
"@vue/cli-plugin-babel": "~4.4.6",
26+
"@vue/cli-plugin-eslint": "~4.4.6",
27+
"@vue/cli-plugin-pwa": "~4.4.6",
28+
"@vue/cli-plugin-router": "~4.4.6",
29+
"@vue/cli-plugin-typescript": "~4.4.6",
30+
"@vue/cli-plugin-vuex": "~4.4.6",
31+
"@vue/cli-service": "~4.4.6",
32+
"@vue/compiler-sfc": "^3.0.0-rc.4",
33+
"@vue/eslint-config-prettier": "^6.0.0",
34+
"@vue/eslint-config-typescript": "^5.0.2",
35+
"eslint": "^7.4.0",
36+
"eslint-plugin-prettier": "^3.1.4",
37+
"eslint-plugin-vue": "^7.0.0-beta.0",
38+
"prettier": "^2.0.5",
39+
"sass": "^1.26.10",
40+
"sass-loader": "^9.0.2",
41+
"typescript": "~3.9.7",
42+
"vue-cli-plugin-vue-next": "~0.1.3"
43+
}
44+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎public/img/icons/android-chrome-192x192.png

9.2 KB
Loading

‎public/img/icons/android-chrome-512x512.png

29.1 KB
Loading

‎public/img/icons/android-chrome-maskable-192x192.png

6.25 KB
Loading

‎public/img/icons/android-chrome-maskable-512x512.png

22.5 KB
Loading

‎public/img/icons/apple-touch-icon-120x120.png

3.29 KB
Loading

‎public/img/icons/apple-touch-icon-152x152.png

3.95 KB
Loading

‎public/img/icons/apple-touch-icon-180x180.png

4.57 KB
Loading

‎public/img/icons/apple-touch-icon-60x60.png

1.46 KB
Loading

‎public/img/icons/apple-touch-icon-76x76.png

1.78 KB
Loading

‎public/img/icons/apple-touch-icon.png

4.57 KB
Loading

‎public/img/icons/favicon-16x16.png

799 Bytes
Loading

‎public/img/icons/favicon-32x32.png

1.24 KB
Loading

‎public/img/icons/msapplication-icon-144x144.png

1.14 KB
Loading

‎public/img/icons/mstile-150x150.png

4.18 KB
Loading

‎public/img/icons/safari-pinned-tab.svg

+3
Loading

‎public/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎public/robots.txt

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
User-agent: *
2+
Disallow:

‎src/App.vue

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<div class="view">
3+
<div id="nav">
4+
<div>
5+
<b>🚀 [vue3, vuex, router, ts]</b>
6+
</div>
7+
<div>
8+
<router-link to="/">(🍉 ) => Home</router-link>
9+
</div>
10+
<div>
11+
<router-link to="/about">(🌽 ) => About</router-link>
12+
</div>
13+
</div>
14+
<div id="content">
15+
<router-view />
16+
</div>
17+
</div>
18+
</template>
19+
20+
<style lang="scss">
21+
*,
22+
:after,
23+
:before {
24+
box-sizing: border-box;
25+
}
26+
body {
27+
margin: 0;
28+
background-color: #040609;
29+
color: #92abcf;
30+
}
31+
.view {
32+
position: relative;
33+
min-height: 100vh;
34+
font-family: Avenir, Helvetica, Arial, sans-serif;
35+
// font-family: Helvetica, Arial, sans-serif;
36+
-webkit-font-smoothing: antialiased;
37+
-moz-osx-font-smoothing: grayscale;
38+
display: flex;
39+
// color: #2c3e50;
40+
}
41+
#nav {
42+
position: fixed;
43+
top: 0;
44+
left: 0;
45+
bottom: 0;
46+
background-color: #1d2636;
47+
padding: 24px 12px 12px;
48+
flex: 0 0 auto;
49+
height: 100vh;
50+
z-index: 99;
51+
div {
52+
display: flex;
53+
height: 46px;
54+
line-height: 46px;
55+
color: #92abcf;
56+
}
57+
a {
58+
width: 100%;
59+
font-weight: bold;
60+
color: #92abcf;
61+
text-decoration: none;
62+
cursor: pointer;
63+
padding-left: 30px;
64+
&:hover {
65+
color: #11ece5;
66+
}
67+
&.router-link-exact-active {
68+
color: #11ece5;
69+
background-color: #2d405d;
70+
}
71+
}
72+
}
73+
#content {
74+
position: relative;
75+
min-height: 100vh;
76+
padding: 20px;
77+
width: 100%;
78+
padding-left: 230px;
79+
}
80+
81+
ol,
82+
ul {
83+
list-style: none;
84+
}
85+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/GithubCorner.vue

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<div class="about">
3+
<a
4+
href="https://github.com/vue3/vue3-News"
5+
class="github-corner"
6+
aria-label="View source on GitHub"
7+
>
8+
<svg
9+
width="80"
10+
height="80"
11+
viewBox="0 0 250 250"
12+
style="
13+
fill: #64ceaa;
14+
color: #fff;
15+
position: absolute;
16+
top: 0;
17+
border: 0;
18+
right: 0;
19+
"
20+
aria-hidden="true"
21+
>
22+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
23+
<path
24+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
25+
fill="currentColor"
26+
style="transform-origin: 130px 106px;"
27+
class="octo-arm"
28+
/>
29+
<path
30+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
31+
fill="currentColor"
32+
class="octo-body"
33+
/>
34+
</svg>
35+
</a>
36+
</div>
37+
</template>
38+
39+
<style lang="scss">
40+
.github-corner:hover .octo-arm {
41+
animation: octocat-wave 560ms ease-in-out;
42+
}
43+
@keyframes octocat-wave {
44+
0%,
45+
100% {
46+
transform: rotate(0);
47+
}
48+
20%,
49+
60% {
50+
transform: rotate(-25deg);
51+
}
52+
40%,
53+
80% {
54+
transform: rotate(10deg);
55+
}
56+
}
57+
@media (max-width: 500px) {
58+
.github-corner:hover .octo-arm {
59+
animation: none;
60+
}
61+
.github-corner .octo-arm {
62+
animation: octocat-wave 560ms ease-in-out;
63+
}
64+
}
65+
</style>

‎src/components/HelloWorld.vue

+218
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
<template>
2+
<div class="hello">
3+
<img alt="Vue logo" src="../assets/logo.png" />
4+
<div class="ot-letter-top">
5+
<span data-letter="3">3</span>
6+
</div>
7+
<h1>{{ msg }}</h1>
8+
<p>
9+
For a guide and recipes on how to configure / customize this project,
10+
<br />check out the
11+
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
12+
>vue-cli documentation</a
13+
>
14+
</p>
15+
<h3>Installed CLI Plugins</h3>
16+
<ul>
17+
<li>
18+
<a
19+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
20+
target="_blank"
21+
rel="noopener"
22+
>babel</a
23+
>
24+
</li>
25+
<li>
26+
<a
27+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
28+
target="_blank"
29+
rel="noopener"
30+
>typescript</a
31+
>
32+
</li>
33+
<li>
34+
<a
35+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
36+
target="_blank"
37+
rel="noopener"
38+
>pwa</a
39+
>
40+
</li>
41+
<li>
42+
<a
43+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
44+
target="_blank"
45+
rel="noopener"
46+
>router</a
47+
>
48+
</li>
49+
<li>
50+
<a
51+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
52+
target="_blank"
53+
rel="noopener"
54+
>vuex</a
55+
>
56+
</li>
57+
<li>
58+
<a
59+
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
60+
target="_blank"
61+
rel="noopener"
62+
>eslint</a
63+
>
64+
</li>
65+
</ul>
66+
<h3>Essential Links</h3>
67+
<ul>
68+
<li>
69+
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
70+
</li>
71+
<li>
72+
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
73+
>Forum</a
74+
>
75+
</li>
76+
<li>
77+
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
78+
>Community Chat</a
79+
>
80+
</li>
81+
<li>
82+
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
83+
>Twitter</a
84+
>
85+
</li>
86+
<li>
87+
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
88+
</li>
89+
</ul>
90+
<h3>Ecosystem</h3>
91+
<ul>
92+
<li>
93+
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
94+
>vue-router</a
95+
>
96+
</li>
97+
<li>
98+
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
99+
</li>
100+
<li>
101+
<a
102+
href="https://github.com/vuejs/vue-devtools#vue-devtools"
103+
target="_blank"
104+
rel="noopener"
105+
>vue-devtools</a
106+
>
107+
</li>
108+
<li>
109+
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
110+
>vue-loader</a
111+
>
112+
</li>
113+
<li>
114+
<a
115+
href="https://github.com/vuejs/awesome-vue"
116+
target="_blank"
117+
rel="noopener"
118+
>awesome-vue</a
119+
>
120+
</li>
121+
</ul>
122+
</div>
123+
</template>
124+
125+
<script lang="ts">
126+
import {
127+
defineComponent,
128+
ref,
129+
reactive,
130+
onMounted,
131+
onUpdated,
132+
onUnmounted,
133+
} from "vue";
134+
135+
export default defineComponent({
136+
name: "hello world",
137+
props: {
138+
msg: String,
139+
},
140+
setup(props) {
141+
// interface Data {
142+
// count: number;
143+
// object: object;
144+
// }
145+
const count = ref(0);
146+
const object = reactive({ foo: "bar" });
147+
const increase = (): void => {
148+
count.value++;
149+
};
150+
const list: any = [
151+
{
152+
name: "foo",
153+
},
154+
{
155+
name: "bar",
156+
},
157+
{
158+
name: "coo",
159+
},
160+
];
161+
function test(x: number): string {
162+
console.log(x);
163+
return props.toString();
164+
}
165+
test(1);
166+
// test('number');
167+
// 生命周期
168+
onMounted(() => {
169+
console.log("mounted vue3 typescript");
170+
});
171+
onUpdated(() => {
172+
console.log("updated vue3 typescript");
173+
});
174+
onUnmounted(() => {
175+
console.log("onUnmounted vue3 typescript");
176+
});
177+
// 暴露给模板
178+
return {
179+
count,
180+
increase,
181+
object,
182+
list,
183+
};
184+
// return () => h('div', [count.value, object.foo])
185+
},
186+
});
187+
</script>
188+
189+
<!-- Add "scoped" attribute to limit CSS to this component only -->
190+
<style scoped lang="scss">
191+
.hello {
192+
text-align: center;
193+
margin: 60px 0;
194+
}
195+
.ot-letter-top {
196+
margin-top: -10em;
197+
span {
198+
font-size: 6em;
199+
font-weight: bold;
200+
text-shadow: 0 0 1px #999, 1px 1px 2px #888, 2px 2px 2px #777,
201+
3px 3px 2px #666, 4px 4px 2px #555, 5px 5px 2px #333;
202+
}
203+
}
204+
h3 {
205+
margin: 40px 0 0;
206+
}
207+
ul {
208+
list-style-type: none;
209+
padding: 0;
210+
}
211+
li {
212+
display: inline-block;
213+
margin: 0 10px;
214+
}
215+
a {
216+
color: #42b983;
217+
}
218+
</style>

‎src/main.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from "vue";
2+
import App from "./App.vue";
3+
import "./registerServiceWorker";
4+
import router from "./router";
5+
import { store } from "./store";
6+
7+
createApp(App).use(router).use(store).mount("#app");

‎src/registerServiceWorker.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* eslint-disable no-console */
2+
3+
import { register } from "register-service-worker";
4+
5+
if (process.env.NODE_ENV === "production") {
6+
register(`${process.env.BASE_URL}service-worker.js`, {
7+
ready() {
8+
console.log(
9+
"App is being served from cache by a service worker.\n" +
10+
"For more details, visit https://goo.gl/AFskqB"
11+
);
12+
},
13+
registered() {
14+
console.log("Service worker has been registered.");
15+
},
16+
cached() {
17+
console.log("Content has been cached for offline use.");
18+
},
19+
updatefound() {
20+
console.log("New content is downloading.");
21+
},
22+
updated() {
23+
console.log("New content is available; please refresh.");
24+
},
25+
offline() {
26+
console.log(
27+
"No internet connection found. App is running in offline mode."
28+
);
29+
},
30+
error(error) {
31+
console.error("Error during service worker registration:", error);
32+
},
33+
});
34+
}

‎src/router/index.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createRouter, createWebHashHistory } from "vue-router";
2+
import Home from "../views/Home.vue";
3+
4+
const routes: Array<any> = [
5+
{
6+
path: "/",
7+
name: "Home",
8+
component: Home,
9+
},
10+
{
11+
path: "/about",
12+
name: "About",
13+
// route level code-splitting
14+
// this generates a separate chunk (about.[hash].js) for this route
15+
// which is lazy-loaded when the route is visited.
16+
component: () =>
17+
import(/* webpackChunkName: "about" */ "../views/About.vue"),
18+
},
19+
];
20+
21+
const router = createRouter({
22+
history: createWebHashHistory(process.env.BASE_URL),
23+
routes,
24+
});
25+
26+
export default router;

‎src/shims-vue.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// declare module "*.vue" {
2+
// import Vue from "vue";
3+
// export default Vue;
4+
// }
5+
declare module "*.vue" {
6+
import { defineComponent } from "vue";
7+
const Component: ReturnType<typeof defineComponent>;
8+
export default Component;
9+
}

‎src/store/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { createStore } from "vuex";
2+
3+
export const store = createStore({
4+
state: {},
5+
mutations: {},
6+
actions: {},
7+
modules: {},
8+
});

‎src/views/About.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div class="about">
3+
<GithubCorner />
4+
<h1>This is an about page.</h1>
5+
<p>如果喜欢(≧∇≦)ﾉ，麻烦给个Star！</p>
6+
<p>Thanks♪(･ω･)ﾉ</p>
7+
</div>
8+
</template>
9+
10+
<script>
11+
// @ is an alias to /src
12+
import GithubCorner from "@/components/GithubCorner.vue";
13+
14+
export default {
15+
name: "About",
16+
components: {
17+
GithubCorner,
18+
},
19+
};
20+
</script>
21+
22+
<style lang="scss">
23+
.github-corner:hover .octo-arm {
24+
animation: octocat-wave 560ms ease-in-out;
25+
}
26+
@keyframes octocat-wave {
27+
0%,
28+
100% {
29+
transform: rotate(0);
30+
}
31+
20%,
32+
60% {
33+
transform: rotate(-25deg);
34+
}
35+
40%,
36+
80% {
37+
transform: rotate(10deg);
38+
}
39+
}
40+
@media (max-width: 500px) {
41+
.github-corner:hover .octo-arm {
42+
animation: none;
43+
}
44+
.github-corner .octo-arm {
45+
animation: octocat-wave 560ms ease-in-out;
46+
}
47+
}
48+
</style>

‎src/views/Home.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div class="home">
3+
<GithubCorner />
4+
<HelloWorld msg="Welcome to Your Vue-next.js App" />
5+
</div>
6+
</template>
7+
8+
<script>
9+
// @ is an alias to /src
10+
import HelloWorld from "@/components/HelloWorld.vue";
11+
import GithubCorner from "@/components/GithubCorner.vue";
12+
13+
export default {
14+
name: "Home",
15+
components: {
16+
HelloWorld,
17+
GithubCorner,
18+
},
19+
};
20+
</script>

‎tsconfig.json

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"strict": true,
6+
"jsx": "preserve",
7+
"importHelpers": true,
8+
"moduleResolution": "node",
9+
"experimentalDecorators": true,
10+
"esModuleInterop": true,
11+
"allowSyntheticDefaultImports": true,
12+
"strictNullChecks": true,
13+
"sourceMap": true,
14+
"baseUrl": ".",
15+
"types": [
16+
"webpack-env"
17+
],
18+
"paths": {
19+
"@/*": [
20+
"src/*"
21+
]
22+
},
23+
"lib": [
24+
"esnext",
25+
"dom",
26+
"dom.iterable",
27+
"scripthost"
28+
]
29+
},
30+
"include": [
31+
"src/**/*.ts",
32+
"src/**/*.tsx",
33+
"src/**/*.vue",
34+
"tests/**/*.ts",
35+
"tests/**/*.tsx"
36+
],
37+
"exclude": [
38+
"node_modules"
39+
]
40+
}

‎vue.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
// publicPath: "",
3+
// outputDir: ""
4+
};

0 commit comments

Comments
 (0)
Please sign in to comment.