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

NelsonSaIlk说道：

2024年8月2日上午1:16

buying from online mexican pharmacy: mexican drugstore online – mexican rx online

回复
Promokod_tbOl说道：

2024年8月2日上午1:07

Все актуальные промокоды в одном месте. Все актуальные промокоды в одном месте. .

回复
Diplomi_xeol说道：

2024年8月2日上午1:05

Добрый день!
Купить документ университета вы можете в нашей компании.
diploms-x.com/kupit-diplom-chelyabinsk

回复
Manrioo说道：

2024年8月2日上午12:54

Здравствуйте!
Заказать документ ВУЗа
ast-diplomy.com/kupit-diplom-vracha

回复
Manrtib说道：

2024年8月2日上午12:51

Привет, друзья!
Заказать документ университета
diploms-x.com/kupit-diplom-magistra

回复
Xazrjku说道：

2024年8月2日上午12:35

Здравствуйте!
Официальная покупка диплома вуза с сокращенной программой обучения в Москве
landik-diploms-srednee.ru/kupit-diplom-v-novosibirske

回复
Xazreob说道：

2024年8月2日上午12:33

Привет!
Рекомендации по безопасной покупке диплома о высшем образовании
landik-diploms-srednee.ru/attestat-shkoly

回复
Arnoldscava说道：

2024年8月2日上午12:10

mexican mail order pharmacies mexican pharmacy mexican pharmaceuticals online

回复
Waynetar说道：

2024年8月2日上午12:02

mexican online pharmacies prescription drugs: mexican pharmaceuticals online – mexico drug stores pharmacies

回复
DominicHOr说道：

2024年8月1日下午11:42

purple pharmacy mexico price list: buying prescription drugs in mexico – mexican rx online

回复
DominicHOr说道：

2024年8月1日下午11:39

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

回复
Mariel说道：

2024年8月1日下午11:19

I think what you published was very reasonable. But, think about this, suppose you
added a little content? I am not saying your information is
not solid, but suppose you added something that makes people want more?
I mean [vue/vite]在vscode中使用vite手动创建vue项目 –
猫薄荷 is a little vanilla. You ought to peek at Yahoo’s front page and see how
they create news titles to grab viewers to open the links.
You might add a video or a related picture or two to grab people interested about what you’ve written. Just
my opinion, it would make your posts a little livelier.

回复
Manrygb说道：

2024年8月1日下午10:48

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

回复
Arnoldscava说道：

2024年8月1日下午10:40

mexican online pharmacies prescription drugs mexico pharmacies prescription drugs reputable mexican pharmacies online

回复
Promokod_qvOl说道：

2024年8月1日下午10:30

Специальные промокоды для вас. free-promocode.ru .

回复
Xazrpiq说道：

2024年8月1日下午10:26

Привет!
Реально ли приобрести диплом стоматолога? Основные этапы
landik-diploms-srednee.ru/kupit-diplom-v-ekaterinburge

回复
NelsonSaIlk说道：

2024年8月1日下午10:18

mexico pharmacies prescription drugs: pharmacies in mexico that ship to usa – mexican drugstore online

回复
NelsonSaIlk说道：

2024年8月1日下午10:15

medicine in mexico pharmacies: mexico drug stores pharmacies – buying from online mexican pharmacy

回复
Danrhvm说道：

2024年8月1日下午9:18

Здравствуйте!
Мы изготавливаем дипломы любой профессии.
ackeer.com/read-blog/451_nadezhnyj-magazin-s-obshirnym-assortimentom-diplomov?mode=night
Поможем вам всегда!.

回复
Danrmvp说道：

2024年8月1日下午9:16

Здравствуйте!
Мы предлагаем дипломы любой профессии.
pdbsoftware.com/2024/07/08/купить-диплом-фармацевта-в-тюмени
Будем рады вам помочь!.

回复
Waynetar说道：

2024年8月1日下午9:15

mexico drug stores pharmacies: mexico drug stores pharmacies – pharmacies in mexico that ship to usa

回复
Arnoldscava说道：

2024年8月1日下午9:10

mexican pharmaceuticals online medicine in mexico pharmacies medication from mexico pharmacy

回复
DominicHOr说道：

2024年8月1日下午8:53

п»їbest mexican online pharmacies: reputable mexican pharmacies online – mexico pharmacies prescription drugs

回复
Waynetar说道：

2024年8月1日下午8:36

purple pharmacy mexico price list: buying prescription drugs in mexico online – medicine in mexico pharmacies

回复
Asqhzl说道：

2024年8月1日下午8:35

hytrin 5mg pill – buy priligy pill purchase dapoxetine pill

回复
DominicHOr说道：

2024年8月1日下午8:13

buying from online mexican pharmacy: purple pharmacy mexico price list – medication from mexico pharmacy

回复
Lazrtlt说道：

2024年8月1日下午8:06

Привет!
Купить диплом университета.
biomedia.pro/club/user/112304/forum/message/3755/13237

回复
Arnoldscava说道：

2024年8月1日下午8:01

buying from online mexican pharmacy buying prescription drugs in mexico online mexican drugstore online

回复
Arnoldscava说道：

2024年8月1日下午7:28

buying prescription drugs in mexico online mexico pharmacy mexican drugstore online

回复
NelsonSaIlk说道：

2024年8月1日下午7:25

reputable mexican pharmacies online: mexican rx online – purple pharmacy mexico price list

回复
Kiethvoini说道：

2024年8月1日下午7:19

港體會娛樂

回复
Waynetar说道：

2024年8月1日下午7:17

purple pharmacy mexico price list: п»їbest mexican online pharmacies – mexican border pharmacies shipping to usa

回复
Lazrxqf说道：

2024年8月1日下午7:11

Здравствуйте!
Мы предлагаем дипломы любых профессий по приятным тарифам.
sonicetactical.ru/купить-диплом-2001

回复
Lazrwhw说道：

2024年8月1日下午7:11

Добрый день!
Мы готовы предложить дипломы любых профессий по невысоким тарифам.
sonicetactical.ru/купить-диплом-2001

回复
Trefnuq说道：

2024年8月1日下午6:55

Добрый день!
Процесс получения диплома стоматолога: реально ли это сделать быстро?
tanhashop.com/category/uncategorized/page/2
Рады оказаться полезными!.

回复
DominicHOr说道：

2024年8月1日下午6:54

purple pharmacy mexico price list: medicine in mexico pharmacies – buying prescription drugs in mexico

回复
Arnoldscava说道：

2024年8月1日下午6:52

purple pharmacy mexico price list mexico drug stores pharmacies mexican online pharmacies prescription drugs

回复
NelsonSaIlk说道：

2024年8月1日下午6:44

pharmacies in mexico that ship to usa: reputable mexican pharmacies online – mexican pharmaceuticals online

回复
Lazrjnq说道：

2024年8月1日下午6:39

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

回复
Mazrkmo说道：

2024年8月1日下午6:28

Привет!
Как приобрести аттестат о среднем образовании в Москве и других городах
mandiplomik.ru

回复
Trefeht说道：

2024年8月1日下午6:19

Здравствуйте!
Как получить диплом стоматолога быстро и официально
bjyou4122.com/?270393
Окажем помощь!.

回复
Lazrqnq说道：

2024年8月1日下午5:35

Привет!
Купить диплом университета.
berforum.ru/gallery/image/8670-kak-nayti-nadezhnyy-internet-magazin-s-bolshim-vyborom-diplomov/?context=new

回复
Oborydovanie peregovornih komnat_xdEl说道：

2024年8月1日下午5:35

оборудование переговорных комнат оборудование переговорных комнат .

回复
NelsonSaIlk说道：

2024年8月1日下午5:23

mexico drug stores pharmacies: buying prescription drugs in mexico – pharmacies in mexico that ship to usa

回复
Mazrzcr说道：

2024年8月1日下午5:18

Привет!
Как купить аттестат 11 класса с официальным упрощенным обучением в Москве
mans-diplomyxx.ru

回复
oborydovanie aktovogo zala_djea说道：

2024年8月1日下午4:29

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

回复
Arnoldscava说道：

2024年8月1日下午4:24

buying prescription drugs in mexico buying prescription drugs in mexico online mexican pharmacy

回复
Waynetar说道：

2024年8月1日下午4:18

mexico drug stores pharmacies: mexican drugstore online – medication from mexico pharmacy

回复
Lazrvir说道：

2024年8月1日下午4:10

Привет!
Мы готовы предложить дипломы психологов, юристов, экономистов и прочих профессий по выгодным тарифам.
linkthere.club/read-blog/8205_vysshee-obrazovanie-dlya-vseh-legalno-i-nadezhno

回复
DominicHOr说道：

2024年8月1日下午3:56

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

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

发表回复 取消回复

发表回复取消回复