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

Brucemek说道：

2024年8月6日上午3:58

Интересуешься, как дата рождения влияет на твою жизнь? Попробуй матрица судьбы рассчитать с расшифровкой полностью и получи полную расшифровку онлайн! Этот метод, основанный на нумерологии и старших арканах Таро, поможет тебе понять кармические задачи и выявить скрытые таланты. Введи дату рождения и открой для себя удивительный мир самопознания. Узнай, какие жизненные уроки ждут тебя впереди, и получи ценные рекомендации для достижения гармонии и успеха.

回复
LewisToite说道：

2024年8月6日上午3:22

https://zithromaxbestprice.pro/# purchase zithromax z-pak

回复
Odbjja说道：

2024年8月6日上午3:16

oxcarbazepine 600mg drug – pirfenex order levothroid tablets

回复
LewisToite说道：

2024年8月6日上午3:15

http://nolvadexbestprice.pro/# tamoxifen citrate

回复
Matthewnouts说道：

2024年8月6日上午2:43

buying propecia tablets: order cheap propecia tablets – buying propecia for sale

回复
Trefrhu说道：

2024年8月6日上午2:32

Привет!
Покупка диплома о среднем полном образовании: как избежать мошенничества?
mandiplomik.ru/kupit-diplom-novosibirsk
Всегда вам поможем!.

回复
Matthewnouts说道：

2024年8月6日上午2:05

generic propecia price: cost of propecia without rx – buying generic propecia tablets

回复
Diplomi_ugol说道：

2024年8月6日上午1:16

Привет, друзья!
Приобрести документ университета вы сможете в нашей компании в Москве.
rushkas-diplomy.ru

回复
Treflyd说道：

2024年8月6日上午1:04

Здравствуйте!
Как получить диплом о среднем образовании в Москве и других городах
csleague.ca/диплом-о-среднем-образовании-купить-н
Рады оказать помощь!.

回复
Mazrikz说道：

2024年8月6日上午1:00

Привет!
Аттестат школы купить официально с упрощенным обучением в Москве
rushkadiplomik.ru

回复
Matthewnouts说道：

2024年8月6日上午12:52

tamoxifen men: common side effects of tamoxifen – tamoxifen and antidepressants

回复
Mazrhpi说道：

2024年8月6日上午12:44

Привет!
Официальная покупка диплома вуза с сокращенной программой в Москве
rushkadiplomik.ru

回复
LewisToite说道：

2024年8月5日下午11:48

http://nolvadexbestprice.pro/# nolvadex for pct

回复
Danrhbc说道：

2024年8月5日下午10:50

Привет, друзья!
Мы предлагаем дипломы психологов, юристов, экономистов и других профессий.
melmann.site/tag/куплю-дипломы-ветеринара
Окажем помощь!.

回复
Diplomi_hnol说道：

2024年8月5日下午10:18

Привет, друзья!
Купить документ о получении высшего образования можно у нас.
rushkas-diploms.ru

回复
Trefnwt说道：

2024年8月5日下午10:11

Привет!
Узнайте стоимость диплома высшего и среднего образования и процесс получения
nigerianelections2019.com/купить-диплом-проверенные-способы
Поможем вам всегда!.

回复
Matthewnouts说道：

2024年8月5日下午10:04

tamoxifen generic: tamoxifen cost – nolvadex only pct

回复
Mazrpig说道：

2024年8月5日下午9:50

Добрый день!
Как приобрести диплом техникума с минимальными рисками
rushkadiplomik.ru

回复
NathanIdeft说道：

2024年8月5日下午9:30

Link pyramid, tier 1, tier 2, tier 3
Primary – 500 references with placement embedded in pieces on content sites

Secondary – 3000 domain Redirected connections

Lower – 20000 links mix, feedback, entries

Implementing a link structure is useful for web crawlers.

Necessitate:

One link to the website.

Search Terms.

Valid when 1 keyword from the content heading.

Highlight the additional feature!

Important! Top references do not coincide with Secondary and Tier 3-level connections

A link hierarchy is a device for enhancing the circulation and backlink portfolio of a internet domain or online community

回复
LewisToite说道：

2024年8月5日下午8:58

https://propeciabestprice.pro/# propecia rx

回复
Diplomi_qtol说道：

2024年8月5日下午8:57

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

回复
Lazrkaf说道：

2024年8月5日下午8:55

Добрый день!
Мы готовы предложить дипломы любой профессии по приятным тарифам.
lookeify.com/read-blog/4706_zhelaete-zakazat-diplom-u-proverennogo-ispolnitelya-zhdem-vas

回复
KevinBlupt说道：

2024年8月5日下午8:34

nolvadex 20mg: does tamoxifen make you tired – tamoxifen benefits

回复
Xazrhor说道：

2024年8月5日下午7:47

Привет, друзья!
Приобрести документ о получении высшего образования
landik-diploms-srednee.ru/diplom-s-reestromkupit-kupit

回复
LewisToite说道：

2024年8月5日下午7:26

https://propeciabestprice.pro/# order generic propecia no prescription

回复
Sazrgvf说道：

2024年8月5日下午6:59

Добрый день!
Диплом юриста
agrofly.ch/доступные_дипломы_по_выгодным_ценам

回复
Matthewnouts说道：

2024年8月5日下午6:53

buying generic propecia: generic propecia without rx – cost of cheap propecia without a prescription

回复
Matthewnouts说道：

2024年8月5日下午5:40

nolvadex d: tamoxifen for sale – liquid tamoxifen

回复
Prodvijenie saitov v Moskve_oaOt说道：

2024年8月5日下午5:31

продвижение сайтов по москве в топ https://prodvizhenie-sajtov-v-moskve119.ru .

回复
KevinBlupt说道：

2024年8月5日下午5:26

prednisone 50 mg tablet cost: cheap prednisone online – average cost of prednisone

回复
youtube downloader说道：

2024年8月5日下午5:19

Nice post. I learn something totally new and challenging on websites I stumbleupon on a daily basis. It will always be helpful to read through content from other authors and practice something from other sites.

回复
Mazrkqs说道：

2024年8月5日下午5:04

Добрый день!
Официальное получение диплома техникума с упрощенным обучением в Москве
rushkadiplomik.ru

回复
Sazrpab说道：

2024年8月5日下午5:02

Здравствуйте!
Диплом по специальности на выбор
oren.kabb.ru/viewtopic.php?f=50&t=34246

回复
Tooft说道：

2024年8月5日下午4:49

Harry Kane is England’s record goal scorer with 62 goals in our top England goal scorers chart. When the match starts, you will be able to follow Portugal vs Finland live score, standings, minute by minute updated live results and match statistics. The appearance of any specific player is not guaranteed and is subject to change without notice. The UEFA Europa League brought some amazing moments in the 2021 22 season, and now people are looking toward the 2022 23 Europa League Campaign. The appearance of any specific player is not guaranteed and is subject to change without notice. DRAW: ATTICGO Bm Elche host MSK IUVENTA Michalovce, while Valur welcome Olympiacos, in EHF European Cup final first legs MEDIA RELEASE: Admiral secured as official partner whilst Lidl and Gorenje expand to women’s event
https://andresiicz592583.thenerdsblog.com/32951863/everton-beat-liverpool
The beauty of any competitive sports is how it can amplify character – and this certainly cuts both ways. I’ve learned valuable lessons from 20+ years of competitive sports that have stuck with me to this day. I know I’m not alone in this. I’d love to hear what lessons that have stuck with you. AN ARGENTINE goalkeeper left football fans in disbelief after scoring from inside his OWN six-yard box. &copy 2024 Sigma Defense Systems THE BIGGER PICTURE: Meant to reduce taunting and the distraction of shot-takers, the change to the rules come after Argentina goalkeeper Emiliano Martinez’s polarising antics to distract France players during the penalty shootout in the World Cup final last year as the South American nation went on to win the competition. The ball flew into the bottom corner on the goalkeeper’s side and the 24-year-old reacted with the sort of disbelieving delight that you would expect from a goalkeeper scoring a set-piece for the first time. Rogério only went on to score another two that season but there was no doubt about his ability to convert from dangerous dead-ball situations.

回复
prodvizhen_sqpl说道：

2024年8月5日下午4:36

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

回复
LewisToite说道：

2024年8月5日下午4:30

https://cytotecbestprice.pro/# buy cytotec pills

回复
Prodvijenie saitov v Moskve_emOt说道：

2024年8月5日下午3:54

продвижение сайтов в москве и области продвижение сайтов в москве и области .

回复
Prodvijenie saitov v Moskve_reOt说道：

2024年8月5日下午3:31

продвижение сайтов в москве в яндекс и гугл https://prodvizhenie-sajtov-v-moskve119.ru .

回复
Prodvijenie saitov v Moskve_odOt说道：

2024年8月5日下午3:16

создание и продвижение сайтов в москве создание и продвижение сайтов в москве .

回复
Prodvijenie saitov v Moskve_ieOt说道：

2024年8月5日下午3:12

продвижение и раскрутка сайтов в москве продвижение и раскрутка сайтов в москве .

回复
Prodvijenie saitov v Moskve_wbOt说道：

2024年8月5日下午2:52

продвижение сайтов в москве https://www.prodvizhenie-sajtov-v-moskve119.ru .

回复
Matthewnouts说道：

2024年8月5日下午2:48

where can you buy prednisone: prednisone uk over the counter – prednisone 60 mg tablet

回复
Prodvijenie saitov v Moskve_qsOt说道：

2024年8月5日下午2:36

продвижение сайтов цена в москве https://prodvizhenie-sajtov-v-moskve119.ru/ .

回复
Prodvijenie saitov v Moskve_wbOt说道：

2024年8月5日下午2:27

seo продвижение сайтов в москве seo продвижение сайтов в москве .

回复
Prodvijenie saitov v Moskve_exOt说道：

2024年8月5日下午2:14

поисковое продвижение сайтов в москве поисковое продвижение сайтов в москве .

回复
Prodvijenie saitov v Moskve_saOt说道：

2024年8月5日下午2:02

продвижение и раскрутка сайтов в москве продвижение и раскрутка сайтов в москве .

回复
Xazrrze说道：

2024年8月5日下午1:32

Привет, друзья!
Заказать документ ВУЗа
landik-diploms-srednee.ru/kupit-diplom-v-voronezhe

回复
Robertperma说道：

2024年8月5日下午12:47

zithromax z-pak purchase zithromax z-pak zithromax antibiotic

回复
Robertperma说道：

2024年8月5日下午12:44

zithromax 500 buy generic zithromax no prescription zithromax over the counter uk

回复
Pereezd v Ispaniu_dnel说道：

2024年8月5日下午12:30

Переезд в Испанию Переезд в Испанию .

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

发表回复 取消回复

发表回复取消回复