vite创建vue3项目

概述

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。

 

官网：https://cn.vitejs.dev/guide/

 

安装vite

最新版本的vite，要求nodejs版本，必须是18.x以上，所以需要确保你的node版本足够高。

本文使用nodejs最新版本v22.7.0

?
1
yarn add vite

创建项目

使用国内镜像

?
1
npm config set registry=https://registry.npmmirror.com

　　

安装最新版vite

?
1
npm  install -g  vite@latest

　

创建项目

?
1
yarn create vite

 

输入项目名：vite_test

框架选择：vue

语言选择：JavaScript

?
1
2
3
√ Project name: ... vite_test
√ Select a framework: » Vue
√ Select a variant: » JavaScript

　　

创建成功后，根据提示，执行3个命令

?
1
2
3
4
5
Done. Now run:
 
  cd vite_test
  yarn
  yarn dev

 

执行成功后，提示如下：

?
1
2
3
4
5
VITE v5.4.2  ready in 682 ms
 
 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

 

访问页面：http://localhost:5173/

效果如下：

安装sass

?
1
yarn add -D sass-embedded

　　

安装Element Plus

?
1
yarn add -D element-plus

　　

导入Element Plus

修改文件src\main.js，注意红色字体是修改的

?
1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

 

修改文件src\components\HelloWorld.vue

在</template>上面增加一个div，注意红色字体部分

?
1
2
3
4
5
6
7
8
...
  <div class="mb-4">
   <el-button type="success">Success</el-button>
   <el-button type="info">Info</el-button>
   <el-button type="warning">Warning</el-button>
   <el-button type="danger">Danger</el-button>
  </div>
</template>

　　

刷新页面，查看底部，就可以看到添加的几个按钮了，使用的是Element ui框架

Element 表单展示

修改文件src\components\HelloWorld.vue，直接替换所有内容：

　　

刷新页面，效果如下：

 效果看起来，还挺漂亮的。

 

底部的11，22是为了测试css的class嵌套，这种写法在sass中很常用。

在style标签中，不需要特意声明语言是sass，他也自动支持这种写法，加了反而会报错。

 

添加路由

使用 yarn create vite 创建项目时，默认情况下不会自动创建路由配置，因为 Vite 的目标是提供一个轻量级的项目启动模板，而不包含额外的依赖或配置。
如果你需要在 Vite + Vue 3 项目中使用路由，可以按照以下步骤手动添加路由配置：

1. 安装 Vue Router
在项目根目录下运行以下命令安装 Vue Router：

yarn add vue-router@4

2. 创建路由配置文件
在 src 目录下创建一个 router 文件夹，并添加一个 index.js 文件，用于配置路由。
示例：src/router/index.js

复制代码
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import HelloWorld from '../components/HelloWorld.vue';

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
];

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

export default router;
复制代码

3. 在主文件中引入路由
在项目的入口文件src/main.ts中引入路由配置，并挂载到 Vue 应用实例上。
示例：src/main.ts

复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from '../src/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');
复制代码

4. 在 App.vue 中使用 <router-view>
在 App.vue 中使用 <router-view> 来渲染当前匹配的路由组件。
示例：src/App.vue

复制代码
<script setup lang="ts">
</script>

<template>
  <div>
    <router-view />
  </div>
</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>
复制代码

5. 创建路由对应的组件
在 src/views 目录下创建对应的组件文件（如 Home.vue），并定义内容。
示例：src/views/Home.vue

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the Home page!</p>
  </div>
</template>

6. 运行项目
运行项目以验证路由是否正常工作：

yarn dev

 

访问 http://localhost:5173，效果如下：

 

访问 http://localhost:5173/home，效果如下：

 

posted @   肖祥  阅读(65)  评论(0)  编辑  收藏  举报
相关博文：
· ubuntu 安装node
· vue组件之间共享数据
· Vite创建Vue3项目
· Vue3 - Vite 安装与创建 vue3 项目
· 使用vite创建vue3项目
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
历史上的今天：
2018-08-31 python 全栈开发，Day115(urlencode,批量操作,快速搜索,保留原搜索条件,自定义分页,拆分代码)
点击右上角即可分享
微信分享提示