一开始是通过npm命令搭建项目,发现创建后始终只有两三个文件,如下图所示
此时去执行 npm run serve 命令时会报错导致运行项目失败,从网上参考了很多方法也没能解决掉,在经历了两三天的折磨后终于找到了一条正确的道路。那就是不通过npm命令来下载了,而是用yarn命令来下载,果不其然,一下就解决了问题!
这个方法的前提是需要安装好yarn,具体可以通过以下步骤来完成:
-
安装 Node.js:Yarn 依赖于 Node.js,因此首先需要安装 Node.js。你可以从 Node.js 官方网站下载最新版本的 Node.js 安装程序:Node.js。建议安装LTS(长期支持)版本。
-
检查 Node.js 和 npm 安装:安装完成后,打开终端(命令行界面)并运行以下命令,确保 Node.js 和 npm(Node 包管理器)已成功安装:
node -v
npm -v
-
这将显示安装的 Node.js 和 npm 的版本号。
-
安装 Yarn:一旦 Node.js 和 npm 安装成功,你可以使用 npm 来全局安装 Yarn。在终端中运行以下命令:
npm install -g yarn
这将下载并安装 Yarn。安装完成后,你可以运行以下命令验证 Yarn 是否安装成功:
yarn -v
这将显示安装的 Yarn 的版本号。
现在,你已成功安装了 Yarn。你可以使用 Yarn 来管理 JavaScript 项目的依赖项和执行各种包管理任务。
要使用 Yarn 命令搭建 Vue 脚手架项目,你可以使用 Vue CLI(Vue Command Line Interface)。Vue CLI 是一个官方的工具,用于创建和管理 Vue.js 项目。以下是使用 Yarn 和 Vue CLI 创建一个 Vue 项目的步骤:
-
安装 Vue CLI(如果未安装):
在终端中运行以下命令来安装 Vue CLI:
yarn global add @vue/cli
这将在全局范围内安装 Vue CLI 工具,以便你可以在任何目录中使用
vue
命令。 -
创建新的 Vue 项目:
使用 Vue CLI 创建一个新的 Vue 项目。进入你想要创建项目的目录,然后运行以下命令:
vue create my-vue-project
替换
my-vue-project
为你想要的项目名称。运行命令后,Vue CLI 会提示你选择配置 preset。你可以选择默认配置、手动配置或已经保存的配置。根据你的需求选择一个选项并按照提示进行配置。 -
进入项目目录:
创建项目后,进入项目目录:
cd my-vue-project
-
运行开发服务器:
使用 Yarn 来启动本地开发服务器:
yarn serve
这将启动开发服务器,让你可以在浏览器中访问你的 Vue 应用程序。
这样,你就成功使用 Yarn 和 Vue CLI 创建了一个新的 Vue 项目。现在,你可以在项目中开发和构建你的 Vue.js 应用程序。