vue3项目创建(vite3+ts+elementui-plus)

这篇具有很好参考价值的文章主要介绍了vue3项目创建(vite3+ts+elementui-plus)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.创建工程

目的:vue3+vite+ts

  1. 安装依赖,安装vite的工具

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript

Vite下一代的前端工具链为开发提供极速响应v4.3

npm install -g create-vite

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript

  1. 创建工程
create-vite font-userui --template vue-ts 

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript

–template vue-ts 后面的是配置模板,有很多,也有react,官网有介绍

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript

  1. 启动工程
cd .\font-userui\
npm i
npm  run dev

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript

  1. 安装路由
npm install vue-router@next
  1. 配置vite-env.d.ts
    为了让ts识别.vue文件
declare module "*.vue" {
    import { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
    export default component
}
  1. 安装element-plus
npm install element-plus

注意vue3用的是element-plus别装错版本了
最终main.ts文件

import { createApp } from 'vue';
import App from './App.vue';
import router from "./router";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


const  app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

  1. 前端页面:
    2.1. 登录页面:
    vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript
    登录页是偷本站博主的
  1. 简约登录页 简约登录页分享

vue3项目创建(vite3+ts+elementui-plus),web的学习历程,elementui,前端,javascript
主要页面暂时就这一点,属实有点吃力。

一边在靠驾照,一边写这,前端真不是人干的活,又多又杂,呜呜呜!

暂时写到这里,后面会继续更新文章来源地址https://www.toymoban.com/news/detail-573275.html

到了这里,关于vue3项目创建(vite3+ts+elementui-plus)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Vue3+TS+Vite+Cesium创建项目

    随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS如今真的越来越火了,对于做GIS前端开发的人员来说,Cesium开发是绝对绕不开的一门技术,所以今天来说说如何利用当下最火的 Vue3+TS+Vite 来搭建一个基于Cesium的项目开发环境。 1.使用 yarn create vite 创建

    2024年02月05日
    浏览(74)
  • Uni-app + Vue3 + TS +Vite 创建项目

    npm 都很熟,可是与 npm 如此相似的 npx 是干嘛的呢?我们为甚要介绍 npx ? 由于 uni-app 官方提供创建命令使用的是 npx,所以我们先来了解下 npx 是干什么的?它与 npm 的区别。 npx 是 npm 的高级版本,它从 npm v5.2 版本开始引入的,与 npm 绑定在一起,无需额外安装,具有更大的功

    2023年04月15日
    浏览(79)
  • 详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

    前言 在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”,但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。 Vite 和 Webpack 都是现代化的前端构建工

    2024年01月18日
    浏览(62)
  • Vue3+TS+Vite创建项目,并导入Element-plus和Sass

    1.桌面新建一个文件夹Vue3-app 打开编辑器导入文件夹,编辑器打开终端输入或者命令行工具cd到项目目录下输入 npm init vue@latest 回车运行 这里我选择了TS+Vite来开发,并选择安装路由 2.cd到 vue-project目录下 输入 npm install 回车运行 3.安装完成后 输入 npm run dev 回车运行 浏览器打开

    2024年02月16日
    浏览(59)
  • 使用模板创建【vite+vue3+ts】项目出现 “找不到模块‘vue‘或其相应的类型声明” 的解决方案

    项目前台需要使用Vue3+Ts来写一个H5应用,然后我用模板创建 创建完后进入 HelloWorld.vue ,两眼一黑 然后在 tsconfig.json 的 \\\"compilerOptions\\\" 中添加 修改 \\\"moduleResolution\\\" 值为 \\\"node\\\"

    2024年02月17日
    浏览(64)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(61)
  • vue3+elementui-plus实现无限递归菜单

    效果图 实现方式是:通过给定的数据结构层数来动态生成多级菜单 下面的方法可以实现重置菜单选项为默认项(需求场景:左侧菜单切换时,上方菜单就要重置为默认选项) 通过给el-menu添加:key=\\\"menuKey\\\"实现。 实现原理::key=“menuKey” 是 Vue 中的一个特殊语法,用于控制组件

    2024年04月24日
    浏览(40)
  • vue3+elementui-plus实现一个接口上传多个文件

    首先,先使用element-plus写好上传组件,变量的定义我在这里就省略了都 然后,绑定的函数都补充一下 然后,假设有个提交按钮,点击上传文件请求接口 既然有编辑,那就应该做回显的逻辑,文件如何回显到上传组件上 over 以上主要通过代码说明,可根据自己实际情况改造

    2024年02月13日
    浏览(52)
  • vite vue3项目打包,跳过ts检查

    遇到这个问题是因为vue文件中script标签没有写lang造成的  剩下的ts类型检查错误  \\\"build\\\": \\\"vue-tsc --noEmit --skipLibCheck vite build\\\",是因为这个vue-tsc打包对ts进行了类型检查,需要全部解决了才行,可以关闭,直接改成\\\"build\\\": \\\"vite build\\\",

    2024年02月16日
    浏览(60)
  • vue3+ts+vite项目引入echarts,vue3项目echarts组件封装

    技术栈 :Vue3 + Ts + Vite + Echarts 简介 : 图文详解,教你如何在 Vue3 项目中 引入Echarts , 封装Echarts组件 ,并实现常用Echarts图例 1.1 静态效果 1.2 动态效果 2.1 安装 Echarts npm: pnpm: 2.2 main.ts 中引入 2.3 Echarts 组件封装 /src/components/ReEcharts/index.vue 文件中写入如下代码 3.1 柱状图 实现

    2024年02月09日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包