pnpm ipnpm dev[email protected]/legacy support
feature/low-vue-legacy-template
本文档介绍了如何使用 Vite 初始化一个 Vue 2 + TypeScript 项目。
- 安装 Node.js 和 pnpm：请确保在本地环境中已经安装了 Node.js 和 pnpm。可以从 Node.js 官网（https://nodejs.org/）下载并安装最新的稳定版本，并使用以下命令全局安装 pnpm：
npm install -g pnpm
- 安装 Vite：
npm install -g create-vite- 初始化 Vue 2 + TypeScript 项目：
pnpm create vite填写项目名称，并选择Vanilla
✔ Select a framework: › Vanilla
选择TypeScript
✔ Select a variant: › TypeScript
这将使用 pnpm 包管理工具和 vite 构建工具，创建一个名为 "vue2-ts-vite-demo" 的 Vue 2 + TypeScript 项目。
- 切换到项目目录：
cd vue2-ts-vite-demo
- 安装项目依赖：
pnpm install
安装vue2生态
pnpm i vue@2 vue-template-compiler@2安装vite vue2插件, vue-tsc
pnpm i @vitejs/plugin-vue2 vue-tsc @types/node -D- 配置 @vitejs/plugin-vue2：在项目的 vite.config.js 文件中添加以下配置：
import { fileURLToPath } from "url";
import vue from '@vitejs/plugin-vue2'
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
sourcemap: true,
minify: false,
},
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
}
})- 在
src/main.ts文件中添加（替换）如下代码
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: (h) => h(App),
}).$mount('#app');
- 在项目中创建 Vue 2 的组件文件（如 src/App.vue）：
<template>
<div>
<h1>Hello Vue 2!</h1>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
<style scoped>
/* Add your styles here */
</style>
- 添加vue2的
ts描述(src/vite-env.d.ts)代码
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}- tsconfig.json 修改如下
{
"compilerOptions": {
"baseUrl": "./",
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"paths": {
"@/*": ["src/*"]
},
},
"vueCompilerOptions": {
"target": 2.7
},
"include": [
"vite.config.*",
"src/**/*.vue",
"src/**/*.ts",
"src/**/*.d.ts",
"node_modules/vue/*.d.ts" // 添加这一行
]
}- 调整package.json部分命令
{
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
}
}- 运行开发者服务器：
pnpm run dev
这将启动一个本地开发服务器，并在浏览器中打开 Vue 2 + TypeScript 项目的预览页面。
现在，你已经成功初始化了一个 Vue 2 + TypeScript 项目，并使用 pnpm 和 vite 作为包管理工具和构建工具。你可以根据需要在项目中添加、更新或者移除依赖包，并使用 pnpm 进行管理和构建，同时使用 vite 进行快速的开发和构建。pnpm 提供了类似于 npm 和 yarn 的功能，但具有更快的速度和更少的磁盘占用，vite 则是一款现代化的构建工具，可以帮助你更好地管理 Vue 2 + TypeScript 项目的开发和构建流程。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent