vuejs3.0 从入门到精通——Visual Studio Code 使用 Vite 安装 TypeScript+Vue3 项目

Visual Studio Code 使用 Vite 安装 TypeScript + Vue3项目

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者。

要使用 vite 来创建一个 vue 项目，非常的简单：

安装前需要有 node 环境，我本地已经安装过了，同时之前篇章里有讲过如何安装 node，这里不再赘述。

?

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

PS D:\worker-vue\vue-begin01> npm -v 9.3.1 PS D:\worker-vue\vue-begin01> node -v v18.13.0 PS D:\worker-vue\vue-begin01> npm init vue@latest   Vue.js - The Progressive JavaScript Framework   √ Project name: ... vue-project √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add an End-to-End Testing Solution? » No √ Add ESLint for code quality? ... No / Yes √ Add Prettier for code formatting? ... No / Yes   Scaffolding project in D:\worker-vue\vue-begin01\vue-project...   Done. Now run:     cd vue-project   npm install     npm run lint    npm run dev     PS D:\worker-vue\vue-begin01>

按照提示，继续执行命令：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

PS D:\worker-vue\vue-begin01> cd .\vue-project\ PS D:\worker-vue\vue-begin01\vue-project> npm install npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead   added 354 packages in 30s PS D:\worker-vue\vue-begin01\vue-project> npm run lint   > vue-project@0.0.0 lint > eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore   PS D:\worker-vue\vue-begin01\vue-project> npm run dev   > vue-project@0.0.0 dev > vite       VITE v4.1.1  ready in 654 ms     ➜  Local:   http://localhost:5173/   ➜  Network: use --host to expose   ➜  press h to show help

按住 ctrl 键，鼠标单击 Local 后面的 http 超链接，跳转到如下界面，表示成功了：

我们也看下项目文件，我们需要写的代码放在 src 文件目录下，main.js 是我们的入口文件：

看看 packeage.json 内容：

?

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 33 34

{   "name": "vue-project",   "version": "0.0.0",   "private": true,   "scripts": {     "dev": "vite",     "build": "run-p type-check build-only",     "preview": "vite preview",     "build-only": "vite build",     "type-check": "vue-tsc --noEmit",     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"   },   "dependencies": {     "pinia": "^2.0.28",     "vue": "^3.2.45",     "vue-router": "^4.1.6"   },   "devDependencies": {     "@rushstack/eslint-patch": "^1.1.4",     "@types/node": "^18.11.12",     "@vitejs/plugin-vue": "^4.0.0",     "@vitejs/plugin-vue-jsx": "^3.0.0",     "@vue/eslint-config-prettier": "^7.0.0",     "@vue/eslint-config-typescript": "^11.0.0",     "@vue/tsconfig": "^0.1.3",     "eslint": "^8.22.0",     "eslint-plugin-vue": "^9.3.0",     "npm-run-all": "^4.1.5",     "prettier": "^2.7.1",     "typescript": "~4.7.4",     "vite": "^4.0.0",     "vue-tsc": "^1.0.12"   } }