1、新建一个study文件夹: 2、安装vite: cmd进入这个目录,npm init vite@latest即可完成安装,具体步骤和参数如下: 1)先输入 npm init vite@latest 2)回车之后,要求我们输入项目名称,如果不输入,则默认是vite-project: 3)回车之后,让我们选择vite支持的框架,按上下键选vue: 4)再回车,选择ts: 5)安装完成,提示...
这个配置在Vue\cli脚手架中默认可以使用,但是在Vite搭建的Vue3项目中我们需要配置一下; 整体配置如下: // vite.config.tsimportvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv,defineConfig}from"vite";importpathfrom"path";constpathSrc=path.resolve(__dirname,"src");// https://...
HelloWorld.vue:组件,可以在网页里重复使用的对象 vite.config.ts:工程的配置文件 2.源码 ①.index.html <!doctype html>Vite + Vue + TS ②.main.ts import { createApp } from 'vue'import'./style.css'import App from'./App.vue'createApp(App).mount('#app') ③.style.css :root{font-...
新建src/views/sys/AdmUser.vue,内容如下。 <template> 管理员 </template> 新建src/views/log/AdmUserLogin.vue,内容如下。 <template> 管理员登录日志 </template> 路由配置 编辑src/router/index.ts,修改Main路由如下。 { path:'/', name:'Main', component:()=>import('@/views/Main.vue'), redire...
(1)找不到模块“vue”。你的意思是要将 "moduleResolution" 选项设置为 "node",还是要将别名添加到 "paths" 选项中?ts(2792) image.png 修复方法: image.png "moduleResolution": "node", (2)找不到模块“./App.vue”或其相应的类型声明。ts(2307) ...
vite.config.ts: import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import vueDevTools from 'vite-plugin-vue-devtools' ...
编辑src/views/Main.vue,添加el-main样式,这里的60px是顶部的高度。 .el-main{ height:calc(100vh-60px); padding:12px; text-align: left; } 固定顶部和侧边栏 优化滚动条 编辑src/views/Main.vue,el-main修改如下。 <el-main> <el-scrollbar> ...
为了熟悉vue3+ts的开发风格,搭建的一个仿小红书的WebApp(已开源);持续迭代中... gitHub仓库 :https://github.com/xxljunjun/vue3-webApp 线上地址:http://www.xxljunjun.com/redbook 一、搭建项目 npm init vite@latest 踩坑:vite项目需要node版本大于16!!! 通过vite...
一、使用 Vite 创建 Vue3+TS 项目 1.新建一个 temp 文件夹 (1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端; 2.创建一个 Vue3 项目工程 (1)具体操作如下: npm create vite@latest(1) 输入项目名,如: vite-vue3-ts-less-element_plus ,然后回车 ...
一款简约版本的移动端博客。前端项目主要是采用Vue3最新语法糖和Vant3.0来搭建的;采用Tsx来渲染公共组件;采用Vite2.0来构建、打包。后端项目主要采用Node框架Koa2以及MongoDB数据库来设计的。 PC 端博客线上预览地址:http://www.rasblog.com PC 端博客仓库地址...