VueCLI v4.5.4 创建vue项目(手选模式创建)

1.创建项目

vue create v1

v1 项目名称
VueCLI v4.5.4 创建vue项目(手选模式创建)_第1张图片
大意:请选择一个预设(有3个预设置)

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

2.选择 Manually select features创建

VueCLI v4.5.4 创建vue项目(手选模式创建)_第2张图片

Vue CLI v4.5.4
? Please pick a preset: Manually select features
# 检查项目所需的功能:(按选择,切换全部,反转选择)
? Check the features needed for your project: (Press  to select,  to toggle all,  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 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) 

2.2.Linter / Formatter

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

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  to select,  to toggle all,  to invert selection)

(*) 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 

问:将此保存为预设以供将来的项目使用吗? (是/否)

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

(回答) y
问:保存位置

Save preset as:   

(回答)
我直接给文件名称:v1_preset,没有给路径,运行会提示保存在哪里,如下图示:
在这里插入图片描述
完后》开始安装
VueCLI v4.5.4 创建vue项目(手选模式创建)_第3张图片

3.创建完后的项目

VueCLI v4.5.4 创建vue项目(手选模式创建)_第4张图片

4.运行项目

 cd v1
 npm run serve

运行成功:
VueCLI v4.5.4 创建vue项目(手选模式创建)_第5张图片

5.访问项目

VueCLI v4.5.4 创建vue项目(手选模式创建)_第6张图片

6.后续遗留问题

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

参考

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

你可能感兴趣的:(Vue)