Vue.JS:使用Vite工具创建项目 及 后续的主要配置
原文地址:https://mp.weixin.qq.com/s/QelQEAMYSoNC0uYKfbO9Gw
01 使用Vite工具创建Vue.JS项目
命令:
npm create vite@latest
首先,要提供的是你项目的名称:
然后,选择一个框架:
这一段的全部代码如下:
adamhuan@192 PycharmProjects % pwd
/Users/adamhuan/PycharmProjects
adamhuan@192 PycharmProjects %
adamhuan@192 PycharmProjects % ls -ltr
total 12832
drwxr-xr-x 15 adamhuan staff 480 7 30 18:53 djangoProject_Means_and_Sense
drwxr-xr-x 13 adamhuan staff 416 8 4 15:58 vue-means-and-sense
drwxr-xr-x 8 adamhuan staff 256 8 18 15:03 PaddleGan_project
drwxr-xr-x 10 adamhuan staff 320 8 22 19:40 vue_leviathan_litan
drwxr-xr-x 8 adamhuan staff 256 10 5 13:29 djangoProject_AmassHub
drwxr-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.zip
drwxr-xr-x 19 root staff 608 10 10 16:57 vue-antd-admin
drwxr-xr-x 14 adamhuan staff 448 10 11 16:42 vite-project
adamhuan@192 PycharmProjects %
adamhuan@192 PycharmProjects % node -v
v16.15.1
adamhuan@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-helloworld
adamhuan@192 PycharmProjects %
然后,进入新创建的项目目录,安装依赖包:
这一段的代码:
adamhuan@192 PycharmProjects % ls -ltr | grep "vite-helloworld"
drwxr-xr-x 12 adamhuan staff 384 10 12 11:10 vite-helloworld
adamhuan@192 PycharmProjects %
adamhuan@192 PycharmProjects % cd vite-helloworld
adamhuan@192 vite-helloworld %
adamhuan@192 vite-helloworld % npm install
added 43 packages in 3m
adamhuan@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" }]
}