vue create 新建项目选项

本文详细介绍使用Vue CLI创建项目的步骤,包括安装Vue CLI、手动选择项目特性如Babel、Router、CSS预处理器等,配置ESLint代码规范,以及设置历史路由模式。还介绍了如何保存配置为预设,以便于后续项目快速搭建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一 . 安装 vue cli

npm install -g @vue/cli

二 . 创建项目 vue create ‘项目名’

vue create hello-world
  • 1、选择 Manually select features (自选项目配置)
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert s
election)
>(*) Babel   //ES6转ES5
 ( ) TypeScript   //JS超集
 ( ) Progressive Web App (PWA) Support   //渐进式Web应用
 (*) Router  //路由
 ( ) Vuex  //状态管理
 (*) CSS Pre-processors  //CSS预处理
 (*) Linter / Formatter   //规范类型
 ( ) Unit Testing  //测试
 ( ) E2E Testing  //测试
  • 2、是否使用history模式的路由 选择 “N” 或者 “Y”.
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
  • 3、CSS预处理器选择
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow ke
ys)
> Sass/SCSS
  Less
  Stylus
  • 4、选择哪个ESLint自动化代码格式化检测
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  • 5、选择语法检查的时期
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save  //语法检查配置文件保存时检查
 ( ) Lint and fix on commit  //文件提交时检查
  • 6、配置文件的存放位置(推荐独立放置配置文件)
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files  //放独立文件放置
  In package.json  //放package.json里
  • 7、是否保存此预设(选择yes的话下次就可以不用进行配置)
Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

三 . 运行

// 切换到项目
cd hello-world  
// 启动项目
npm run serve
<think>好的,我现在要回答用户关于使用`npm create vue`和`vue create demo`创建Vue项目的区别的问题。首先,我需要回忆一下自己对Vue脚手架工具的了解,并查阅相关的资料来确保准确性。 用户提到了三个引用,其中引用[1]和引用[2]提到了Vue CLI的版本变化以及create-vue这个工具。引用[3]是关于权限问题,可能和安装方式有关。我需要先理解这两个命令的背景。 首先,`vue create demo`是Vue CLI 2.x和3.x版本的命令,用于生成项目模板。Vue CLI是一个基于webpack的脚手架工具,用户可以通过它选择不同的配置选项,比如Babel、TypeScript、路由等。而引用[1]提到Vue CLI 2.0之后的版本命令不同,可能需要卸载旧版本,这说明Vue CLI的版本变化可能影响了命令的使用方式。 然后,`npm create vue`实际上是使用npm的初始化命令来调用`create-vue`这个包。根据引用[2],create-vueVue官方推荐的基于Vite的新项目脚手架工具,用于创建Vue 3项目。Vite是新一代的前端构建工具,相比webpack有更快的启动和热更新速度。所以`npm create vue`应该是使用Vite作为构建工具,而`vue create`使用的是webpack。 接下来,我需要确认这两个命令对应的脚手架工具的不同。Vue CLI(即`vue create`)通常与Vue 2项目关联较多,虽然也支持Vue 3,但默认配置可能不同。而`create-vue`是专门为Vue 3设计的,并且集成了Vite,这可能意味着更轻量化的配置和更现代化的工具链。 另外,用户权限问题(引用[3])可能出现在全局安装旧版Vue CLI时,因为需要写入全局node_modules目录。而`npm create vue`不需要全局安装,因为它使用npx来临时下载并执行create-vue包,避免了全局安装的权限问题。 总结一下,两者的主要区别在于使用的构建工具(webpack vs Vite)、Vue版本倾向(Vue 2 vs Vue 3)、安装方式(需要全局安装CLI vs 使用npx临时安装)以及配置选项的不同。此外,create-vue可能提供更简洁的项目结构,而Vue CLI则有更多可配置的插件和功能。 需要确保回答中正确引用用户提供的参考资料,并自然地插入引用标识。例如,引用[1]提到卸载旧版Vue CLI,引用[2]说明create-vue的结构,引用[3]涉及权限问题。这些都可以在回答中适当引用,以增强可信度。 最后,生成相关问题时要围绕Vue项目创建、工具选择、迁移建议等方面,帮助用户进一步探索。</think>### npm create vuevue create demo 的区别 #### 1. **工具来源与定位** - **`npm create vue`** 基于官方推荐的 **`create-vue`** 工具(Vue 3+项目专用),通过Vite构建工具初始化项目,面向现代化轻量开发[^2]。 命令本质是`npm create vue@latest`,利用npm的`create`指令直接调用最新版`create-vue`,无需全局安装脚手架。 - **`vue create demo`** 依赖**Vue CLI**(需全局安装`vue-cli`包),基于webpack构建,适用于Vue 2或兼容Vue 3的传统配置项目[^1]。 需要先执行`npm install -g @vue/cli`才能使用。 #### 2. **构建工具差异** - **`npm create vue`** 使用**Vite**作为构建工具,优势在于极速的冷启动和热更新,适合追求开发效率的场景。 - **`vue create demo`** 使用**webpack**,功能成熟但配置相对复杂,适合需要深度定制构建流程的项目。 #### 3. **项目结构与配置** - **`npm create vue`** 生成的项目结构更简洁,默认集成Vue 3、Pinia(状态管理)、Vue Router等,配置文件`vite.config.js`集中管理构建选项[^2]。 - **`vue create demo`** 提供交互式选项(如选择Babel、TypeScript、CSS预处理器等),生成包含`webpack.config.js`及相关插件的项目结构,适合需要逐步配置的场景。 #### 4. **安装与权限问题** - **`npm create vue`** 无需全局安装,通过`npx`临时下载`create-vue`执行,避免权限冲突(如引用[3]中的权限问题)。 - **`vue create demo`** 需要全局安装`@vue/cli`,若旧版存在可能导致命令冲突,需先卸载旧版(如引用[1]中的`npm uninstall -g vue-cli`)。 #### 5. **适用场景** - 选择`npm create vue`: - 新建Vue 3项目,追求开发速度 - 希望默认集成Vite、Pinia等现代工具链 - 选择`vue create demo`: - 维护Vue 2项目或需要webpack生态插件 - 需要交互式配置选项(如单元测试、PWA支持) --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值