本文针对已经安装好node, npm, vue cli的情况~~~
ps:没安装的自行安装呀~
然后开始创建项目!

1.进入想要存放即将创建项目的目录,输入命令:

对应命令:

vue create project-name

2.选择“Manually select features”(手动配置)

ps:通过↑ ↓ 箭头选择你要配置的项
图片中对应的下标:
  1. 在创建项目最后一步问你是否保存当前配置:键入N不记录,如果键入Y需要输入保存名字。
  2. 默认安装的配置。
  3. 我们选择这个~~~手动配置
然后 按 Enter键继续后续步奏~~~

3.选择你需要的配置项

ps:依然是通过↑ ↓ 箭头选择你要配置的项,空格 是选中或取消
上图是我的项目需要的配置,上图列出的配置说明如下:
  1. Choose Vue version----选择vue的版本;
  2. Babel----转码器,可以将ES6代码转为ES5代码;
  3. TypeScript----TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法;
  4. Progressive Web App (PWA) Support----渐进式Web应用程序;
  5. Router----vue-router(vue路由);
  6. Vuex----vuex(vue的状态管理模式);
  7. CSS Pre-processors----CSS 预处理器(如:less、sass);
  8. Linter / Formatter----代码风格检查和格式化(如:ESlint);
  9. Unit Testing----单元测试(unit tests);
  10. E2E Testing----e2e(end to end) 测试;
选完之后按 Enter 继续选择选中配置的值(我选的如下)~~~
对应下标解释:
  1. vue的版本:按需选择~

  2. 使用history router:依然按需选择呀~

  3. 选择css 预处理器(node-sass是自动编译实时的,dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现)

  4. 选择Eslint代码验证规则—ESLint + Prettier使用较多,所以嘛~遇到问题,能找到解决方案的可能性更大

  5. 选择什么时候进行代码规则检测:
    Lint on save // 保存就检测
    Lint and fix on commit // fix和commit时候检查
    为了等到commit的时候,问题可能都已经积累很多了,所以建议选择保存就检测~

  6. 选择单元测试:按需选择~

  7. 如何存放配置:
    In dedicated config files // 独立文件放置
    In package.json // 放package.json里
    所以 按需选择~

8.是否保存当前配置,保存的话 下次创建项目就更方便啦~

4.创建项目ing…

然后就创建成功啦~~~

Logo

前往低代码交流专区

更多推荐