使用vue cli4脚手架快速搭建项目

745 阅读1分钟

准备(检查是否安装了node、npm、vue-cli)

  • 查看是否安装node:node -v
  • 查看是否安装npm:npm -v
  • 查看是否安装vue-cli:vue -V (显示的是脚手架的版本号)
  • 如果没有安装 输入 npm install vue-cli -g安装

选择在一个目录下创建项目 (cd 拖动文件夹)

输入 vue create vuecli4

配置项目(方向键即可选择)

  • 也可以选择之前保存的模板直接配置项目

image.png

选择配置项(空格键选择)

  • 也可以自定义选项

image.png

  • ( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

  • ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行

  • ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序

  • ( ) Router // vue-router(vue路由)

  • ( ) Vuex // vuex(vue的状态管理模式)

  • ( ) CSS Pre-processors // CSS 预处理器(如:less、sass)

  • ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint)

  • ( ) Unit Testing // 单元测试(unit tests)

  • ( ) E2E Testing // e2e(end to end) 测试

选择vue版本,默认为2.x

#是否使用history router,默认n

  • 建议选n,因为打包出来到服务器可以直接运行,后面要使用的话,也可以自己再开起来,选择yes的话题、,需要服务器那边进行设置

image.png

选择css 预处理器

  • node-sass是自动编译实时的,dart-sass需要保存后才会生效,一般选择 node-sass

image.png

选择Eslint代码验证规则,ESLint + Standard config

image.png

选择什么时候进行代码规则检测,默认选项

image.png

是否保存当前配置项

image.png