Vue.JS：使用Vite工具创建项目 及 后续的主要配置

原文地址：https://mp.weixin.qq.com/s/QelQEAMYSoNC0uYKfbO9Gw

01 使用Vite工具创建Vue.JS项目

 命令：

npm create vite@latest

 首先，要提供的是你项目的名称：

然后，选择一个框架：

这一段的全部代码如下：

adamhuan@192 PycharmProjects % pwd/Users/adamhuan/PycharmProjectsadamhuan@192 PycharmProjects % adamhuan@192 PycharmProjects % ls -ltrtotal 12832drwxr-xr-x  15 adamhuan  staff      480  7 30 18:53 djangoProject_Means_and_Sensedrwxr-xr-x  13 adamhuan  staff      416  8  4 15:58 vue-means-and-sensedrwxr-xr-x   8 adamhuan  staff      256  8 18 15:03 PaddleGan_projectdrwxr-xr-x  10 adamhuan  staff      320  8 22 19:40 vue_leviathan_litandrwxr-xr-x   8 adamhuan  staff      256 10  5 13:29 djangoProject_AmassHubdrwxr-xr-x  13 adamhuan  staff      416 10  5 15:05 vue-amass-hub-rw-r--r--@  1 adamhuan  staff  6566782 10 10 16:23 vue-antd-admin-main.zipdrwxr-xr-x  19 root      staff      608 10 10 16:57 vue-antd-admindrwxr-xr-x  14 adamhuan  staff      448 10 11 16:42 vite-projectadamhuan@192 PycharmProjects % adamhuan@192 PycharmProjects % node -v               v16.15.1adamhuan@192 PycharmProjects % adamhuan@192 PycharmProjects % npm create vite@latest✔ Project name: … vite-helloworld✔ Select a framework: › Vue✔ Select a variant: › TypeScript
Scaffolding project in /Users/adamhuan/PycharmProjects/vite-helloworld...
Done. Now run:
  cd vite-helloworld  npm install  npm run dev
adamhuan@192 PycharmProjects % ls -ltr | grep "vite-helloworld"drwxr-xr-x  12 adamhuan  staff      384 10 12 11:10 vite-helloworldadamhuan@192 PycharmProjects %

然后，进入新创建的项目目录，安装依赖包：

这一段的代码：

adamhuan@192 PycharmProjects % ls -ltr | grep "vite-helloworld"drwxr-xr-x  12 adamhuan  staff      384 10 12 11:10 vite-helloworldadamhuan@192 PycharmProjects % adamhuan@192 PycharmProjects % cd vite-helloworld adamhuan@192 vite-helloworld % adamhuan@192 vite-helloworld % npm install
added 43 packages in 3madamhuan@192 vite-helloworld %

然后运行项目：

可以看到，项目成功运行：

最后，在浏览器中访问：

02 配置浏览器自动打开 

文件：package.json

03 配置src别名 

先安装【@types/node】

npm i @types/node --save-dev 

文件：vite.config.ts

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  resolve: {    alias: {      "@": path.resolve(__dirname, 'src')    }  }})

 文件：tsconfig.json

在配置项【compilerOptions】中添加【baseUrl】的配置；

修改完成后的【tsconfig.json】全文如下：

{  "compilerOptions": {    "baseUrl": ".",    "paths": {      "@/*": ["src/*"],    },
    "target": "ES2020",    "useDefineForClassFields": true,    "module": "ESNext",    "lib": ["ES2020", "DOM", "DOM.Iterable"],    "skipLibCheck": true,
    /* Bundler mode */    "moduleResolution": "bundler",    "allowImportingTsExtensions": true,    "resolveJsonModule": true,    "isolatedModules": true,    "noEmit": true,    "jsx": "preserve",
    /* Linting */    "strict": true,    "noUnusedLocals": true,    "noUnusedParameters": true,    "noFallthroughCasesInSwitch": true  },  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],  "references": [{ "path": "./tsconfig.node.json" }]}

翻译

搜索

复制