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

* vite是什么？
* 一个前端的开发构建工具
* 当我们的项目组件变大时，会自觉的分文件、分组件等操作，缩减单文件的大小、增加可维护性，vite则可以帮我们管理，并且它有很多插件帮助我们开发。

初始化

创建一个文件夹，比如这里创建一个叫 mimicrymusic 的文件夹：

然后进入这个文件夹，或是把它拖进vscode中：

可以进VSCode内，使用终端运行以下命令：

初始化生成包配置文件：npm init -y
- 生成package.json：

-
- 内容如下：

-
- 其中：
- name：项目名
- version：版本号
- description：项目描述
- main：js入口
- scripts：配置用于npm的命令
- keywords：（可以不要）
- author：作者信息（可以不要）
- license：开源协议

安装vite依赖

在终端中执行命令：npm i vite -D
安装vite的开发环境依赖：

等待一段时间的下载：

下载完成后我们刚刚的包配置文件package.json中就会有自动增加一个vite的依赖：

安装vue的依赖

在终端中执行命令：npm i vue
等待安装完成以后，package.json中就会自动增加vue的配置：

创建index.html

在项目的根位置，即和package.json同级的位置创建一个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>

正如上面代码中注释所说，script标签引入了一个js文件到index.html，但我们还没有指定引入哪一个js文件，下面我们将创建这个文件，然后在引入。

创建main.js

在项目根位置创建src目录，然后在src内创建main.js文件：

里面我们可以先随便写一句输出： console.log("hello coolight");
保存文件
在我们刚刚的index.html中引入main.js文件：

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

在package.json中配置npm命令，即把里面的scripts的内容改为 "dev" : "vite"

尝试让它跑起来（1）

在终端中敲 npm run dev，就会有如下信息提示
键盘按住ctrl，然后鼠标左键点击终端里图中框起来的链接（不要点我的图，点你的终端里的！！！）：

它就会跳转到浏览器，显示我们刚刚写的页面
一片空白则是正常的，因为我们的页面并没有写东西
我们的js也只写了一句输出，这时候要在浏览器中打开控制台看看有没有这句输出
- 浏览器中来到我们写的页面
- 在浏览器中按一下键盘F12键
- 浏览器就会弹出一个窗口：

此时点击控制台，就可以看见我们的main.js的输出了：

创建App.vue

在src目录下，新建 App.vue 文件：

内容可以随便写点，比如：

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

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

修改main.js的内容为：

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

const app = createApp(App)

app.mount('#app')

可以看到，我们在main.js中创建的vue需要一个挂载点，在html中一个id为 app 的元素
所以我们需要在index.html中增加一个 <div id="app"></div> :

保存文件
此时你可能发现，欸vite好像报错了：
- [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

浏览器里我们的页面也有报错：

它的意思很明显，需要我们去安装 @vitejs/plugin-vue，因为浏览器正常执行不了vue文件，所以需要安装插件来编译解析。
那么我们就来安装它。
如果你的终端vite还在运行，也就是没有显示提示让你输入，就像这样：

那么就按键盘ctrl + c ，停止掉vite
- 它会问你 终止批处理操作吗(Y/N)?
- 我们输入 y ，然后回车即可

然后再输入 npm i @vitejs/plugin-vue -D
等待下载安装：

然后在项目根目录创建vite的配置文件：vite.config.js

里面写如下配置：

import { defineConfig } from "vite"
import Vue from "@vitejs/plugin-vue"

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

保存文件
在终端中执行 npm run dev
然后回到浏览器中看看我们的页面，就会发现已经正常了！

结语

这个是手动配置的方法，其实有很简单的一键操作。
后面我们聊聊给手动配置路由router，状态管理pinia等

Marcelcrolf说道：

2024年4月23日下午6:46

http://canadaph24.pro/# canadian pharmacy 24

回复
Scottvaw说道：

2024年4月23日下午5:18

Nihai Dönemin En Beğenilen Bahis Sitesi: Casibom

Bahis oyunlarını sevenlerin artık duymuş olduğu Casibom, son dönemde adından sıkça söz ettiren bir şans ve casino sitesi haline geldi. Türkiye’nin en başarılı bahis sitelerinden biri olarak tanınan Casibom’un haftalık bazda cinsinden değişen açılış adresi, piyasada oldukça yenilikçi olmasına rağmen emin ve kar getiren bir platform olarak öne çıkıyor.

Casibom, yakın rekabeti olanları geride bırakıp köklü kumarhane platformların önüne geçmeyi başarıyor. Bu alanda eski olmak gereklidir olsa da, oyuncularla etkileşimde olmak ve onlara erişmek da benzer derecede önemli. Bu noktada, Casibom’un gece gündüz servis veren gerçek zamanlı destek ekibi ile rahatça iletişime geçilebilir olması önemli bir artı sağlıyor.

Hızla genişleyen katılımcı kitlesi ile dikkat çeken Casibom’un arkasındaki başarı faktörleri arasında, yalnızca kumarhane ve gerçek zamanlı casino oyunlarıyla sınırlı kısıtlı olmayan geniş bir hizmetler yelpazesi bulunuyor. Atletizm bahislerinde sunduğu geniş alternatifler ve yüksek oranlar, oyuncuları cezbetmeyi başarılı oluyor.

Ayrıca, hem atletizm bahisleri hem de bahis oyunları oyuncularına yönelik sunulan yüksek yüzdeli avantajlı ödüller da ilgi çekiyor. Bu nedenle, Casibom çabucak alanında iyi bir tanıtım başarısı elde ediyor ve büyük bir katılımcı kitlesi kazanıyor.

Casibom’un kazanç sağlayan promosyonları ve tanınırlığı ile birlikte, web sitesine üyelik nasıl sağlanır sorusuna da atıfta bulunmak elzemdir. Casibom’a hareketli cihazlarınızdan, bilgisayarlarınızdan veya tabletlerinizden internet tarayıcı üzerinden kolaylıkla ulaşılabilir. Ayrıca, sitenin mobil uyumlu olması da önemli bir artı sunuyor, çünkü artık hemen hemen herkesin bir akıllı telefonu var ve bu akıllı telefonlar üzerinden hızlıca ulaşım sağlanabiliyor.

Hareketli tabletlerinizle bile yolda canlı tahminler alabilir ve yarışmaları gerçek zamanlı olarak izleyebilirsiniz. Ayrıca, Casibom’un mobil cihazlarla uyumlu olması, ülkemizde kumarhane ve casino gibi yerlerin yasal olarak kapatılmasıyla birlikte bu tür platformlara erişimin büyük bir yolunu oluşturuyor.

Casibom’un emin bir bahis web sitesi olması da önemli bir fayda sağlıyor. Ruhsatlı bir platform olan Casibom, sürekli bir şekilde keyif ve kar sağlama imkanı sunar.

Casibom’a abone olmak da son derece rahatlatıcıdır. Herhangi bir belge koşulu olmadan ve ücret ödemeden web sitesine kolaylıkla üye olabilirsiniz. Ayrıca, web sitesi üzerinde para yatırma ve çekme işlemleri için de çok sayıda farklı yöntem mevcuttur ve herhangi bir kesim ücreti talep edilmemektedir.

Ancak, Casibom’un güncel giriş adresini takip etmek de elzemdir. Çünkü canlı şans ve casino web siteleri popüler olduğu için yalancı siteler ve dolandırıcılar da ortaya çıkmaktadır. Bu nedenle, Casibom’un sosyal medya hesaplarını ve güncel giriş adresini düzenli aralıklarla kontrol etmek elzemdir.

Sonuç olarak, Casibom hem itimat edilir hem de kar getiren bir casino web sitesi olarak dikkat çekiyor. Yüksek ödülleri, geniş oyun seçenekleri ve kullanıcı dostu mobil uygulaması ile Casibom, kumarhane hayranları için mükemmel bir platform sunuyor.

回复
CndyPooma说道：

2024年4月23日下午4:42

zofran side effects australia

回复
RickyAlage说道：

2024年4月23日下午4:33

mexican online pharmacies prescription drugs Mexican Pharmacy Online mexico drug stores pharmacies

回复
StevenSen说道：

2024年4月23日下午4:22

indian pharmacy paypal: Generic Medicine India to USA – Online medicine home delivery

回复
Jasonexede说道：

2024年4月23日下午4:16

Всё о радиаторах отопления https://heat-komfort.ru/ – выбор радиатора, монтаж, обслуживание.

回复
Marcelcrolf说道：

2024年4月23日下午4:15

http://mexicoph24.life/# mexico drug stores pharmacies

回复
Michaelsew说道：

2024年4月23日下午4:09

https://canadaph24.pro/# canadian pharmacy world

回复
Scottvaw说道：

2024年4月23日下午2:20

Understanding COSC Accreditation and Its Importance in Horology
COSC Accreditation and its Demanding Criteria
COSC, or the Official Swiss Chronometer Testing Agency, is the official Swiss testing agency that verifies the precision and accuracy of timepieces. COSC accreditation is a sign of quality craftsmanship and dependability in chronometry. Not all timepiece brands follow COSC certification, such as Hublot, which instead adheres to its own stringent criteria with mechanisms like the UNICO, attaining comparable accuracy.

The Science of Precision Chronometry
The core mechanism of a mechanized timepiece involves the mainspring, which delivers energy as it unwinds. This mechanism, however, can be susceptible to environmental factors that may influence its accuracy. COSC-validated movements undergo strict testing—over 15 days in various circumstances (5 positions, 3 temperatures)—to ensure their durability and dependability. The tests assess:

Typical daily rate precision between -4 and +6 seconds.
Mean variation, peak variation levels, and effects of temperature changes.
Why COSC Accreditation Is Important
For timepiece enthusiasts and collectors, a COSC-accredited timepiece isn’t just a piece of technology but a demonstration to enduring excellence and precision. It represents a watch that:

Offers excellent dependability and accuracy.
Provides assurance of superiority across the whole design of the timepiece.
Is apt to hold its value more efficiently, making it a wise choice.
Popular Timepiece Manufacturers
Several renowned brands prioritize COSC certification for their timepieces, including Rolex, Omega, Breitling, and Longines, among others. Longines, for instance, offers collections like the Archive and Soul, which highlight COSC-certified mechanisms equipped with innovative substances like silicone equilibrium springs to boost durability and performance.

Historic Context and the Evolution of Chronometers
The idea of the chronometer dates back to the requirement for precise chronometry for navigational at sea, highlighted by John Harrison’s work in the 18th cent. Since the official establishment of COSC in 1973, the certification has become a yardstick for assessing the precision of luxury timepieces, maintaining a tradition of excellence in watchmaking.

Conclusion
Owning a COSC-certified watch is more than an visual selection; it’s a commitment to excellence and accuracy. For those appreciating precision above all, the COSC certification provides peacefulness of mind, ensuring that each validated watch will function reliably under various conditions. Whether for personal contentment or as an investment, COSC-validated timepieces stand out in the world of horology, carrying on a legacy of meticulous timekeeping.

回复
Marcelcrolf说道：

2024年4月23日下午1:46

http://mexicoph24.life/# buying prescription drugs in mexico

回复
RickyAlage说道：

2024年4月23日下午1:40

mexico pharmacies prescription drugs Online Pharmacies in Mexico buying prescription drugs in mexico online

回复
oborudovan_ocSl说道：

2024年4月23日下午1:12

Оборудование ситуационных центров https://www.oborudovanie-situacionnyh-centrov.ru/ .

回复
Wuziqg说道：

2024年4月23日上午10:59

terbinafine where to buy – order griseofulvin for sale griseofulvin cost

回复
Marcelcrolf说道：

2024年4月23日上午10:28

https://mexicoph24.life/# medicine in mexico pharmacies

回复
RickyAlage说道：

2024年4月23日上午10:24

canadian pharmacy near me Licensed Canadian Pharmacy canada drug pharmacy

回复
Marcelcrolf说道：

2024年4月23日上午8:11

http://canadaph24.pro/# canadian pharmacy sarasota

回复
RickyAlage说道：

2024年4月23日上午7:34

pharmacy in canada Large Selection of Medications from Canada canadian pharmacy 24h com safe

回复
Michaelsew说道：

2024年4月23日上午7:04

http://indiaph24.store/# reputable indian pharmacies

回复
Scottvaw说道：

2024年4月23日上午5:54

網上賭場

回复
Marcelcrolf说道：

2024年4月23日上午5:54

http://indiaph24.store/# reputable indian online pharmacy

回复
RickyAlage说道：

2024年4月23日上午5:12

online pharmacy india buy medicines from India buy prescription drugs from india

回复
Marcelcrolf说道：

2024年4月23日上午3:24

https://canadaph24.pro/# canadian pharmacy meds reviews

回复
Patrickmuh说道：

2024年4月23日上午2:22

Закажите SEO продвижение сайта https://seo116.ru/ в Яндекс и Google под ключ в Москве и по всей России от экспертов. Увеличение трафика, рост клиентов, онлайн поддержка. Комплексное продвижение сайтов с гарантией!

回复
RickyAlage说道：

2024年4月23日上午2:17

purple pharmacy mexico price list mexico pharmacy mexico pharmacy

回复
Marcelcrolf说道：

2024年4月22日下午11:29

https://mexicoph24.life/# mexico pharmacy

回复
RickyAlage说道：

2024年4月22日下午10:27

canadian pharmacy meds canadian pharmacies canadianpharmacymeds com

回复
Michaelsew说道：

2024年4月22日下午10:04

http://mexicoph24.life/# medication from mexico pharmacy

回复
LanceWeria说道：

2024年4月22日下午7:54

blacksprut2site xyz
BlackSprut – это будущее! Используй Блэкспрут для быстрой покупки/продажи различных товаров. Быстрый и безопасный доступ к Блекспрут через TOR зеркало.

回复
StevenSen说道：

2024年4月22日下午7:47

mexican rx online: mexico pharmacy – buying prescription drugs in mexico online

回复
Marcelcrolf说道：

2024年4月22日下午7:30

https://indiaph24.store/# reputable indian online pharmacy

回复
RickyAlage说道：

2024年4月22日下午6:47

mail order pharmacy india buy medicines from India online shopping pharmacy india

回复
Marcelcrolf说道：

2024年4月22日下午4:07

http://canadaph24.pro/# canadian neighbor pharmacy

回复
Michaelsew说道：

2024年4月22日下午3:48

http://mexicoph24.life/# reputable mexican pharmacies online

回复
RickyAlage说道：

2024年4月22日下午3:35

mexican drugstore online mexico pharmacy mexican pharmaceuticals online

回复
Marcelcrolf说道：

2024年4月22日下午1:23

https://canadaph24.pro/# certified canadian international pharmacy

回复
RickyAlage说道：

2024年4月22日下午12:54

Online medicine order Cheapest online pharmacy indian pharmacy

回复
Vseido说道：

2024年4月22日下午12:13

terbinafine price – fulvicin buy online griseofulvin drug

回复
StevenSen说道：

2024年4月22日下午12:08

medicine in mexico pharmacies: mexican pharmacy – medicine in mexico pharmacies

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

回复 https://tessa-murphy.com/regions/Discreet-apartments-in-Haifa.php 取消回复