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

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

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

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

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

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> 

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

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 内容：

{
  "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"
  }
}