vite搭建vue3项目

vite搭建Vue3项目

搭建步骤

1.确保Nodejs环境

在终端输入如下命令来查看node环境，

node -v

如果使用的是nvm管理node版本，可以输入如下命令查看:

nvm ls

运行结果为

       v16.20.2
       v17.0.1
       v18.20.4
       v20.18.0
-->    v22.12.0

其中箭头所指就是当前版本。

2.使用vite-cli工具

1.直接使用vite-cli工具创建项目

# npm 模板
npm create vite@latest

# yarn
yarn create vite@latest

# pnpm
pnpm create vite@latest

也可以在项目搭建好后切换,因为vite项目的依赖是搭建好后再下载的。

2.输入项目名称

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

# 输入项目名称
? Project name: › vue-vite-project

3.选择项目框架，选择Vue

上下键进行选择，enter键进行选取

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … vue-vite-project

# 选择项目框架
? Select a framework: › - Use arrow-keys. Return to submit.
  	Vanilla
❯   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

4.选择项目语言，一般选择typescript

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … vue-vite-project
✔ Select a framework: › Vue
# 选择项目语言
? Select a variant: › - Use arrow-keys. Return to submit.
❯   TypeScript
    JavaScript
    Official Vue Starter
    Nuxt ↗

5.完成后的结果为

upsilon@upsilon:~/workplace$ npm create vite@latest

> npx
> create-vite

✔ Project name: … vue-vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /home/upsilon/workplace/vue-vite-project...

Done. Now run:

  cd vue-vite-project
  npm install
  npm run dev

3.进入项目安装依赖

和webpack不同，Vite项目在搭建时没有下载依赖，所以需要进入项目下载依赖。

1.npm依赖

npm i

2.使用pnpm

# 如果没有安装pnpm可以运行
npm i -g pnpm

# 下载依赖
pnpm i

3.使用yarn

# 如果没有安装yarn
npm i -g yarn

# 下载依赖
yarn