vue create 新建项目选项

最新推荐文章于 2025-05-09 13:54:31 发布

长发飘飘.

最新推荐文章于 2025-05-09 13:54:31 发布

阅读量9.6k

点赞数 21

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/xfWgaoqiang/article/details/107691466

本文详细介绍使用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