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

DanielGag说道：

2024年7月27日上午5:56

Останні новини світу https://uamc.com.ua про Україну від порталу новин Ukraine Today

回复
Lazrfio说道：

2024年7月27日上午5:45

Привет!
Мы изготавливаем дипломы любых профессий по разумным ценам.
nophlix.com/купить-дипломы-университета/

回复
TerryPooca说道：

2024年7月27日上午5:36

Останні новини https://thingshistory.com зовнішньої та внутрішньої політики в країні та світі.

回复
Davidnic说道：

2024年7月27日上午5:29

Головні новини https://status.net.ua сьогодні, найсвіжіші та останні новини України онлайн

回复
Kevingom说道：

2024年7月27日上午5:09

Корисні та цікаві статті https://sevsovet.com.ua про здоров’я, дозвілля, кар’єру.

回复
kontol besar说道：

2024年7月27日上午5:09

Hi! I just would like to give you a big thumbs up for the excellent info you have got right here on this post. I am coming back to your blog for more soon.

回复
Oborydovanie aktovih zalov_mcEl说道：

2024年7月27日上午4:41

оборудование для сцены актового зала http://oborudovanija-dlja-aktovyh-zalov.ru/ .

回复
Oborydovanie aktovih zalov_ddEl说道：

2024年7月27日上午4:30

акустическое оборудование для актового зала https://www.oborudovanija-dlja-aktovyh-zalov.ru .

回复
Oborydovanie aktovih zalov_ilEl说道：

2024年7月27日上午4:28

оборудование актового зала оборудование актового зала .

回复
JacobSteax说道：

2024年7月27日上午4:21

Discover your perfect stay with WorldHotels-in.com, your ultimate destination for finding the best hotels worldwide! Our user-friendly platform offers a vast selection of accommodations to suit every traveler’s needs and budget. Whether you’re planning a luxurious getaway or a budget-friendly adventure, we’ve got you covered with our extensive database of hotels across the globe. Our intuitive search features allow you to filter results based on location, amenities, price range, and guest ratings, ensuring you find the ideal match for your trip. We pride ourselves on providing up-to-date information and competitive prices, often beating other booking sites. Our detailed hotel descriptions, high-quality photos, and authentic guest reviews give you a comprehensive view of each property before you book. Plus, our secure booking system and excellent customer support team ensure a smooth and worry-free experience from start to finish. Don’t waste time jumping between multiple websites – http://www.WorldHotels-in.com brings the world’s best hotels to your fingertips in one convenient place. Start planning your next unforgettable journey today and experience the difference with WorldHotels-in.com!

回复
Oborydovanie aktovih zalov_fxEl说道：

2024年7月27日上午4:17

акустическое оборудование для актового зала https://www.oborudovanija-dlja-aktovyh-zalov.ru .

回复
Oborydovanie aktovih zalov_ojEl说道：

2024年7月27日上午4:06

оборудование актового зала оборудование актового зала .

回复
Oborydovanie aktovih zalov_hgEl说道：

2024年7月27日上午4:00

оборудование для актовых залов оборудование для актовых залов .

回复
Oborydovanie aktovih zalov_ezEl说道：

2024年7月27日上午3:50

оборудование актового зала оборудование актового зала .

回复
Uazrkvp说道：

2024年7月27日上午3:46

Здравствуйте!
Приобрести диплом любого университета.
sonnick84.blogrenanda.com/34141702/%D0%A7%D1%82%D0%BE-%D1%81%D0%BC%D0%BE%D0%B6%D0%B5%D1%82-%D0%B2-%D0%BD%D0%B0%D1%88%D0%B5-%D0%B2%D1%80%D0%B5%D0%BC%D1%8F-%D0%BF%D1%80%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D0%B0%D0%B2%D0%B8%D1%82%D1%8C-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82-%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD-%D1%81-%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D0%BC%D0%B8

回复
Uazrriu说道：

2024年7月27日上午3:44

Добрый день!
Заказать диплом ВУЗа.
sonnick84.widblog.com/83221260/%D0%A1%D0%BE%D0%B2%D0%B5%D1%82%D1%8B-%D0%BF%D1%80%D0%BE%D1%84%D0%B5%D1%81%D1%81%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D0%B0-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D0%BF%D0%BE%D0%B7%D0%B2%D0%BE%D0%BB%D1%8F%D1%82-%D0%B1%D1%8B%D1%81%D1%82%D1%80%D0%BE-%D0%B7%D0%B0%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D1%8C-%D0%B4%D0%B8%D0%BF%D0%BB%D0%BE%D0%BC

回复
Lazreyf说道：

2024年7月27日上午3:41

Добрый день!
Заказать диплом любого университета.
rugladyseminars.com/cb-profile/pluginclass/cbblogs?action=blogs&func=show&id=399

回复
Oborydovanie aktovih zalov_kyEl说道：

2024年7月27日上午3:41

оборудование для актовых залов оборудование для актовых залов .

回复
Lazroyk说道：

2024年7月27日上午3:40

Привет!
Приобрести диплом любого университета.
ingprint.ru/club/user/58725/forum/message/6909/203474/

回复
Lazrspd说道：

2024年7月27日上午2:52

Добрый день!
Мы можем предложить дипломы любой профессии по приятным ценам.
rsn360.ru/blogs/427/¬аш-?иплом- ачество-и-ѕодлинность

回复
Superconductivity说道：

2024年7月27日上午2:36

Hi, I do think this is a great blog. I stumbledupon it 😉 I may revisit yet again since i have book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to help other people.

回复
Henrymen说道：

2024年7月27日上午2:25

Новини, останні події https://prp.org.ua в Україні та світі, новини політики, бізнесу та економіки, законодавства

回复
ShawnArede说道：

2024年7月27日上午2:09

Новини України https://sensus.org.ua та світу сьогодні. Головні та останні новини дня

回复
JeromeZef说道：

2024年7月27日上午2:05

Головні новини https://mediashare.com.ua про регіон України. Будьте в курсі останніх новин

回复
Derekexall说道：

2024年7月27日上午2:05

Новини та аналітика https://newsportal.kyiv.ua ситуація в Україні.

回复
Oborydovanie aktovih zalov_deEl说道：

2024年7月27日上午1:56

акустическое оборудование для актового зала oborudovanija-dlja-aktovyh-zalov.ru .

回复
Richardson说道：

2024年7月27日上午1:49

Головні новини https://pto-kyiv.com.ua України та світу

回复
- Michaelabink说道：
  
  2024年9月28日下午12:12
  
  @Richardson purchase ventolin online: Buy Albuterol inhaler online – buy ventolin pharmacy
  ventolin uk prescription
  
  回复
- JosephhounK说道：
  
  2024年9月29日上午5:51
  
  @Richardson generic ventolin medication: ventolin prescription coupon – ventolin albuterol inhaler
  
  回复
- TimothyPob说道：
  
  2024年10月1日上午3:31
  
  @Richardson medicine in mexico pharmacies: mexican pharmacy – mexican rx online
  
  回复
Uazrmll说道：

2024年7月27日上午1:39

Привет, друзья!
Приобрести диплом любого университета.
dervislergrup.com/events/event/15-legkii-poisk-onlain-magazina-cto-prodaet-diplomy/

回复
Demi说道：

2024年7月27日上午1:16

What’s Happening i am new to this, I stumbled upon this I have discovered It positively useful and it has
helped me out loads. I hope to give a contribution & aid other users like its
helped me. Great job.

回复
Videosteni_axSt说道：

2024年7月27日上午12:59

видеостена под ключ видеостена под ключ .

回复
oborydovanie aktovogo zala_wxea说道：

2024年7月27日上午12:55

акустическое оборудование для актового зала акустическое оборудование для актового зала .

回复
oborydovanie aktovogo zala_xfea说道：

2024年7月27日上午12:53

оборудование для актового зала оборудование для актового зала .

回复
Videosteni_kqSt说道：

2024年7月27日上午12:49

стоимость видеостены стоимость видеостены .

回复
Videosteni_cbSt说道：

2024年7月27日上午12:47

lcd видеостена москва http://www.videosteny-dlja-sozdanija-jekranov.ru/ .

回复
oborydovanie aktovogo zala_puea说道：

2024年7月27日上午12:45

оборудование для актовых залов оборудование для актовых залов .

回复
Videosteni_nfSt说道：

2024年7月27日上午12:40

видеостена под ключ видеостена под ключ .

回复
oborydovanie aktovogo zala_ujea说道：

2024年7月27日上午12:34

оборудование актового зала оборудование актового зала .

回复
Videosteni_beSt说道：

2024年7月27日上午12:29

видеостена цена видеостена цена .

回复
oborydovanie aktovogo zala_laea说道：

2024年7月27日上午12:29

оборудование для актового зала оборудование для актового зала .

回复
Lazrwsj说道：

2024年7月27日上午12:25

Привет!
Заказать диплом любого ВУЗа.
vocal.com.ua/node/62301

回复
Videosteni_wnSt说道：

2024年7月27日上午12:24

видеостена купить москва видеостена купить москва .

回复
Videosteni_pqSt说道：

2024年7月27日上午12:19

видеостена для конференц зала видеостена для конференц зала .

回复
online casino说道：

2024年7月27日上午12:11

porn

回复
galileofx说道：

2024年7月27日上午12:06

There is definately a great deal to find out about this topic. I really like all the points you made.

回复
oborydovanie aktovogo zala_jjea说道：

2024年7月26日下午11:27

музыкальное оборудование для актового зала музыкальное оборудование для актового зала .

回复
Videosteni_ukSt说道：

2024年7月26日下午11:26

видеостена купить москва видеостена купить москва .

回复
Mazrdnp说道：

2024年7月26日下午10:57

Привет, друзья!
Пошаговая инструкция по официальной покупке диплома о высшем образовании
weekinato.ru/diplomyi-ot-luchshih-vuzov/

回复
JoshuaRef说道：

2024年7月26日下午10:40

Україна останні новини https://lentanews.kyiv.ua головні новини та останні події

回复
Mazrcjd说道：

2024年7月26日下午9:52

Привет, друзья!
Как быстро получить диплом магистра? Легальные способы
wiuwi.com/blogs/118282/ упить-?иплом-Ѕыстро-и-Ћегально

回复
Davidanymn说道：

2024年7月26日下午9:44

Свіжі новини України https://lenta.kyiv.ua останні новини з-за кордону, новини політики, економіки, спорту, культури.

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

发表回复 取消回复

发表回复取消回复