Skip to content

Commit f6c1efe

Browse files
webVueBlogwebVueBlog
committed
create
1 parent 6d49672 commit f6c1efe

15 files changed

+213
-2
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.vscode/extensions.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["johnsoncodehk.volar"]
3+
}

‎README.md

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,21 @@
1-
# vue3-vite2-ts4
2-
一套规范的vue3+vite2+ts4前端工程化项目环境
1+
# Vue 3 + Typescript + Vite
2+
3+
vue3-vite2-ts4
4+
5+
```js
6+
npm init @vitejs/app
7+
vue
8+
vue-ts
9+
npm install
10+
npm run dev
11+
```
12+
13+
14+
15+
16+
17+
18+
19+
20+
21+

‎deploy.sh

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
set -e
2+
3+
yarn build
4+
printf "打包成功\n"
5+
6+
cd dist
7+
8+
git init
9+
git checkout -b dist
10+
git add -A
11+
git commit -m 'deploy'
12+
printf "本地提交成功\n"
13+
# 覆盖式地将本地仓库发布至github，因为发布不需要保留历史记录
14+
# 格式为：git push -f git@github.com:'用户名'/'仓库名'.git master
15+
git push -f https://github.com/webVueBlog/vue3-vite2-ts4.git dist
16+
17+
printf "dist目录上传成功\n"

‎index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "vue3-vite2-ts4",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vue-tsc --noEmit && vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"vue": "^3.2.25"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-vue": "^2.2.0",
15+
"typescript": "^4.5.4",
16+
"vite": "^2.8.0",
17+
"vue-tsc": "^0.29.8"
18+
}
19+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎src/App.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup lang="ts">
2+
// This starter template is using Vue 3 <script setup> SFCs
3+
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
4+
import HelloWorld from './components/HelloWorld.vue'
5+
</script>
6+
7+
<template>
8+
<img alt="Vue logo" src="./assets/logo.png" />
9+
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
10+
</template>
11+
12+
<style>
13+
#app {
14+
font-family: Avenir, Helvetica, Arial, sans-serif;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
text-align: center;
18+
color: #2c3e50;
19+
margin-top: 60px;
20+
}
21+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/HelloWorld.vue

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
defineProps<{ msg: string }>()
5+
6+
const count = ref(0)
7+
</script>
8+
9+
<template>
10+
<h1>{{ msg }}</h1>
11+
12+
<p>
13+
Recommended IDE setup:
14+
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
15+
+
16+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
17+
</p>
18+
19+
<p>See <code>README.md</code> for more information.</p>
20+
21+
<p>
22+
<a href="https://vitejs.dev/guide/features.html" target="_blank">
23+
Vite Docs
24+
</a>
25+
|
26+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
27+
</p>
28+
29+
<button type="button" @click="count++">count is: {{ count }}</button>
30+
<p>
31+
Edit
32+
<code>components/HelloWorld.vue</code> to test hot module replacement.
33+
</p>
34+
</template>
35+
36+
<style scoped>
37+
a {
38+
color: #42b983;
39+
}
40+
41+
label {
42+
margin: 0 0.5em;
43+
font-weight: bold;
44+
}
45+
46+
code {
47+
background-color: #eee;
48+
padding: 2px 4px;
49+
border-radius: 4px;
50+
color: #304455;
51+
}
52+
</style>

‎src/env.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/// <reference types="vite/client" />
2+
3+
declare module '*.vue' {
4+
import type { DefineComponent } from 'vue'
5+
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6+
const component: DefineComponent<{}, {}, any>
7+
export default component
8+
}

‎src/main.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎tsconfig.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"useDefineForClassFields": true,
5+
"module": "esnext",
6+
"moduleResolution": "node",
7+
"strict": true,
8+
"jsx": "preserve",
9+
"sourceMap": true,
10+
"resolveJsonModule": true,
11+
"esModuleInterop": true,
12+
"lib": ["esnext", "dom"]
13+
},
14+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
15+
"references": [{ "path": "./tsconfig.node.json" }]
16+
}

‎tsconfig.node.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "esnext",
5+
"moduleResolution": "node"
6+
},
7+
"include": ["vite.config.ts"]
8+
}

‎vite.config.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()]
7+
})

0 commit comments

Comments
 (0)