1、新建一个study文件夹: 2、安装vite: cmd进入这个目录,npm init vite@latest即可完成安装,具体步骤和参数如下: 1)先输入 npm init vite@latest 2)回车之后,要求我们输入项目名称,如果不输入,则默认是vite-project: 3)回车之后,让我们选择vite支持的框架,按上下键选vue: 4)再回车,选择ts: 5)安装完成,提示...
1、修改vite.config.ts 2、修改tsconfig.app.json (ts) 在compilerOptions中添加下面的最后2项:“baseUrl"和"paths” 添加下面代码 "baseUrl": "./", "paths": { "@/*": [ "src/*" ] } 13.项目结构,在src文件夹下,添加api,router ,store,views文件夹 配置vite-env.d.ts 文件 /// <reference ...
然后在vite.config.ts中配置: 1import { defineConfig } from 'vite'2import vue from '@vitejs/plugin-vue'3import path from 'path'4 import AutoImport from 'unplugin-auto-import/vite' 5 import Components from 'unplugin-vue-components/vite' 6 import { ElementPlusResolver } from 'unplugin-vue...
<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> </template> import HelloWorld from '@/components/HelloWorld.vue' 3.引入sass (1)安装依赖 npm install --save-dev sass (2)使用 .box{ a{ color: red; } } 4.引入ui库 在src目录下创建plugins文件夹,再新建一个element3.ts,用于...
1.输入 npm createvite@latest 2.输入项目名字 3.项目创建 选择Vue 选择TypeScript 4. cd my_vue 到项目目录,准备安装依赖 5. npm install 安装依赖 6.运行项目 npm run dev 7.http://localhost:5173/打开页面 8.安装router 路由 npm installvue-router--save ...
在/modules/test.ts文件中,写入如下代码: exportdefault[{path:'/test',name:'test',component:()=>import('@/views/test/index.vue'),meta:{title:'测试页面',},},]; 3.3、完善 /src/router/inde.ts 文件 // history模式import{createRouter,createWebHistory,RouteRecordRaw}from'vue-router';// 引用...
npm init vite@latest//或者yarn create vite 安装成功后方向键 选择到vue回车键,如下图: 1.png 选择后方向键选择vue-ts回车键,如下图: 2.png 按照提示命令 进入到项目目录安装依赖执行脚本,提示命令如下图: 3.png 执行完成后 出现如下提示,证明项目初始化成功 ...
在vite-env.d.ts文件中声明vue文件的使用,添加如下代码,如以有该代码可忽略 /// <reference types="vite/client" />declare module'*.vue'{importtype{DefineComponent}from"vue";constcomponent:DefineComponent<{},{},any>exportdefaultcomponent} 创建并配置vue的全局声明ts文件 ...
npm install vite 接下来创建基于 vite 的项目 代码语言:javascript 复制 yarn create vite 这里就不详细介绍了,如果感兴趣的话可以关注公众号【青年码农】更多关于 Vue3 的教程。运行完成,项目也就搭建完成了。 进入项目安装依赖,启动项目。 代码语言:javascript ...