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

Bernardordib说道：

2024年4月20日上午2:45

dánh bài tr?c tuy?n: casino tr?c tuy?n – choi casino tr?c tuy?n trên di?n tho?i

回复
Chrisror说道：

2024年4月20日上午1:21

danh bai tr?c tuy?n danh bai tr?c tuy?n game c? b?c online uy tin

回复
JamesAnirm说道：

2024年4月20日上午1:15

http://casinvietnam.com/# web c? b?c online uy tin

回复
Michaelfus说道：

2024年4月20日上午12:21

https://petroyalportrait.com/

回复
Bernardordib说道：

2024年4月20日上午12:01

game c? b?c online uy tín: choi casino tr?c tuy?n trên di?n tho?i – casino tr?c tuy?n uy tín

回复
Walteronerb说道：

2024年4月19日下午11:43

http://casinvietnam.com/# web c? b?c online uy tin

回复
Chrisror说道：

2024年4月19日下午10:36

casino online uy tin casino online uy tin game c? b?c online uy tin

回复
Bernardordib说道：

2024年4月19日下午9:39

dánh bài tr?c tuy?n: casino online uy tín – casino tr?c tuy?n

回复
Jesselef说道：

2024年4月19日下午9:22

офисная мебель в минске

回复
Walteronerb说道：

2024年4月19日下午8:41

https://casinvietnam.com/# web c? b?c online uy tin

回复
Chrisror说道：

2024年4月19日下午7:59

web c? b?c online uy tin casino online uy tin casino tr?c tuy?n vi?t nam

回复
Bernardordib说道：

2024年4月19日下午7:13

choi casino tr?c tuy?n trên di?n tho?i: game c? b?c online uy tín – casino tr?c tuy?n

回复
Rsgaiq说道：

2024年4月19日下午7:08

prandin 2mg cheap – cheap repaglinide 1mg jardiance without prescription

回复
Thomasnus说道：

2024年4月19日下午6:55

я уже смотрел обзор здесь https://my-obzor.com/ перед тем, как сделать заказ. Не сказать, что все отзывы были 100% положительные, там уже упоминались основные минусы и плюсы

回复
Walteronerb说道：

2024年4月19日下午5:38

https://casinvietnam.com/# casino tr?c tuy?n vi?t nam

回复
Chrisror说道：

2024年4月19日下午5:17

choi casino tr?c tuy?n tren di?n tho?i game c? b?c online uy tin casino tr?c tuy?n

回复
Bernardordib说道：

2024年4月19日下午4:52

casino tr?c tuy?n uy tín: casino tr?c tuy?n vi?t nam – choi casino tr?c tuy?n trên di?n tho?i

回复
bukmeker_giKn说道：

2024年4月19日下午3:36

бк рб https://www.sport-bk.by .

回复
Bernardordib说道：

2024年4月19日下午2:28

casino tr?c tuy?n vi?t nam: choi casino tr?c tuy?n trên di?n tho?i – game c? b?c online uy tín

回复
Walteronerb说道：

2024年4月19日下午2:08

http://casinvietnam.shop/# game c? b?c online uy tin

回复
Bernardordib说道：

2024年4月19日下午12:09

game c? b?c online uy tín: game c? b?c online uy tín – casino tr?c tuy?n vi?t nam

回复
Walteronerb说道：

2024年4月19日上午11:19

https://casinvietnam.shop/# casino tr?c tuy?n vi?t nam

回复
Seubjs说道：

2024年4月19日上午10:58

glucophage 500mg over the counter – glucophage 500mg sale order acarbose

回复
CnnyPooma说道：

2024年4月19日上午10:09

tizanidine and cipro

回复
Bernardordib说道：

2024年4月19日上午9:51

casino tr?c tuy?n: casino tr?c tuy?n – game c? b?c online uy tín

回复
LarryGok说道：

2024年4月19日上午9:09

PBN sites
We will create a network of PBN sites!

Merits of our self-owned blog network:

WE DO everything SO THAT google doesn’t understand that this is A self-owned blog network!!!

1- We obtain domains from distinct registrars

2- The main site is hosted on a virtual private server (Virtual Private Server is high-speed hosting)

3- The rest of the sites are on various hostings

4- We assign a separate Google account to each site with verification in Search Console.

5- We create websites on WordPress, we do not use plugins with aided by which malware penetrate and through which pages on your websites are created.

6- We do not duplicate templates and utilize only unique text and pictures

We refrain from work with website design; the client, if desired, can then edit the websites to suit his wishes

回复
Walteronerb说道：

2024年4月19日上午8:33

https://casinvietnam.shop/# danh bai tr?c tuy?n

回复
Bernardordib说道：

2024年4月19日上午7:30

casino tr?c tuy?n vi?t nam: casino tr?c tuy?n vi?t nam – web c? b?c online uy tín

回复
Walteronerb说道：

2024年4月19日上午5:43

https://casinvietnam.shop/# casino tr?c tuy?n uy tin

回复
Bernardordib说道：

2024年4月19日上午4:50

casino tr?c tuy?n uy tín: choi casino tr?c tuy?n trên di?n tho?i – choi casino tr?c tuy?n trên di?n tho?i

回复
WilliamSAISM说道：

2024年4月19日上午4:23

Комплексное продвижение сайтов в Москве https://seosferaya.ru/ под ключ. SEO раскрутка сайта в топ Яндекс и Google от профессионалов, первые результаты уже через месяц. Комплексное продвижение сайтов с гарантией.

回复
Walteronerb说道：

2024年4月19日上午2:50

http://casinvietnam.com/# game c? b?c online uy tin

回复
RobertVag说道：

2024年4月19日上午2:39

Поисковое SEO продвижение сайтов в Москве https://seosferaya.ru/, стоимость тарифов на быструю и недорогую раскрутку сайта в ТОП-10. Оптимизация сайтов в поисковых системах Яндекс и Google. Быстро раскручиваем сайты за счет опыта. Тарифы и цены, кейсы и результаты наших работ в Москве и других крупных городах РФ

回复
Bernardordib说道：

2024年4月19日上午2:17

casino tr?c tuy?n vi?t nam: casino tr?c tuy?n vi?t nam – casino tr?c tuy?n

回复
BruceArina说道：

2024年4月19日上午12:03

SEO продвижение и раскрутка сайтов с гарантией https://seomayker.ru/. Услуги по продвижению сайта в поисковых системах. Видимость вашего сайта в поисковых системах повысится и вы привлечете больше качественных посетителей без необходимости платить за рекламу.

回复
Davidguinc说道：

2024年4月18日下午10:09

Заказать seo продвижение сайта https://seodelay.ru/ и услуги по продвижению сайта в поисковых системах. SEO продвижение сайтов в топ выдачи в поисковых системах Яндекс, Google. Проведем профессиональную раскрутку и поисковую оптимизацию вашего сайта по низкой стоимости.

回复
Gordonvon说道：

2024年4月18日下午4:55

Написание дипломных работ https://diplompishem.ru/, курсовых и рефератов от лучших авторов. Заказать студенческую работу с антиплагиатом и уникализацией.

回复
Ajrsad说道：

2024年4月18日下午3:50

micronase drug – generic dapagliflozin 10 mg order forxiga online

回复
JamesAnirm说道：

2024年4月18日下午2:56

http://casinvietnam.com/# danh bai tr?c tuy?n

回复
Josephmon说道：

2024年4月18日下午1:53

Качественное написание рефератов https://referatnovy.ru/, курсовых и дипломных работ от лучших авторов. Уникальные работы под ключ. Заказать студенческую работу за 2 дня.

回复
AyybThags说道：

2024年4月18日上午3:54

voltaren and diabetes

回复
JoshuaPreri说道：

2024年4月18日上午1:40

casino tr?c tuy?n: web c? b?c online uy tín – casino tr?c tuy?n vi?t nam

回复
Express VPN Cracked Version For PC说道：

2024年4月18日上午1:23

nice one well done keeeeeep it upzzz

回复
AndrewCib说道：

2024年4月18日上午12:51

https://referatnash.ru/

回复
ZolkNuapy说道：

2024年4月18日上午12:41

tamsulosin augen

回复
BbbfStess说道：

2024年4月17日下午11:39

venlafaxine weight gain reviews

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

回复 נערות ליווי בתל אביב 取消回复