[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等

Arnoldscava说道：

2024年7月31日上午3:48

mexico drug stores pharmacies best online pharmacies in mexico reputable mexican pharmacies online

回复
Waynetar说道：

2024年7月31日上午3:40

п»їbest mexican online pharmacies: mexican drugstore online – mexican mail order pharmacies

回复
Videosteni v Moskve_jqKi说道：

2024年7月31日上午3:38

видеостена под ключ videosteny-pod-kljuch.ru .

回复
DominicHOr说道：

2024年7月31日上午3:31

best online pharmacies in mexico: mexican pharmaceuticals online – buying prescription drugs in mexico

回复
Sazrezo说道：

2024年7月31日上午3:20

Здравствуйте!
Мы изготавливаем дипломы психологов, юристов, экономистов и других профессий по невысоким тарифам. Цена зависит от конкретной специальности, года получения и образовательного учреждения. Всегда стараемся поддерживать для клиентов адекватную ценовую политику. Важно, чтобы документы были доступными для подавляющей массы граждан.
http://www.stagebox.uk/купить-диплом-получить-оригинальный/

回复
NelsonSaIlk说道：

2024年7月31日上午3:16

buying prescription drugs in mexico online: buying prescription drugs in mexico – medication from mexico pharmacy

回复
Arnoldscava说道：

2024年7月31日上午3:10

pharmacies in mexico that ship to usa medication from mexico pharmacy best online pharmacies in mexico

回复
Percyagene说道：

2024年7月31日上午2:53

AI Nude Generator https://ainudegenerator.app Transform Photos with AI Nude App.

回复
NelsonSaIlk说道：

2024年7月31日上午2:32

medicine in mexico pharmacies: buying prescription drugs in mexico online – mexico drug stores pharmacies

回复
Diplomi_lbol说道：

2024年7月31日上午2:19

Здравствуйте!
Купить документ ВУЗа можно в нашей компании в столице.
diplomyx.com/kupit-diplom-tehnikuma-kolledzha

回复
prodvizhen_vxpl说道：

2024年7月31日上午1:27

заказать seo аудит москва prodvizhenie-sajtov15.ru .

回复
prodvizhen_ckpl说道：

2024年7月31日上午1:19

seo продвижение сайта https://prodvizhenie-sajtov15.ru .

回复
NelsonSaIlk说道：

2024年7月31日上午1:09

mexico drug stores pharmacies: buying prescription drugs in mexico – reputable mexican pharmacies online

回复
prodvizhen_pcpl说道：

2024年7月31日上午1:08

продвижение англоязычных сайтов http://www.prodvizhenie-sajtov15.ru .

回复
prodvizhen_blpl说道：

2024年7月31日上午12:56

заказать сео аудит https://www.prodvizhenie-sajtov15.ru/ .

回复
prodvizhen_kipl说道：

2024年7月31日上午12:50

продвижение англоязычных сайтов https://prodvizhenie-sajtov15.ru .

回复
prodvizhen_fupl说道：

2024年7月31日上午12:42

заказать поисковый аудит http://www.prodvizhenie-sajtov15.ru/ .

回复
Arnoldscava说道：

2024年7月31日上午12:32

medicine in mexico pharmacies mexican mail order pharmacies mexican rx online

回复
Waynetar说道：

2024年7月31日上午12:31

mexican pharmaceuticals online: reputable mexican pharmacies online – mexican drugstore online

回复
Waynetar说道：

2024年7月31日上午12:28

medication from mexico pharmacy: buying from online mexican pharmacy – mexico pharmacies prescription drugs

回复
Skachat igri na android_ylkt说道：

2024年7月30日下午11:39

игры на андроид игры на андроид .

回复
Dnrtute说道：

2024年7月30日下午11:36

Добрый день!
Приобрести документ о получении высшего образования вы сможете в нашей компании в столице.
diplomyx24.ru/kupit-diplom-moskva
Хорошей учебы!

回复
prodvizhen_iwpl说道：

2024年7月30日下午11:25

продвижение сайтов http://prodvizhenie-sajtov15.ru/ .

回复
Skachat igri na android_kdkt说道：

2024年7月30日下午11:18

скачать игры на телефон скачать игры на телефон .

回复
Skachat igri na android_tkkt说道：

2024年7月30日下午11:05

скачать новые игры на андроид скачать новые игры на андроид .

回复
Skachat igri na android_ndkt说道：

2024年7月30日下午11:00

лучшие игры на android http://www.android-games-download.ru .

回复
Arnoldscava说道：

2024年7月30日下午10:58

mexican online pharmacies prescription drugs medicine in mexico pharmacies mexican mail order pharmacies

回复
Skachat igri na android_cdkt说道：

2024年7月30日下午10:47

скачать игры на телефон бесплатно без интернета скачать игры на телефон бесплатно без интернета .

回复
Skachat igri na android_ahkt说道：

2024年7月30日下午10:34

игры скачать на android игры скачать на android .

回复
Skachat igri na android_vlkt说道：

2024年7月30日下午10:27

скачать игры без рекламы на андроид android-games-download.ru .

回复
Skachat igri na android_hvkt说道：

2024年7月30日下午10:19

скачать топ игр на андроид скачать топ игр на андроид .

回复
porno kollekciya_dzKi说道：

2024年7月30日下午10:18

порно коллекции бесплатно http://www.porn-library.ru .

回复
NorbertRuisk说道：

2024年7月30日下午10:14

富遊娛樂城評價 : 全台唯一5分鐘內快速出金，網紅一致好評看這篇!

富遊娛樂城以玩家需求為核心對於品牌保證安全、公正、真實、順暢，成為玩家在線上賭場最佳合作夥伴，擁有各大網紅、網友評價保證出金。

富遊是台灣註冊人數第一名的線上賭場，富遊是台灣最受歡迎的線上賭場，已吸引超過30萬玩家註冊。首次存款1000元贈1000元獎金，且只需1倍的流水。新手玩家還可獲得免費體驗金，體驗館內的所有遊戲。富遊也時常舉辦不同優惠活動，沒有困難的下注流水要求，相當適合新手與資深玩家遊玩。

富遊娛樂城平台詳情資訊
賭場名稱 : RG富遊
創立時間 : 2019年
博弈執照 : 馬爾他牌照(MGA)認證、英屬維爾京群島(BVI)認證、菲律賓(PAGCOR)監督競猜牌照
遊戲類型 : 真人百家樂、運彩投注、電子老虎機、彩票遊戲、棋牌遊戲、捕魚機遊戲
合作廠商 : 22家遊戲平台商
支付平台 : 各大銀行、四大便利超商
存取速度 : 存款15秒 / 提款3-5分
單筆提款金額 : 最低1000-100萬
合作廠商 : 22家遊戲平台商
軟體下載 : 支援APP，IOS、安卓(Android)

富遊娛樂城優缺點評價
優點缺點
台灣註冊人數NO.1線上賭場
首儲1000贈1000只需一倍流水
擁有體驗金免費體驗賭場
網紅部落客推薦保證出金線上娛樂城
需透過客服申請體驗金

富遊娛樂城評價有哪些網紅推薦
富遊娛樂城擁有多數網紅推薦，知名度是目前數一數二的娛樂城平台，玩家也可無需擔心娛樂城出金問題，有眾多玩家的評價保證，又有娛樂城體驗金可以免費試玩。詳細可觀看富遊娛樂城評價推薦人，數十位網紅評價推薦

富遊娛樂城存取款方式
存款方式取款方式
提供四大超商(全家、7-11、萊爾富、ok超商)
虛擬貨幣ustd存款
銀行轉帳(各大銀行皆可)
網站內申請提款及可匯款至綁定帳戶
現金1:1出金

富遊娛樂城是否安全?
富遊娛樂城非常注重玩家的安全性。他們使用與銀行相同的《TLS加密技術》來保護玩家的財物，並且持有合法的國際認證執照。官方也承諾確保會員的個人資料安全。各大部落客也實測網站存取款狀況，富遊娛樂城是一個相當安全的線上賭場平台。

如何判斷娛樂城評價是否詐騙?
網站架構及經營方式
金流三方提供取道皆為有公信力三方平台
合理優惠流水洗碼量
畢竟博弈市場不斷開新的線上娛樂城，每一家特色都不同，還不知道如何選擇娛樂城的玩家，透過我們專業分析介紹，建議可以加入富遊娛樂城體驗看看，保證出金、畫面操作簡單、遊戲豐富多元。

選擇一間正確的娛樂城會讓你當作在投資一般，選擇錯誤的娛樂城只會讓你當作在賭博。如果投注個娛樂城遊戲，請前往富遊娛樂城下注

回复
Skachat igri na android_kmkt说道：

2024年7月30日下午10:10

игры скачать на android игры скачать на android .

回复
Lazrysp说道：

2024年7月30日下午10:07

Добрый день!
Купить диплом любого ВУЗа.
xn--80ajjabicd1cty1a4fvb.xn--p1ai/blogs/1/bolshoy-assortiment-dokumentov-v-znamenitom-internetmagazine.php

回复
NelsonSaIlk说道：

2024年7月30日下午9:55

buying prescription drugs in mexico: mexican drugstore online – mexican online pharmacies prescription drugs

回复
Lazrecs说道：

2024年7月30日下午9:32

Привет, друзья!
Приобрести диплом любого ВУЗа.
getdlight.com/en/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=143

回复
Waynetar说道：

2024年7月30日下午9:31

reputable mexican pharmacies online: medication from mexico pharmacy – pharmacies in mexico that ship to usa

回复
DominicHOr说道：

2024年7月30日下午9:25

buying prescription drugs in mexico online: buying prescription drugs in mexico online – mexican border pharmacies shipping to usa

回复
Arnoldscava说道：

2024年7月30日下午9:21

reputable mexican pharmacies online mexican drugstore online mexican drugstore online

回复
Dnrtkal说道：

2024年7月30日下午9:07

Привет, друзья!
Заказать документ о получении высшего образования вы имеете возможность у нас.
diploms-x.com/kupit-diplom-voronezh
Удачи!

回复
Lazrpww说道：

2024年7月30日下午8:58

Добрый день!
Мы изготавливаем дипломы любых профессий по разумным ценам.
pro-eltern.de/read-blog/145_hotite-zakazat-attestat-u-nadezhnogo-proizvoditelya-zhdem-vas

回复
Waynetar说道：

2024年7月30日下午8:48

buying from online mexican pharmacy: medicine in mexico pharmacies – mexican online pharmacies prescription drugs

回复
DominicHOr说道：

2024年7月30日下午8:43

reputable mexican pharmacies online: mexican rx online – mexico pharmacies prescription drugs

回复
Skachat igri na android_oikt说道：

2024年7月30日下午8:30

скачать игры на телефон бесплатно без интернета скачать игры на телефон бесплатно без интернета .

回复
Arnoldscava说道：

2024年7月30日下午8:08

buying prescription drugs in mexico online mexican rx online best online pharmacies in mexico

回复
RichardMonge说道：

2024年7月30日下午7:54

https://mexicandeliverypharma.online/# mexico drug stores pharmacies

回复
Arnoldscava说道：

2024年7月30日下午7:34

п»їbest mexican online pharmacies mexico pharmacies prescription drugs mexican pharmacy

回复
audit_vwsa说道：

2024年7月30日下午7:32

Надежный аудит для бизнеса в Уфе, для вашей компании.
Ищете аудит в Уфе?, Наши специалисты ждут вас.
Оптимизация бизнеса с помощью аудита, вам понравится.
Мы предоставим вам аудит, узнайте больше.
Комплексный аудит в Уфе, доступно для всех.
Ваш бизнес с нами под защитой, высокое качество услуг.
Проверка финансов в Уфе, все под контролем.
Как выбрать аудитора в Уфе?, приходите к нам.
Качественный аудит в Уфе по доступной цене, заказывайте услуги.
Ваш бизнес — наша забота, заботьтесь о своих финансах.
Аудиторские услуги в Уфе для вашего бизнеса, проверенные решения.
Доступный аудит для всех в Уфе, выбирайте качество.
Проверьте свои финансы с нами, это эффективно.
Аудит и налоговые проверки в Уфе, ваш успех — наша цель.
Оптимизация процессов с помощью аудита, получите ответ у нас.
Аудит: ваши средства под защитой, просто и надежно.
Аудит — ключ к успеху вашего предприятия, с нами все будет в порядке.
Получите помощь наших экспертов, оставайтесь в безопасности.
Обучение по аудиту для начинающих, мы поделимся опытом.
Выбор аудитора: на что обратить внимание?, мы расскажем все тонкости.
услуги аудиторской фирмы https://auditorbuhgalter.ru/ .

回复
Waynetar说道：

2024年7月30日下午7:24

mexican rx online: mexican border pharmacies shipping to usa – best online pharmacies in mexico

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

发表回复 取消回复

发表回复取消回复