概述
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,他也自动支持这种写法,加了反而会报错。