[vue/vite]在vscode中使用vite手动创建vue项目

/ 9,001评论 / 35413阅读 / 14点赞

* vite是什么?

* 一个前端的开发构建工具

* 当我们的项目组件变大时,会自觉的分文件、分组件等操作,缩减单文件的大小、增加可维护性,vite则可以帮我们管理,并且它有很多插件帮助我们开发。

初始化

安装vite依赖

安装vue的依赖

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <!-- 引用的js文件位置 -->
    <script type="module" src=""></script>
</body>
</html>

创建main.js

    <!-- 引用的js文件 -->
    <script type="module" src="./src/main.js"></script>

尝试让它跑起来(1)

创建App.vue

<template>
    <div>
        你好 coolight
    </div>
</template>

在main.js中创建vue,安装vitejs

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')
import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"

export default defineConfig({
    plugins:[
        Vue()
    ]
})

结语

  1. Michaelphime说道:

    AC Milan https://italy.milan-ar.com is one of the most successful and decorated football clubs in the world.

  2. Charlesimify说道:

    Ремонт плоской кровли https://remontiruem-krovly.ru в Москве, цена работы за 1 м?. Прайс лист на работы под ключ, отзывы и фото.

  3. ThomasEnawl说道:

    наклейки на заказ https://salavat-rik.ru

  4. Dnrtacp说道:

    Здравствуйте!
    Купить документ о получении высшего образования можно у нас в Москве.
    ast-diplom24.ru/kupit-diplom-o-srednem-obrazovanii
    Хорошей учебы!

  5. StevenSof说道:

    Thai Company Directory https://thaicorporates.com List of companies and business information.

  6. Jamesjer说道:

    ciprofloxacin 500 mg tablet price: buy cipro – buy cipro online without prescription

  7. Jamesjer说道:

    where can i buy clomid without prescription: can you buy cheap clomid now – how to buy cheap clomid no prescription

  8. Diplomi_qnSa说道:

    купить диплом о среднем образовании в новокузнецке mandiplomik.ru .

  9. Diplomi_zrol说道:

    Привет!
    Купить документ о получении высшего образования вы имеете возможность у нас.
    ast-diplomas.com/kupit-diplom-perm 

  10. Lazrprt说道:

    Добрый день!
    Приобрести диплом любого ВУЗа.
    licomklicu.ru/read-blog/885

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注