工具及环境说明
- 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 .
安装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
修改package.json
中的scripts
{
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "dev": "vite",
+ "build": "vue-tsc --noEmit && vite build",
+ "preview": "vite preview"
},
}
在项目根目录创建src
目录,在src
中新增env.d.ts
文件,内容如下:
/// <reference types="vite/client">
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
在src
目录下新增App.vue
文件,内容如下:
<template>
<div>
<h1>Vite + vue3 + TypeScript</h1>
</div>
</template>
在src
目录下新增main.ts
文件,内容如下:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
在项目根目录创建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"]
}
在项目根目录创建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')
}
}
})
运行项目
pnpm run dev
浏览器打开 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
ni
无论你的项目是用npm
还是yarn
还是pnpm
,安装这个插件后只需要 ni
即可,插件就会自动检测
ni
# npm install
# yarn install
# pnpm install
# bun install
ni vite
# npm i vite
# yarn add vite
# pnpm add vite
# bun add vite
nr
项目里scripts
太多记不住? 你只需要执行 nr
即可
其他还有很多有用的目录,大家自己看文档吧 https://github.com/antfu/ni/blob/main/README.md