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

前言

在之前的文章中写过“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 --savenpm 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.hqwc.cn/news/413465.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iOS原生应用屏幕适配完整流程

iOS原生应用屏幕适配完整流程

1. 已iPhone 11 布局为设计布局,其他机型已这个来适配 2.变量与控件对应关系 txtViewer: txtAccount txtpwd seg btnOk 3.适配方法实现: //iOS屏幕适配 -(vo
阅读更多...
IO网络5.0

IO网络5.0

思维导图 使用select实现TCP客户端的并发 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <myhead.h>#define SER_PORT 8888 //服务器端口号 #define SER_IP "192.168.122.61" //服务器客户端//客户端TCP int ma…
阅读更多...
Jumpserver中安装httpx

Jumpserver中安装httpx

查看已安装的包 pip freeze # python -V # Python 2.7.5安装anyio 刚开始直接pip install httpx&#xff0c;未设置版本号&#xff0c;因已有idna2.7&#xff0c;所以出现版本不兼容的现象 anyio 3.0.0 requires idna>2.8, but you have idna 2.7 which is incompatible.…
阅读更多...
【挖挖SRC】

【挖挖SRC】

一个SRC混子挖SRC的半年经验分享~,基本都是文字阐述&#xff0c;希望能给同样在挖洞的师傅们带来一点新收获。 前期信息收集 还是那句老话,渗透测试的本质是信息收集&#xff0c;对于没有0day的弱鸡选手来说&#xff0c;挖SRC感觉更像是对企业的资产梳理&#xff0c;我们往往…
阅读更多...
JVM 四种引用和使用场景

JVM 四种引用和使用场景

一、前言 在JDK 1.2之后&#xff0c;Java对引用的概念进行了扩充&#xff0c;将引用分为强引用&#xff08;Strong Reference&#xff09;、软引用&#xff08;Soft Reference&#xff09;、弱引用&#xff08;Weak Reference&#xff09;、虚引用&#xff08;Phantom Referen…
阅读更多...
2024.1.18 网络编程 作业

2024.1.18 网络编程 作业

思维导图 练习题 1>TCP传输使用IO多路复用select完成客户端 #include <myhead.h> #define SER_PORT 8888 #define SER_IP "192.168.125.15" #define CLI_PORT 9999 #define CLI_IP "192.168.125.15" int main(int argc, char const *argv[]) {/…
阅读更多...
深入解析JavaScript的原生原型

深入解析JavaScript的原生原型

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在JavaScript中,除了自定义对象,还存在很多由JavaScript语言本身提供…
阅读更多...
Docker之nacos的安装和使用

Docker之nacos的安装和使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《Docker之Dockerfile构建镜像》。&#x1f3af;&…
阅读更多...
肯尼斯·里科《C和指针》第6章 指针（1）

肯尼斯·里科《C和指针》第6章 指针（1）

作为补充资料来学习吧。 6.1 内存和地址 前面提到&#xff0c;我们可以把计算机的内存看作一条长街上的一排房屋。每座房子都可以容纳数据&#xff0c;并通过一个房号来标识。这个比喻颇为有用&#xff0c;但也存在局限性。计算机的内存由数以亿万计的位(bit)组成&#xff0c;…
阅读更多...
[Android] Android架构体系（2）

[Android] Android架构体系（2）

文章目录 Bionic精简对系统调用的支持:不支持 System V IPC:有限的 Pthread 功能:有限支持C:不再支持本地化和/或宽字符:Bionic新增的特性系统属性硬编码写死的UID/GID内置了DNS解析硬编码写死的服务和协议 硬件抽象层Linux内核匿名共享内存(ASHMem)Binder-BinderLoggerION 内存…
阅读更多...
【经典算法】有趣的算法之---粒子群算法梳理

【经典算法】有趣的算法之---粒子群算法梳理

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 粒子群算法 粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;是一种用于解决优化问题的元启发式算法。它通过模拟鸟群或…
阅读更多...
什么是车载信息娱乐系统和集成驾驶舱

什么是车载信息娱乐系统和集成驾驶舱

什么是车载信息娱乐系统(IVI)? “车载信息娱乐(IVI)”通过向驾驶员和乘客提供信息和娱乐&#xff0c;为驾驶提供便利和舒适。为了理解这个概念&#xff0c;有必要知道“信息娱乐”的含义。“信息娱乐”是这个市场中使用的一个词&#xff0c;它结合了“信息”和“娱乐”两个词…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023