详解Vite创建Vue3项目+vue-router+ts+vite+element-plus

news2024/11/28 23:18:33

前言

在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用”

一、准备工作安装工具

这里我们简单介绍一下文章中使用到的工具，使用这些工具可以提高我们开发效率。
当然了只有nodejs 是必须要安装的，nvm 、Vite 、NRM 这些都不是必须的，

1.1 nvm nodejs管理工具

nvm全名node.js version management，顾名思义是一个nodejs的版本管理工具。

通过它可以安装和切换不同版本的nodejs

nvm的下载 nvm下载

有的小伙伴可能打开GitHub网站比较忙，贴心的我帮大家准备了百度网盘下载

链接：https://pan.baidu.com/s/18FZuhmw7OCFeLFpQmf7u6w 提取码：lnaf

1.1.2 nvm 安装

双击nvm-setup.exe可执行文件
在这里插入图片描述
选择nvm安装路径
在这里插入图片描述

选择nodejs安装路径
在这里插入图片描述

安装
在这里插入图片描述
检查是否安装成功
nvm version
在这里插入图片描述

nvm 常用命令

// 显示可以安装的所有nodejs版本
nvm list available 
//安装指定版本的nodejs
nvm install <version> 
//显示已安装版本列表
nvm list
//使用指定版本node
nvm use [version]
//卸载指定版本node
nvm uninstall <version>

1.2 node.js js运行环境

Node.js 就不用多说了，官方解释：Node.js is an open-source, cross-platform JavaScript runtime environment. 翻译过来：Node.js是一个开源、跨平台的JavaScript运行时环境。（我们这边是创建Vue3的项目，官方是 Node.js 版本 >= 12.0.0。但是我们为了兼容Vite我们这里推荐使用Node.16+,我们这里目前使用的是18.14.2，在cmd窗口输入node -v，即可查询到我们当前的一个node的版本。）
具体的node安装请根据我之前文章进行操作安装处理即可，这里就不多介绍了。
在这里插入图片描述

二、创建Vue3项目

兼容注意：Vite需要Node.js的版本14.18+，16+

然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
使用npm 、yarn 、pnpm 其中一种命令安装即可

1-使用 NPM

npm create vite@latest

使用 Yarn:

yarn create vite@latest

使用 PNPM:

pnpm create vite@latest

2-输入vue项目名称，我们这里就叫vite-project

在这里插入图片描述
3-选择使用哪种框架，这里我们当然是选择Vue 了（Vite 不仅仅支持Vue 框架，还支持React、Vanilla、Lit 等前端主流框架）
在这里插入图片描述
4-选择Javascript 和TypeScript（Vue3 已经全面拥抱TypeScript，所以这里我们就选择TypeScript）

5-到此我们就创建完成了，是不是很简单了
在这里插入图片描述
6-我们按照上面提示，进入到 vite-project 项目路径下 按照依赖

// 切换到项目跟目录
cd vite-project
//安装依赖
npm install

为了节约大家时间，我们这里可以切换npm镜像源，切换国内就可以

#查看当前源
npm config get registry

#更换为国内镜像
npm config set registry=http://registry.npm.taobao.org/

在这里插入图片描述
7-启动Vue 项目

// 启动项目
npm run dev

当控制台看到如下所示，说明启动成功了
在这里插入图片描述
浏览器打开如下：
在这里插入图片描述
注意点：

我们如果之前都是用vue2写之前开发项目时候，我们这里突然转换用vue3开发，在使用Vscode的代码工具时候，vue3需要禁用了以前的vue2，为了兼容代码规范，代码高亮显示的一款插件安装插件Vetur不然代码会提示报错报红。再建议安装Prettier - Code formatter插件【该插件主要用于格式化代码】，为了高效快捷开发，再提供一款插件方便寻找路径和提示Path-intellisense

三、项目结构和特殊页面介绍

1- 项目结构

在这里插入图片描述
在这里插入图片描述
2- 特殊页面介绍

（1）index.html

首页文件的初始代码如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

看似这个是普通的html文件，让它与众不同的是

加了id=“app”
整个项目只有这一个 html 文件，所以 这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中

(2) App.vue

该文件称为“父组件”，因为其它的组件都是这个的儿子组件

.vue 文件是vue 中自定义的文件类型，我们把它看作成html即可，可以在里面写标签元素、css样式、js/ts代码

我们来看看其初始化的代码

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

这里的HelloWorld 就是引入的子组件，并给子组件传递了一个字符串参数msg=“Vite + Vue”

（3）main.ts
main.ts 通常是应用程序的入口文件, App.vue就是通过这个文件和 index.html 里的

产生联系的

代码如下：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
  • import { createApp } from ‘vue’ 导入了 Vue 的 createApp 函数，用于创建一个 Vue 应用实例。
  • import ‘./style.css’ 导入了一个 CSS 文件,这里可以忽略
  • import App from ‘./App.vue’ 导入了根组件 App ，而App又包含了所有子组件
  • createApp(App).mount(‘#app’) 创建了一个 Vue 应用实例，并将根组件 App 挂载到具有 id 为 app 的 DOM 元素上。

（4）package.json 文件
package.json 主要是项目依赖配置。

代码如下

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.11"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "typescript": "^5.2.2",
    "vite": "^5.0.8",
    "vue-tsc": "^1.8.25"
  }
}

这里我简单叙述一下：

  • “name”: “vite-project” 指定项目的名称为 “vite-project”

  • “version”: “0.0.0” ：指定项目的版本号，这是一个初始版本号,后面如果项目升级新版本了，可以在这里定义

  • “scripts” ：定义了一些脚本命令，用于开发、构建和预览项目

  • “dev”: “vite” ：启动开发服务器，用于在开发环境下运行项目。 我们前面通过npm run dev 就是在这儿配置的

  • “build”: “vue-tsc && vite build” ：我们使用TypeScript ，需要将 TypeScript 代码编译为 JavaScript才能运行

  • “dependencies” ：列出了项目的生产环境依赖项。

  • “vue”: “^3.3.4” ：指定了 Vue 的版本为 3.3.4，这是项目所依赖的核心库。

  • “devDependencies” ：列出了项目的开发环境依赖项。

  • “@vitejs/plugin-vue”: “^4.2.3” ：Vite 插件版本

  • “typescript”: “^5.0.2” ：TypeScript 编译器版本

  • “vite”: “^4.4.5” ：Vite 构建工具

四、安装所需的配置和集成Element Plus

1-安装Typescript依赖

在这里插入图片描述

npm install @types/node --save-dev

2-修改vite.config.ts配置文件代码

在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  //解决“vite use `--host` to expose”
  base: './',	//不加打包后白屏
  server: {             
    host: '0.0.0.0',	
    // port: 8080,      
    open: true
  },
  resolve:{   
    //别名配置，引用src路径下的东西可以通过@如：import Layout from '@/layout/index.vue'
    alias:[   
      {
        find:'@',
        replacement:resolve(__dirname,'src') 
      }
    ]
  }
})

3-安装路由

npm install vue-router@4

在src目录下新建router文件夹，在router里创建index.ts文件
在这里插入图片描述

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../components/HelloWorld.vue'

const routes: Array<RouteRecordRaw> = [
  {
  //路由初始指向
    path: '/',
    name: 'HelloWorld',
    component:()=>import('../components/HelloWorld.vue'),
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4- main.ts中导入挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

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

5- 修改App.vue管理路由

<script setup lang="ts">
</script>
<template>
  <router-view></router-view>
</template>

<style>

</style>

6- 修改HelloWorld组件

<template>
  <h1>HelloWorld</h1>
</template>

<script setup lang="ts">
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

HelloWorld

7- 为了方便我们开发使用ts文件采用@方式进行导入
在tsconfig.json文件中添加配置（下图标红的的都是添加和修改的，也可自己丰富）
配置完成后建议重新run一下
在这里插入图片描述

8- 安装配置代码检测工具使用eslint-plugin-vue插件

npm install --save-dev eslint eslint-plugin-vue

（1）- 在根目录创建.eslintrc.js文件

具体配置根据项目需求自行更改

module.exports = {
	root: true,
	parserOptions: {
		sourceType: 'module'
	},
	parser: 'vue-eslint-parser',
	extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly-recommended', 'plugin:vue/vue3-recommended'],
	env: {
		browser: true,
		node: true,
		es6: true
	},
	rules: {
		'no-console': 'off',
		'comma-dangle': [2, 'never'] //禁止使用拖尾逗号
	}
}

9- css 预处理器 sass（看习惯）

npm install -D sass sass-loader

使用如下

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>

10- 安装Element Plus 官网

在这里插入图片描述

npm install element-plus --save

npm install @element-plus/icons-vue // 图标

官网提供了三种用法 完整引入、按需引入、手动导入，这里我们使用按需导入（可以使打包文件变小） 官方也推荐使用按需引入

按需引入：

（1）首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

(2)在 Vite 的配置文件vite.config.ts中 添加如下代码

在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 添加
    AutoImport({
    resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
],
})

实现效果：
在这里插入图片描述
在这里插入图片描述
添加全局配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from "element-plus/lib/locale/lang/zh-cn";//国际化

const app = createApp(App);

app.use(ElementPlus, { locale: zhCn }).use(router).mount('#app')

//全局注册图标组件
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

在这里插入图片描述
使用

<template>
  <el-button type="primary" size="default" :icon='Plus'>新增</el-button>
</template>
<script setup lang="ts">
import {Plus} from '@element-plus/icons-vue';

</script>
<style scoped lang="scss">

</style>

注意点：
在这里插入图片描述

按需引入Icon

<script setup lang="ts">

import { Edit } from '@element-plus/icons-vue'

</script>

<template>
  <!-- <el-button type="primary">使用element-plus的第一个按钮</el-button> -->
  <el-icon>
    <Edit />
  </el-icon>
</template>

<style scoped>

</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1392476.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot框架自定义解析配置项占位符（${}）获取配置

SpringBoot框架自定义解析配置项占位符（${}）获取配置

一、前言 在最近项目开发中&#xff0c;有一个需求&#xff0c;针对自定义注解中字符串属性值的设置需要支持使用”${xx}“占位符获取在SpringBoot框架配置文件中配置项对应的属性值&#xff0c;而且支持多个”${xx}“标识的配置任意拼接。 二、功能实现 从实现思路上说还是…
阅读更多...
nas-群晖docker查询注册表失败解决办法（平替：使用SSH命令拉取ddns-go）

nas-群晖docker查询注册表失败解决办法（平替：使用SSH命令拉取ddns-go）

一、遇到问题 群晖里面的docker图形化界面现在不能直接查询需要下载的东西&#xff0c;原因可能就是被墙了&#xff0c;那么换一种方式使用SSH命令下载也是可以的&#xff0c;文章这里以在docker里面下载ddns-go为例子。 二、操作步骤 &#xff08;一&#xff09;打开群晖系统…
阅读更多...
STM32 TIM输出比较、PWM波形

STM32 TIM输出比较、PWM波形

单片机学习&#xff01; 目录 一、输出比较简介 二、PWM简介 三、输出比较通道 3.1通用定时器的输出比较部分电路 3.2高级定时器的输出比较部分电路 四、输出模式控制器 五、PWM基本结构 六、PWM参数计算 总结 前言 文章讲述STM32定时器的输出比较功能&#xff0c;它主…
阅读更多...
【C++】explicit的作用 --- 2024.1.17

【C++】explicit的作用 --- 2024.1.17

目录 explicit的作用结束语 explicit的作用 先看示例代码&#xff1a; class Maker { public:Maker(int n){} }; int main() {Maker m 10; }在上述代码中&#xff0c;main函数里我们实例化对象名称为m&#xff0c;并且赋值为10&#xff0c;作为有参构造函数的参数。但是实际…
阅读更多...
libzmq XPUB/XSUB模型

libzmq XPUB/XSUB模型

libzmq XPUB/XSUB模型 与PUB/SUB功能类似,但是使用场景不一样.普通用法我就不说了,XPUB/XSUB典型的应用是作代理.PUB/SUB的问题 如图:最下面每个长方形框框是一个进程,他们都或多或少的需要关注PUB1-3的消息,所以最终的连接是全链接,很复杂,如果再多几个进程,连线就密密麻麻了…
阅读更多...
SpringBoot整合MyBatis项目进行CRUD操作项目示例

SpringBoot整合MyBatis项目进行CRUD操作项目示例

文章目录 SpringBoot整合MyBatis项目进行CRUD操作项目示例1.1.需求分析1.2.创建工程1.3.pom.xml1.4.application.properties1.5.启动类 2.添加用户2.1.数据表设计2.2.pojo2.3.mapper2.4.service2.5.junit2.6.controller2.7.thymeleaf2.8.测试 3.查询用户3.1.mapper3.2.service3…
阅读更多...
Microsoft Word 设置底纹

Microsoft Word 设置底纹

Microsoft Word 设置底纹 References 打开文档页面&#xff0c;选中特定段落或全部文档 在“段落”中单击“边框”下三角按钮 在列表中选择“边框和底纹”选项 在“边框和底纹”对话框中单击“底纹”选项卡 在图案样式和图案颜色列表中设置合适颜色的底纹&#xff0c;单击“确…
阅读更多...
软件测试中的白盒测试，这些技巧你知道吗?

软件测试中的白盒测试，这些技巧你知道吗?

对于很多刚开始学习软件测试的小伙伴来说&#xff0c;如果能尽早将黑盒、白盒测试弄明白&#xff0c;掌握两种测试的结论和基本原理&#xff0c;将对自己后期的学习有较好的帮助。今天&#xff0c;我们就来聊聊黑盒、白盒测试的相关话题。 1、黑盒测试的方法和小结 最常见黑盒…
阅读更多...
10 微信小程序开发

10 微信小程序开发

知识点回顾 1.项目回顾1.2 小程序1.3 API1.4 后台管理 2.后台管理celery2.1 基本后台管理2.1.1 专场2.1.2 拍品列表 3.逻辑开发4.部署 各位小伙伴想要博客相关资料的话关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; 1.项目回顾 此项目是由【小程序】【API】【…
阅读更多...
Java21 + SpringBoot3集成Spring Data JPA

Java21 + SpringBoot3集成Spring Data JPA

Java21 SpringBoot3集成Spring Data JPA 文章目录 Java21 SpringBoot3集成Spring Data JPA前言相关技术简介ORM&#xff08;Object-Relational Mapping&#xff0c;对象-关系映射&#xff09;JPA&#xff08;Java Persistence API&#xff0c;Java持久层API&#xff09;Hiber…
阅读更多...
HFSS笔记/信号完整性分析（一）——常用快捷键+建模技巧

HFSS笔记/信号完整性分析（一）——常用快捷键+建模技巧

文章目录 1、常用快捷键2、常用建模技巧2.1 如何由一个无厚度的sheet生成一个有厚度的2.2 如何绘制T形截面的传输线&#xff1f;2.3 自动建立辐射边界法一、法二、 仅做笔记整理与分享。 1、常用快捷键 快捷键功能CtrlDfit it all 以合适的尺寸至于窗口中间CtrlH隐藏object或者…
阅读更多...
Docker网络配置网络模式

Docker网络配置网络模式

前言 Docker 的网络模式是一种定义容器如何在网络中通信的方式。Docker 提供了多种网络模式&#xff0c;每种模式都适用于不同的使用场景 一.网络相关概念 1.子网掩码 互联网是由许多小型网络构成的&#xff0c;每个网络上都有许多主机&#xff0c;这样便构成了一个有层次的结…
阅读更多...
【昕宝爸爸小模块】图文源码详解什么是线程池、线程池的底层到底是如何实现的

【昕宝爸爸小模块】图文源码详解什么是线程池、线程池的底层到底是如何实现的

➡️博客首页 https://blog.csdn.net/Java_Yangxiaoyuan 欢迎优秀的你&#x1f44d;点赞、&#x1f5c2;️收藏、加❤️关注哦。 本文章CSDN首发&#xff0c;欢迎转载&#xff0c;要注明出处哦&#xff01; 先感谢优秀的你能认真的看完本文&…
阅读更多...
【送书活动七期】CMeet系列 技术生态沙龙：技术人职业交流会·杭州场-转鸿蒙 对应用开发来说是否是职业发展新机会

【送书活动七期】CMeet系列 技术生态沙龙：技术人职业交流会·杭州场-转鸿蒙 对应用开发来说是否是职业发展新机会

CSDN致力于促进城市区域内尖端新兴技术开发者交流,提供开放自由的切磋平台。在近期热议的话题中,“华为鸿蒙系统不再兼容安卓应用”的消息成了程序员们广泛关注并引发思考的问题。 因此便有了我们此次的活动探讨议题! 目录 题外话开场简单介绍活动主办方介绍活动话题讨论升职加…
阅读更多...
Intewell-Win_V2.0.1_release版本正式发布

Intewell-Win_V2.0.1_release版本正式发布

Intewell-Win_V2.0.1_release版本 版本号&#xff1a;V2.0.1 版本发布类型&#xff1a;release正式版本 版本特点 1.优化虚拟网卡使用 2.实时性优化 运行环境推荐 Intewell developer可以运行在windows7及windows10 64位 支持硬件列表
阅读更多...
小程序系列--7.页面配置以及网络数据请求

小程序系列--7.页面配置以及网络数据请求

一. 页面配置 1.页面配置文件的作用 小程序中&#xff0c;每个页面都有自己的 .json 配置文件&#xff0c;用来对当前页面的窗口外观、页面效果等进行配置。 2. 页面配置和全局配置的关系 3. 页面配置中常用的配置项 二、网络数据请求 1. 小程序中网络数据请求的限制 2. 配…
阅读更多...
2024年美赛数学建模思路 - 案例：ID3-决策树分类算法

2024年美赛数学建模思路 - 案例：ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法&#xff0c;就是频繁模…
阅读更多...
rust跟我学三:文件时间属性获得方法

rust跟我学三:文件时间属性获得方法

图为RUST吉祥物 大家好，我是get_local_info作者带剑书生，这里用一篇文章讲解get_local_info是怎样获得杀毒软件的病毒库时间的。 首先，先要了解get_local_info是什么？ get_local_info是一个获取linux系统信息的rust三方库，并提供一些常用功能，目前版本0.2.4。详细介绍地址…
阅读更多...
AI大模型学习笔记之二：什么是 AI 大模型的训练和推理？

AI大模型学习笔记之二：什么是 AI 大模型的训练和推理？

在人工智能&#xff08;AI&#xff09;的领域中&#xff0c;我们经常听到训练&#xff08;Training) 和 推理&#xff08;Inference) 这两个词汇&#xff0c;它们是构建强大 AI 模型的关键步骤。我们通过类比人类的学习过程来理解这两个概念&#xff0c;可以更加自然而生动地理…
阅读更多...
详解React与Vue的性能对比

详解React与Vue的性能对比

React 和 Vue 是当前最流行的前端开发框架之一。它们都具有高度的灵活性和可扩展性&#xff0c;但在某些方面有所不同。在本篇文章中&#xff0c;我将详细介绍 React 和 Vue 这两个技术&#xff0c;并比较它们的优点和缺点。 目录 1. React&#xff1a; 1.1 优点&#xff1a; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023