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

Michaelununk说道：

2023年8月27日上午3:32

https://lipitor.pro/# price canada lipitor 20mg

回复
Georgeoptor说道：

2023年8月26日上午6:52

https://ciprofloxacin.ink/# cipro ciprofloxacin

回复
Michaelununk说道：

2023年8月26日上午4:09

http://lipitor.pro/# lipitor 4 mg

回复
Georgeoptor说道：

2023年8月25日上午6:46

http://misoprostol.guru/# cytotec online

回复
Michaelununk说道：

2023年8月25日上午5:50

http://ciprofloxacin.ink/# cipro pharmacy

回复
Shawncem说道：

2023年8月24日下午4:30

скачать казино brillx
Brillx
Погрузитесь в мир увлекательных игр и сорвите джекпот на сайте Brillx Казино. Наши игровые аппараты не просто уникальны, они воплощение невероятных приключений. От крупных выигрышей до захватывающих бонусных раундов, вас ждут неожиданные сюрпризы за каждым вращением барабанов.Так что не упустите свой шанс вступить в мир Brillx Казино! Играйте онлайн бесплатно и на деньги в 2023 году, окунувшись в море невероятных эмоций и неожиданных поворотов. Brillx – это не просто игровые аппараты, это источник вдохновения и увлечения. Поднимите ставки и дайте себе шанс на большую победу вместе с нами!

回复
Kdanep说道：

2023年8月24日下午1:56

order aspirin 75mg order generic zovirax purchase zovirax cream

回复
DavidVoR说道：

2023年8月24日上午11:07

http://ed-pills.men/# ed medication online

回复
RobertBog说道：

2023年8月24日上午10:30

paxlovid pharmacy: paxlovid pill – paxlovid generic

回复
WilliamByday说道：

2023年8月24日上午9:58

ed treatment review: treatment for ed – buy ed pills

回复
Tauuta说道：

2023年8月24日上午12:42

buy aspirin 75mg for sale hydroquinone cheap buy imiquimod paypal

回复
Logantyday说道：

2023年8月23日下午8:24

https://paxlovid.top/# paxlovid cost without insurance

回复
RobertBog说道：

2023年8月23日下午1:46

Paxlovid over the counter: Paxlovid buy online – Paxlovid over the counter

回复
Barrytut说道：

2023年8月23日上午10:28

https://gabapentin.pro/# neurontin uk

回复
LucasInary说道：

2023年8月23日上午10:22

canada where to buy neurontin: neurontin 100 – buy neurontin uk

回复
Rvkrci说道：

2023年8月23日上午7:59

purchase acarbose without prescription order generic griseofulvin 250mg fulvicin ca

回复
Jeffreysulky说道：

2023年8月22日下午2:55

https://stromectolonline.pro/# ivermectin

回复
LucasInary说道：

2023年8月22日下午1:10

zithromax over the counter: buy zithromax online fast shipping – buy zithromax online with mastercard

回复
Rcgcgq说道：

2023年8月22日上午11:10

buy precose 50mg online griseofulvin brand buy fulvicin generic

回复
Barrytut说道：

2023年8月22日上午9:37

http://gabapentin.pro/# neurontin 600mg

回复
Michaelhax说道：

2023年8月22日上午9:21

ivermectin 500ml ivermectin ebay ivermectin 50 mg

回复
Brndpd说道：

2023年8月21日下午10:26

buy generic minoxidil online buy tamsulosin 0.4mg pills blue pill for ed

回复
Jeffreysulky说道：

2023年8月21日下午4:47

https://gabapentin.pro/# neurontin 400 mg cost

回复
Mliplt说道：

2023年8月21日上午9:15

buy generic minoxytop best ed drug pills for ed

回复
Barrytut说道：

2023年8月21日上午8:45

https://stromectolonline.pro/# ivermectin 12

回复
Michaelhax说道：

2023年8月20日下午6:55

buy zithromax 1000 mg online zithromax capsules zithromax 250 mg australia

回复
LucasInary说道：

2023年8月20日下午2:40

ivermectin cost: ivermectin price uk – ivermectin brand name

回复
Barrytut说道：

2023年8月20日上午10:18

https://gabapentin.pro/# neurontin capsules 100mg

回复
Efdmyc说道：

2023年8月20日上午10:17

cost zaditor 1mg purchase tofranil pills tofranil over the counter

回复
AlbertFlouh说道：

2023年8月20日上午3:05

reputable mexican pharmacies online: mexican pharmaceuticals online – п»їbest mexican online pharmacies

回复
Edwardintig说道：

2023年8月19日下午5:39

https://certifiedcanadapharm.store/# canadian pharmacy 24 com

回复
Jfgntz说道：

2023年8月19日下午1:58

ketotifen pills buy sinequan 75mg online cheap imipramine 75mg usa

回复
Freddypoope说道：

2023年8月19日上午9:02

mexican rx online: best online pharmacies in mexico – purple pharmacy mexico price list

回复
Robertorind说道：

2023年8月19日上午8:06

https://certifiedcanadapharm.store/# canadian pharmacy in canada

回复
Moftzx说道：

2023年8月19日上午7:13

cialis pills 20mg sildenafil pill sildenafil 50mg pills for men

回复
AlbertFlouh说道：

2023年8月19日上午5:05

northwest canadian pharmacy: reddit canadian pharmacy – canadian pharmacy no rx needed

回复
Edwardintig说道：

2023年8月18日下午8:39

https://indiamedicine.world/# indianpharmacy com

回复
Qnwsxb说道：

2023年8月18日下午5:54

cialis cheap sildenafil india order sildenafil 50mg without prescription

回复
Freddypoope说道：

2023年8月18日上午9:02

online pharmacy india: buy prescription drugs from india – Online medicine home delivery

回复
AlbertFlouh说道：

2023年8月18日上午7:21

my canadian pharmacy: canada pharmacy 24h – pharmacy canadian superstore

回复
Edwardintig说道：

2023年8月17日下午11:49

https://indiamedicine.world/# world pharmacy india

回复
AlbertFlouh说道：

2023年8月17日上午9:28

reputable indian online pharmacy: buy medicines online in india – india pharmacy mail order

回复
Freddypoope说道：

2023年8月17日上午8:54

legit canadian online pharmacy: best canadian pharmacy – vipps approved canadian online pharmacy

回复
Edwardintig说道：

2023年8月17日上午3:04

http://indiamedicine.world/# buy medicines online in india

回复
AlbertFlouh说道：

2023年8月16日上午11:50

mexican border pharmacies shipping to usa: mexican pharmaceuticals online – reputable mexican pharmacies online

回复
Robertorind说道：

2023年8月16日上午9:47

https://certifiedcanadapharm.store/# best canadian online pharmacy

回复
Freddypoope说道：

2023年8月16日上午9:05

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

回复
Edwardintig说道：

2023年8月16日上午6:35

https://certifiedcanadapharm.store/# reliable canadian pharmacy

回复
AlbertFlouh说道：

2023年8月15日下午2:00

canadian pharmacy no rx needed: canada pharmacy world – reliable canadian pharmacy

回复
Freddypoope说道：

2023年8月15日上午9:05

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

回复

初始化

安装vite依赖

安装vue的依赖

创建index.html

创建main.js

尝试让它跑起来（1）

创建App.vue

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

结语

发表回复 取消回复

发表回复取消回复