如何创建vue项目，创建的方式？
创建vue项目的方法主要有3种：
1.Vue CLI: Vue CLI是官方提供的脚手架工具，可以通过命令行工具快速创建一个Vue项目。
2.使用 Vite 工具创建 Vue 项目。
3.使用webpack创建vue项目。
一.使用 Vue CLI 工具创建 Vue 项目的方法如下：
- 安装 Node.js 和 npm
首先需要安装 Node.js 和 npm 包管理器，Node.js 官网提供了对应的安装包和指南，可以根据自己的操作系统和版本选择下载和安装。
- 安装 Vue CLI
通过 npm 安装 Vue CLI，使用以下命令：
npm install -g @vue/cli- 创建 Vue 项目
进入到要创建项目的目录，使用 Vue CLI 创建项目，使用以下命令：
vue create my-project其中 my-project 是你要创建的项目名称，也可以根据需要替换成其他名称。
- 选择项目配置项
执行上述命令后，会提示你选择项目配置项，包括预设、特性和插件等。你可以根据自己的需求和喜好进行选择，或者直接按 Enter 键使用默认值。
- 运行项目
使用以下命令运行项目：
cd my-project npm run serve其中 my-project 是你创建的项目名称，在项目根目录下执行 npm run serve 命令后，会启动开发服务器，你可以在浏览器中访问 http://localhost:8080 查看项目效果。
以上就是使用 Vue CLI 工具创建 Vue 项目的方法。
二.使用vite创建vue项目，这也是官方推荐的创建方式。
- 安装 Node.js
首先需要安装 Node.js，可以根据自己的操作系统和版本选择下载和安装。
- 安装 Vite
通过 npm 安装 Vite，使用以下命令：
npm install -g vite- 创建 Vue 项目
进入到要创建项目的目录，使用 Vite 创建项目，使用以下命令：
vite create my-project其中 my-project 是你要创建的项目名称，也可以根据需要替换成其他名称。执行上述命令后，Vite 会在当前目录下创建一个新的项目，但需要手动安装相关依赖。
1，进入项目目录，使用npm install 下载依赖。
2.运行项目
使用以下命令运行项目
npm run dev其中 my-project 是你创建的项目名称，在项目根目录下执行 npm run dev 命令后，会启动开发服务器，你可以在浏览器中访问 http://localhost:3000 查看项目效果。
以上就是使用 Vite 工具创建 Vue 项目的方法，Vite 是一个基于 ES Module 的开发工具，可以帮助开发者快速搭建 Vue 项目，并提供了快速热重载、按需加载等功能，可以大大提升开发体验。
三.使用webpack搭建vue项目（1）
- 安装 Node.js 和 npm
首先需要安装 Node.js 和 npm 包管理器，Node.js 官网提供了对应的安装包和指南，可以根据自己的操作系统和版本选择下载和安装。
- 初始化项目
在命令行中进入要创建项目的目录，执行以下命令初始化项目：
npm init -y该命令会生成默认的 package.json 文件，其中 -y 参数表示使用默认值。
- 安装依赖
在命令行中执行以下命令安装 Vue 相关依赖：
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server css-loader style-loader babel-loader @babel/core @babel/preset-env --save-dev其中，各个依赖的作用如下：
vue：Vue.js 框架库。vue-loader、vue-template-compiler：用于编译 Vue 单文件组件（.vue文件）。webpack、webpack-cli、webpack-dev-server：Webpack 相关库，用于构建和开发服务。css-loader、style-loader：用于解析 CSS 样式文件。babel-loader、@babel/core、@babel/preset-env：用于将 ES6+ 语法转换为浏览器可执行的 JavaScript。
- 配置 Webpack
在项目根目录下新建一个 webpack.config.js 文件，并添加如下代码：
const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true, open: true } }其中，各个配置的作用如下：
entry：指定 Webpack 构建入口文件。output：指定 Webpack 构建输出文件。module.rules：指定模块加载规则，例如用vue-loader处理.vue文件、使用css-loader和style-loader处理样式文件等。plugins：插件配置，这里使用了热更新插件HotModuleReplacementPlugin。devServer：开发服务配置，例如启用热更新和自动打开浏览器等。
- 编写代码
在 src 目录中编写 Vue 组件的代码，在 main.js 中创建 Vue 实例并渲染组件。
- 运行项目
在命令行中执行以下命令启动开发服务：
npx webpack serve这会启动 Webpack 的开发服务，可以在浏览器中访问 http://localhost:8080 查看项目效果。
以上就是使用 Webpack 创建 Vue 项目的方法，虽然需要手动配置比较复杂，但是可以根据需求进行高度的自定义和扩展，是比较灵活和强大的构建工具。
如果使用的是较新版本的 Node.js（v5.2.0 以上），则 npx 已经自带在其中，无需额外安装。如果您的 Node.js 版本过低，可以通过 npm 安装 npx：
npm install -g npx这个命令会全局安装 npx，安装完成后即可在命令行中使用 npx 命令。
需要注意的是，npx 只能在 npm v5.2.0 及以上版本中使用。如果您的 npm 版本过低，可以通过以下命令升级到最新版本：
npm install -g npm@latest升级完成后就可以安装和使用 npx 了。
使用webpack创建vue项目（2）
- 首先安装Node.js和npm。
- 在命令行中输入以下命令全局安装vue-cli： npm i -g @vue/cli-init。
- 创建一个新的vue项目：vue init webpack my-project。
- 进入项目目录：cd my-project。
- 安装依赖：npm install。
-
vue init webpack text4 ? Project name text4//项目名称 ? Project description A Vue.js project//项目描述 ? Author leihaolog <[email protected]>//项目作者 ? Vue build standalone//构建方式 ? Install vue-router? Yes//下载路由 ? Use ESLint to lint your code? Yes//下载代码检测 ? Pick an ESLint preset none//选择分支风格 ? 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//选择运行方式 vue-cli · Generated "text4".这个项目是个vue2的项目
-
完整的创建步骤可以参考这个链接：使用webpack搭建vue项目；webpack+vue_webpack创建vue项目_max_YaoXC的博客-CSDN博客