Vue CLI 创建项目

205 阅读2分钟

创建项目

按键盘向下箭头进行选择,回车则进入下一步,空格键则是选中当前属性(Manually select features时使用)

命令:

vue create 项目名称

提示选择一个preset。可以选择Vue3或Vue2默认包含了基本设置的preset。也可以选择手动选择特性来选取需要的特性。 --- 一般情况下最好选择manually select features

image.png

2、manually select features(手动选择功能)

image.png

使用JavaScript开发时,除过默认选中的以外,再选择以下选项:使用space键(空格键)进行选择,enter键进入下一步

  • Router:路由;
  • Vuex:状态管理模式;
  • CSS Pre-processors:css 预处理器,可以理解为提前安装所需的CSS类型,一般选择SCSS

其他选项根据需要进行选择。

其他选项介绍

  • Babel:代码编译。
  • Progressive Web App (PWA) Support :渐进式Web应用程序。
  • Linter / Formatter:
  • Linter:代码检查工具,对代码进行静态分析,发现代码中的潜在错误
  • Formatter:格式化工具,用于统一编码风格
  • Unit Testing:单元测试
  • E2E Testing:e2e测试

image.png

3、选择Vue版本,默认选中的是Vue3,一般选择Vue2

image.png

4、使用的路由模式:是否选择使用历史模式(还有hash模式),一般选择Y

image.png

5、选择一个CSS预处理器,使用默认选项即可。

image.png

6、选择一个linter/formatter配置,使用默认选项即可

image.png

ESLint with error prevention only:只进行报错提醒
ESLint + Airbnb config:不严谨模式
ESLint + Standard config:正常模式
ESLint + Prettier:严格模式

7、选择校验时机:默认选中第一项即可

image.png

Lint on save:保存时检测
Lint and fix on commit:修复和提交时检测

8、选择Babel、ESLint等自定义配置的存放位置,默认选中第一个即可。

image.png

In dedicated config files:存放在专用配置文件中
In package.json:存放在package.json

9、是否保存当前选择的配置项,一般情况选择y,建议选择n

image.png

回车等待下载完成,如下项目创建完成

image.png

运行项目

npm run serve

image.png

运行成功

image.png