Bootstrap

# 使用 vue-cli 创建项目,包含翻译,详细解释

选择手动配置如下步骤,包含翻译,详细

// 利用 vue-cli 创建项目
vue create imooc-admin
// 进入模板选择
Vue CLI v4.5.13
? Please pick a preset://翻译:请选择一个预设Please请pick选择a一个preset预设、模版
  Default ([Vue 2] babel, eslint)//翻译:Default 默认(Vue 2包含babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) //翻译:Default 默认(Vue 3包含babel, eslint)
> Manually select features  // 选择手动配置,翻译:Manually手动 select选择 features配置/功能/特性
// ----------------------------------------------------------
? Check the features needed for your project: //翻译:检查项目所需的功能:
 (*) Choose Vue version // 选择 vue 版本(默认、如果不是默认就选择)
 (*) Babel // 使用 babel
 ( ) TypeScript // 不使用 ts
 ( ) Progressive Web App (PWA) Support // 不使用 PWA
 (*) Router // 添加 vue-router
 (*) Vuex // 添加 vuex
>(*) CSS Pre-processors // 使用 css 预处理器
 (*) Linter / Formatter // 代码格式化
 ( ) Unit Testing // 不配置测试
 ( ) E2E Testing  // // 不配置测试
// ----------------------------------------------------------
 Choose a version of Vue.js that you want to start the project with //翻译:选择要启动项目的Vue.js版本
  2.x
> 3.x // 选择 vue 3.0 版本
// ----------------------------------------------------------
 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n //翻译:是否使用路由器的历史记录模式?(需要正确的服务器设置,以便在生产中进行索引回退) 
 //不使用 history模式 的路由

// ----------------------------------------------------------
 ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): //翻译:选择一个CSS预处理器(默认支持PostCSS、Autoprefixer和CSS模块)
> Sass/SCSS (with dart-sass) // 使用基于 dart-sass 的 scss 预处理器
  Sass/SCSS (with node-sass) 
  Less
  Stylus
// ----------------------------------------------------------
? Pick a linter / formatter config: //翻译:选择一个 linter / formatter 配置
  ESLint with error prevention only //翻译:仅包含错误的ESLint
  ESLint + Airbnb config//翻译:Airbnb 的 ESLint延伸规则
> ESLint + Standard config // 使用 ESLint 标准代码格式化方案
  ESLint + Prettier 
// ----------------------------------------------------------
? Pick additional lint features: //翻译:选择额外的 lint 特性
 (*) Lint on save //  
>(*) Lint and fix on commit  // 保存时 && 提交时,都进行 lint
// ----------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)//翻译:你更喜欢在哪里放置 Babel、ESLint 等配置?
> In dedicated config files // 单独的配置文件
  In package.json
// ----------------------------------------------------------
? Save this as a preset for future projects? (y/N) n // 不存储预设

选择默认配置

// 利用 vue-cli 创建项目
vue create imooc-admin
// 进入模板选择
Vue CLI v4.5.13
? Please pick a preset://翻译:请选择一个预设Please请pick选择a一个preset预设、模版
> Default ([Vue 2] babel, eslint)//翻译:Default 默认(Vue 2包含babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) //翻译:Default 默认(Vue 3包含babel, eslint)
  Manually select features  // 选择手动配置,翻译:Manually手动 select选择 features配置/功能/特性

//等待下载完毕即可

等待片刻之后,你的项目就会生成成功。

生成之后,可以通过以下两个指令来运行你的项目:

cd 项目目录
npm run serve

执行成功之后,项目即可运行!

;