1. 按脚手架初始化项目 进入vue官网的快速上手,按照官网所述,执行:npm create vue@latest,然后,按照提示选择 typescript / vue-router / pinia(如下图) 注释:如果不选择pinia,初始化的项目里就默认没有状态管理库,然后就只能自己去配置 vuex 或 pinia 了。 初始化后,项目的目录如下图所示(不含ts vs 含ts...
"scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview","lint":"eslint src","fix":"eslint src --fix","format":"prettier --write \"./**/*.{html,vue,ts,js,json,md}\"","lint:eslint":"eslint src/**/*.{ts,vue} --cache --fix","lint:style...
import { createPinia } from 'pinia' // 引入pinia app.use(createPinia()).use(router).mount('#app') //挂载 你的main.ts完整代码这会应该如下 完整这会应该如下: import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' // 挂载router import rout...
通过以上步骤,你应该能够成功搭建一个基于Vue 3、TypeScript、Vue Router、Pinia、Element Plus的Vue项目,并进行Vite打包优化。如果你有任何进一步的问题或需要更详细的帮助,请随时告诉我!
记录一下使用 Vite 创建 Vue3+TS 项目并整合 ElementPlus、Axios、Pinia、Less、Vue-router 等组件或插件。 一、使用 Vite 创建 Vue3+TS 项目 1.新建一个 temp 文件夹 (1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端; ...
安装Vue3+ts+vite npm init vite@latest 1. 选择y,新建项目名称,选择vue,选择vue-ts 下载完成后执行以下命令行 cd 新建的项目名称 npm i npm run dev 1. 2. 3. 安装Element-Plus npm install element-plus --save 1. 安装完后给main.ts配置以下代码 ...
# 选择一个你喜欢的包管理器# NPM$ npm install element-plus --save# Yarn$ yarn add element-plus# pnpm$ pnpm install element-plus main.ts import {createApp} from 'vue'import App from './App.vue'import {createPinia} from 'pinia'import router from './router/router'import ElementPlus from...
/** element plus 自动按需导入插件配置 end */ ], }) 五、配置根目录别名 在vite.config.ts中配置: import { fileURLToPath, URL } from 'node:url' export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), ...
"vue-router": "^4.1.6", "vue-tsc": "^1.0.24" } } vite.config.ts (包括element-plus按需引入及主题色改变,vitest的配置) /// <reference types="vitest" /> import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue' ...
使用Vue CLI或Vite等工具创建新项目，选择Vue3框架和TypeScript语言。项目创建成功后，启动项目，确保初始页面能够正常显示。安装并配置Vue Router：安装Vue Router 4.0及以上版本。在src目录结构中，创建views和router文件夹。配置主页路由，并在main.ts中引用和使用Vue Router。集成Pinia状态管理：安装Pinia...