(1) Java后端从0硬撸vite3+vue3+ts项目 | 起步

工具及环境说明

• vscode
• node: ^14.18.0 || >=16.0.0 (建议使用nvm管理node环境, 附下载地址nvm, nvm-windows)
• pnpm: 7.x

项目初始化

mkdir venbale-admin # 名字随便起
cd venable-admin
pnpm init
code .
1
2
3
4

安装vite3+vue3+ts

• vite3文档：https://cn.vitejs.dev/
• vue3文档：https://cn.vuejs.org/

安装依赖

pnpm add -D vite @vitejs/plugin-vue typescript @types/node vue vue-tsc
1

修改package.json中的scripts

{
  "scripts": {
-     "test": "echo \"Error: no test specified\" && exit 1"
+     "dev": "vite",
+     "build": "vue-tsc --noEmit && vite build",
+     "preview": "vite preview"
  },
}
1
2
3
4
5
6
7
8

在项目根目录创建src目录，在src中新增env.d.ts文件，内容如下：

/// 

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}
1
2
3
4
5
6
7

在src目录下新增App.vue文件，内容如下：

1
2
3
4
5

在src目录下新增main.ts文件，内容如下：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

1
2
3
4
5
6

在项目根目录创建tsconfig.json文件，内容如下：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "composite": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "vite.config.ts"
  ],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在项目根目录创建vite.config.ts文件

import path from 'path' 
import { defineConfig } from 'vite' 
import vue from '@vitejs/plugin-vue' 
export default defineConfig({ 
  plugins: [vue()], 
  resolve: { 
    alias: { 
      '@': resolve(__dirname, 'src') 
    } 
  } 
})
1
2
3
4
5
6
7
8
9
10
11

运行项目

pnpm run dev
1

浏览器打开 http://localhost:5173 ,不出意外浏览器就会显示Vite + vue3 + TypeScript了

源码地址

本系列文章代码地址：https://github.com/xbmlz/venable-admin.git

工具推荐

推荐一个超级好用的node小工具, https://github.com/antfu/ni

引用作者的一句话 npm i* in a yarn project, again? F**k!*

安装

npm i -g @antfu/ni
1

ni

无论你的项目是用npm还是yarn还是pnpm,安装这个插件后只需要 ni即可，插件就会自动检测

ni
# npm install
# yarn install
# pnpm install
# bun install
1
2
3
4
5

ni vite
# npm i vite
# yarn add vite
# pnpm add vite
# bun add vite
1
2
3
4
5

nr

项目里scripts太多记不住? 你只需要执行 nr 即可

其他还有很多有用的目录，大家自己看文档吧 https://github.com/antfu/ni/blob/main/README.md