【vue项目创建】vue2和vue3项目创建的几种方式

vue2项目创建：

如何使用vue-cli2.0和vue-cli3.0从零开始构建一个Vue项目。

• 使用vue-cli2.0创建项目

1，全局安装vue-cli
npm install vue-cli -g


2，使用webpack创建项目
npm init webpack project-name


? Project name vue-book
? Project description A Vue.js project
? Author xxx
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm


3，项目启动
cd vue-book
npm run dev

• 使用@vue/cli3.0创建项目

1，全局安装@vue/cli
npm install @vue/cli -g


2，进入要创建项目的目录


3，创建项目
vue create project-name

注：输入命令进行项目配置选择，project-name为项目名称。

---

vue3项目创建：

• 使用vue create命令创建Vue3项目

安装@vue/cli：首先，确保你已经全局安装了@vue/cli。你可以使用以下命令来安装或升级@vue/cli：

npm install -g @vue/cli 或 yarn global add @vue/cli

如果你已经安装了@vue/cli，可以通过运行vue -V或vue -version来检查版本号。推荐的版本是4.5.0或更高版本

创建项目：使用vue create命令来创建一个新的Vue3项目。例如，如果你想创建一个名为my-project的项目，可以运行：

vue create my-project --default

注：--default：参数表示使用默认配置创建项目，这样可以跳过手动选择配置的步骤，如想手动配置可以去掉。

启动项目：创建好项目后，进入项目目录并启动。

npm run serve  或  yarn serve

• 使用vite创建Vue3项目

Vite 是一个更轻量、快速的构建工具，推荐用于创建 Vue 3 项目。

确保你的环境中已经安装了Node.js。Vite需要Node.js版本14.18+或16+。你可以通过在命令行中输入node -v来检查是否已安装及版本号。

安装@vue/cli：首先，确保你已经全局安装了@vue/cli。你可以使用以下命令来安装或升级@vue/cli：

npm install -g @vue/cli 或 yarn global add @vue/cli

创建项目：使用vue create命令来创建一个新的Vue3项目。例如，如果你想创建一个名为my-project的项目，可以运行： 

npm create vite@latest my-vue-app --template vue

或者使用yarn

yarn create vite my-vue-app --template vue

注：1.在这个命令中，my-vue-app是你的项目名称，你可以根据需要修改它。--template vue指定了要使用的模板是Vue。 2. 按照提示操作。你会被要求选择一些选项，比如是否使用TypeScript等。根据你的需求进行选择。 3. 创建过程完成后，导航到你的项目目录并启动。

启动项目：创建好项目后，进入项目目录并启动。

npm run serve  或  yarn serve