vue脚手架快速创建vue项目

315 阅读1分钟

创建项目

win+R进入命令行模式

image.png

# 创建项目
vue create my-project // 其中my-project为项目目录名称

选择 Manually select features 自己手动去选择需要的配置,回车即可

image.png

使用空格进行选择

image.png

  • Babel 主要是对es6语法转换成兼容的js (选上)

  • TypeScript 支持使用TypeScript语法来编写代码

  • PWA 支持

  • Router 支持vue路由配置插件(一般都会选择)

  • Vuex 支持vue程序状态管理模式 (一般都会选择)

  • CSS Pre-processors 支持css预处理器 (一般都会选择)

  • Linter / Formatter 支持代码风格检查和格式化 (选上)

  • Unit Testing 单元测试

  • E2E Testing E2E测试 选好后回车即可

image.png

image.png

本次项目是否采用history模式,如果选择Y,需要后台配置,这里选择n,回车即可

image.png

选择一种css预处理,项目一般使用SCSS,所以这块选择第一个

image.png

选择一种格式化代码方式,vscode一般选择 ESlint + Prettier

image.png

什么时候进行代码规则检测,一般会选择保存就检测,也就是Lint on save

image.png

Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个

image.png

是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了

image.png

启动项目

依次输入cd myprojectyarn serve即可启动项目

image.png