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