vite创建vue3项目
概述
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。
官网：https://cn.vitejs.dev/guide/
安装vite
最新版本的vite，要求nodejs版本，必须是18.x以上，所以需要确保你的node版本足够高。
本文使用nodejs最新版本v22.7.0
yarn add vite
创建项目
使用国内镜像
npm config set registry=https://registry.npmmirror.com
安装最新版vite
npm install -g vite@latest
创建项目
yarn create vite
输入项目名：vite_test
框架选择：vue
语言选择：JavaScript
√ Project name: ... vite_test √ Select a framework: » Vue √ Select a variant: » JavaScript
创建成功后，根据提示，执行3个命令
Done. Now run: cd vite_test yarn yarn dev
执行成功后，提示如下：
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
yarn add -D sass-embedded
安装Element Plus
yarn add -D element-plus
导入Element Plus
修改文件src\main.js，注意红色字体是修改的
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，注意红色字体部分
...
<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，直接替换所有内容：
<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { Refresh } from '@element-plus/icons-vue';
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}
let username = ref('')
let email = ref('')
const query = () => {}
const tableData = [
{ username:"李莲花",
sex:"男",
age:38,
email:"123456@qq.com",
phone:12345678901,
address:"莲花楼",
},
{
username:"方多病",
sex:"男",
age:23,
email:"fdb@qq.com",
phone:1589999999,
address:"天机堂",
},
{
username:"笛飞声",
sex:"男",
age:39,
email:"dfs@153.com",
phone:13266666666,
address:"金鸳盟",
},
{
username:"乔婉娩",
sex:"女",
age:32,
email:"qwm@163.com",
phone:12345678901,
address:"四顾门",
},
{
username:"角丽谯",
sex:"女",
age:32,
email:"jlq@163.com",
phone:1258888888,
address:"金鸳盟",
},
]
</script>
<template>
<el-card>
<div class="query-input">
<el-input v-model="username" placeholder="请输入用户名"/>
<el-input v-model="email" placeholder="请输入邮箱"/>
<el-button type="primary" @click="query">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button type="danger" @click="query">
<el-icon><Refresh /></el-icon>
重置
</el-button>
</div>
</el-card>
<el-card>
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="username" label="姓名" width="180" />
<el-table-column prop="sex" label="性别" width="180" />
<el-table-column prop="age" label="年龄" width="180" />
<el-table-column prop="email" label="邮箱" width="180" />
<el-table-column prop="phone" label="电话" width="180" />
<el-table-column prop="address" label="地址" />
<el-table-column fixed="right" label="操作" width="180">
<template #default>
<el-button type="primary" size="small"
>编辑</el-button
>
<el-button type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="demo-pagination-block">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[100, 200, 300, 400]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</el-card>
<div class="a">
11
<div class="b">22</div>
</div>
</template>
<style scoped>
.a {
color: red;
.b{
color: blue;
}
}
.el-input {
margin-right: 5px;
width: 300px;
}
.query-input{
display: flex;
justify-content:center
}
.el-card{
margin-bottom: 10px;
}
.demo-pagination-block{
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
刷新页面，效果如下：
效果看起来，还挺漂亮的。
底部的11，22是为了测试css的class嵌套，这种写法在sass中很常用。
在style标签中，不需要特意声明语言是sass，他也自动支持这种写法，加了反而会报错。
添加路由
使用 yarn create vite 创建项目时，默认情况下不会自动创建路由配置，因为 Vite 的目标是提供一个轻量级的项目启动模板，而不包含额外的依赖或配置。
如果你需要在 Vite + Vue 3 项目中使用路由，可以按照以下步骤手动添加路由配置：
1. 安装 Vue Router
在项目根目录下运行以下命令安装 Vue Router：
yarn add vue-router
2. 创建路由配置文件
在 src 目录下创建一个 router 文件夹，并添加一个 index.js 文件，用于配置路由。
示例：src/router/index.js
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，效果如下：
浙公网安备 33010602011771号