1. 安装 Vue 项目

1.1 安装 Vue CLI

在 Windows 环境下,你可以使用以下命令通过 npm 安装 Vue CLI:

npm install -g @vue/cli

安装完成后,可以通过以下命令验证 Vue CLI 是否安装成功:

vue --version

1.2 创建新的 Vue 项目

创建一个新的 Vue 项目,可以在命令行中执行:

vue create my-vue-project

根据提示选择项目配置,Vue CLI 会自动安装所需的依赖并创建项目。

1.3 安装依赖

如果你已经有一个现成的 Vue 项目,在项目文件夹中执行以下命令来安装依赖:

npm install

或者,如果你使用的是 Yarn,可以执行:

yarn install

2. 启动 Vue 项目

2.1 启动开发服务器

在项目根目录下运行以下命令,启动开发服务器:

npm run serve

如果你使用 Yarn,也可以执行:

yarn serve

启动后,项目会在浏览器中自动打开,默认访问地址是 http://localhost:8080

2.2 更改开发服务器端口

如果你需要修改默认的开发服务器端口(8080),可以在 vue.config.js 文件中配置:

module.exports = {
  devServer: {
    port: 3000 // 设置端口为 3000
  }
}

3. 打包项目

3.1 打包生产环境代码

当你准备将项目发布到生产环境时,使用以下命令进行打包:

npm run build

或者,使用 Yarn:

yarn build

打包后的生产环境代码会生成在 dist/ 文件夹中。


4. 设置加速镜像

4.1 设置 npm 镜像源(淘宝镜像)

在 Windows 上,可以通过以下命令设置 npm 的镜像源为淘宝镜像,加速依赖下载:

npm config set registry https://registry.npm.taobao.org

验证镜像源是否设置成功:

npm config get registry

4.2 设置 Yarn 镜像源

如果你使用的是 Yarn,可以设置以下镜像源:

yarn config set registry https://registry.npm.taobao.org

这样 Yarn 就会使用淘宝的镜像源来下载包。


5. 快速删除 node_modules

5.1 删除 node_modules 目录

如果你需要删除项目中的 node_modules 目录,可以使用以下命令:

rd /s /q node_modules

这条命令在 Windows 上会递归删除 node_modules 文件夹。

5.2 清理 npm 缓存

有时 node_modules 删除不彻底,你可以通过清理 npm 缓存来避免后续安装问题:

npm cache clean --force

5.3 重新安装依赖

删除 node_modules 后,可以通过以下命令重新安装依赖:

npm install

或者使用 Yarn:

yarn install

6. Vue 项目常用命令汇总

命令描述
vue create my-vue-project创建一个新的 Vue 项目
npm install安装项目依赖
npm run serve启动开发服务器
npm run build打包生产环境代码
npm config set registry设置 npm 镜像源(淘宝镜像)
rd /s /q node_modules删除 node_modules 目录
npm cache clean --force清理 npm 缓存
Last modification:December 9, 2024
如果觉得这篇技术文章对你有用,请随意赞赏