vite创建vue3项目 - 博客详情

1.Vite简介

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 还提供了强大的扩展性，可通过其插件 API 和 JavaScript API 进行扩展，并提供完整的类型支持。

2.创建Vue3项目

兼容性注意：Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 npm:

npm create vite@latest

输入项目名称,选择Vue框架:

选择TypeScript:

按照上面提示，进入到 vite-project 项目路径下安装依赖。

# 切换到项目跟目录
cd vite-project
# 安装依赖
npm install

启动Vue3项目:

浏览器打开 http://127.0.0.1:5173/

3.Vue3项目结构介绍

4.编写第一个Vue3案例

上面的代码基础之上，咱们完成第一个vue3的案例，这里咱们要使用vue-router实现路由功能。首先添加必要的依赖。

在package.json添加依赖。

"dependencies": {
    "vue": "^3.4.21",
    "vue-router": "^4.3.3"
  },
"devDependencies": {
  "@types/node": "^20.14.5",
  "@vitejs/plugin-vue": "^5.0.4",
  "typescript": "^5.2.2",
  "vite": "^5.2.0",
  "vue-tsc": "^2.0.6"
}

配置@别名

修改 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置@别名
import {resolve} from "path";

export default defineConfig({
  plugins: [vue()],
  // 解析配置
  resolve: {
    //路径别名
    alias: {
      "@": resolve(__dirname, "./src")
    }
  },
  //修改端口号
  server: {
    port: 80 // 修改为你想要的端口号
  }
})

修改 tsconfig.json

"compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    ...
    // 配置@别名
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },

配置路由。在src目录下新建一个router目录，在router目录下新建一个index.ts文件。

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from "@/components/HelloWorld.vue";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
            path: '/test',
            name: 'test',
            component: () => import('@/components/Test.vue') // 懒加载
        }

    ]
})

export default router

在main.ts（或main.js）中引入路由。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

修改App.vue,使用路由视图。

<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</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.vue

<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>

<template>
  <h1>HelloWorld</h1>
  <hr>
  <div>
    {{ msg }}
  </div>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>

    <div>
      <RouterLink to="/test">Test</RouterLink>
    </div>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

Test.vue

<template>
 <div>
   <h1>Test</h1>
   <hr>
   <div class="card">
     <button type="button" @click="count++">count is {{ count }}</button>
     <p>
       Test.vue
     </p>
   </div>
 </div>

</template>

<script setup lang="ts">

import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>

<style scoped>
</style>

测试路由效果。

5.使用ElementPlus

# NPM
npm install element-plus --save
# 首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import

ElementPlus官网提供了三种用法完整引入、按需引入、手动导入，这里我们使用按需导入（可以使打包文件变小）官方也推荐使用按需引入。

在Vite的配置文件vite.config.ts中添加如下代码：

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置@别名
import {resolve} from "path";
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    // 解析配置
    resolve: {
        //路径别名
        alias: {
            "@": resolve(__dirname, "./src")
        }
    },
    //修改端口号
    server: {
        port: 80 // 修改为你想要的端口号
    },

})

添加一个测试按钮。

<script setup lang="ts">
</script>

<template>
  <el-button type="primary">使用element-plus的第一个按钮</el-button>
</template>

<style scoped>
</style>