【转载】VueCLI v4 创建vue项目 （手选模式创建）

1.创建项目

vue create v1

   
   

   
   
1

v1 项目名称

大意：请选择一个预设（有3个预设置）

Default ([Vue 2] babel, eslint)  
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features  # 手动选择功能

   
   

   
   
1
2
3

2.选择 Manually select features创建

Vue CLI v4.5.4
? Please pick a preset: Manually select features
# 检查项目所需的功能：（按<space>选择，<a>切换全部，<i>反转选择）
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing 

   
   

   
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14

序号	选项	描述	选择
1	Choose Vue version	选择Vue版本	Y
2	Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5	Y
3	TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
5	Router	路由
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
8	Linter / Formatter	格式化程序	Y
9	Unit Testing	单元测试
10	E2E Testing	端到端（end-to-end）

请按照你自己的需求选择，我的选择如上图示。

2.1.Choose Vue version

2.x
3.x (Preview) 

   
   

   
   
1
2

2.2.Linter / Formatter

ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

   
   

   
   
1
2
3
4

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则 这些规则在这里添加链接描述
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb
的规则在这里添加链接描述 ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard
第三方的配置 Standard 的规则在这里 添加链接描述 ESLint + Prettier 使用 ESLint 官网推荐的规则 +
Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具

 Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

   
   

   
   
1

(*) Lint on save
( ) Lint and fix on commit

问：您希望在哪里放置Babel，ESLint等的配置？

Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files #在专用配置文件中
In package.json 

   
   

   
   
1
2
3

问：将此保存为预设以供将来的项目使用吗？ （是/否）

Save this as a preset for future projects? (y/N)    

   
   

   
   
1

（回答） y
问：保存位置

Save preset as:   

   
   

   
   
1

（回答）
我直接给文件名称：v1_preset，没有给路径，运行会提示保存在哪里，如下图示：

完后》开始安装

3.创建完后的项目

4.运行项目

 cd v1
 npm run serve

   
   

   
   
1
2

运行成功：

5.访问项目

6.后续遗留问题

问题1：我是不是可以用预设文件去创建项目呢？
问题2：其他模式创建是什么样的？
问题3：要是选择其他组件支持，创建时是什么样的？

7. 参考

https://www.it610.com/article/1282792812634456064.htm