如何新建vue2、vue3项目

注意：不要用git的git Bash的控制台打开，因为安装选择时这个控制台不能够进行上下选项切换，用系统自带的cmd进行项目创建！

一、安装npm ，现用node.js中自带的npm，安装node.js

node-v14.20.1-x64

二、使用淘宝NPM镜像

【win+r】输入cmd，打开命令行窗口，输入

npm install -g cnpm --registry=https://registry.npmmirror.com

三、项目初始化

安装 vue-cli

vue-cli2：

// 全局安装 npm install -g vue-cli 或 cnpm install -g vue-cli // 卸载 npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli

vue-cli3 / vue-cli4：

// 全局安装 npm install -g @vue/cli@版本号或 cnpm install -g @vue/cli@版本号 // 卸载 npm uninstall -g @vue/cli@版本号或 cnpm uninstall -g @vue/cli@版本号

注：原cli3/cli4的安装指令为@vue/cli，因为cli5的出现同样使用了@vue/cli，所以想要安装3/4的版本，就需要在@vue/cli后面加上@版本号（例：npm install -g @vue/cli@3.11.0）。

vue-cli5：

// 全局安装 npm install -g @vue/cli 或 cnpm install -g @vue/cli // 卸载 npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli

vite

搭建第一个 Vite 项目¶ Vite

搭建第一个 Vite 项目

兼容性注意

Vite 需要 Node.js 版本 18+ 或 20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

npmYarnpnpmBun

bash

$ npm create vite@latest

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

npmYarnpnpmBun

bash

# npm 7+，需要添加额外的 --：
$ npm create vite@latest my-vue-app -- --template vue

查看 create-vite 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，react-swc，react-swc-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts，solid，solid-ts，qwik，qwik-ts。

你可以使用 . 作为项目名称，在当前目录中创建项目脚手架。

社区模板

create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的社区维护模板，里面包含各种工具和不同框架的模板。

对于一个 https://github.com/user/project 中的模板，可以尝试使用 https://github.stackblitz.com/user/project（即在项目 URL 的 github 后添加 .stackblitz）。

你也可以用如 degit 之类的工具，使用社区模版来搭建项目。假设项目在 GitHub 上并使用 main 作为默认分支，可以使用以下命令创建本地副本：

bash

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

手动安装

在你的项目中，可以用以下方法来安装 vite 命令行工具：

npmYarnpnpmBun

bash

$ npm install -D vite

并创建一个像这样的 index.html 文件：

html

<p>Hello Vite!</p>

然后在终端上运行相应的命令:

npmYarnpnpmBun

bash

$ npx vite

之后就可以在 http://localhost:5173 上访问 index.html。

`index.html` 与项目根目录

你可能已经注意到，在一个 Vite 项目中，index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ，这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外，index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似，Vite 也有 “根目录” 的概念，即服务文件的位置，在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite 还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的多页面应用模式。

指定替代根目录

执行 vite 命令会以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个不同的根目录。需要注意的是，Vite 也会在项目的根目录中寻找它的配置文件（即vite.config.js），所以如果更改了根目录，你需要将配置文件一起移动过去。

命令行接口

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

package.json

json

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

可以指定额外的命令行选项，如 --port 或 --open。运行 npx vite --help 获得完整的命令行选项列表。

查看命令行接口了解更多细节。

使用未发布的功能

如果你迫不及待想要体验最新的功能，可以使用 https://pkg.pr.new 安装特定的 Vite 提交：

npmYarnpnpmBun

bash

$ npm install -D https://pkg.pr.new/vite@SHA

将 SHA 替换为 Vite 的提交 SHA。请注意，仅最近一个月的提交有效，旧版本提交的构建产物会被清除。

或者，你可以克隆 Vite 代码仓库到本地，自行构建并建立软链接（需安装 pnpm）：

bash

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # 在这一步中可使用你喜欢的包管理器

然后，回到你的 Vite 项目并运行 pnpm link --global vite（或者使用你的其他包管理工具来全局链接 vite）。重新启动开发服务器来体验新功能吧！

处理依赖中的 Vite 版本

若需替换依赖链中传递使用的 Vite 版本（Transitive Dependencies），应使用 npm overrides 或 pnpm overrides。

社区

如果你有疑问或者需要帮助，可以到 Discord 和 GitHub Discussions 社区来寻求帮助。

查看是否安装成功

vue -V

四、创建项目

// vue-cli2 vue init webpack demo // webpack是最常用的，demo 为项目名称，项目名称不能出现大写字母 // vue-cli3/vue-cli4/vue-cli5 (只有3以上的cli版本才可以选择vue3x版本) vue create demo // demo 为项目名称

注意事项

在执行 vue create demo后，有选择创建vue2和vue3项目的选项，根据选项选择即可,按空格键选择，回车键确定全部。

如果要有其他自定义配置，如：