vue cli 创建项目

一、创建项目

1、语法格式

vue create <项目名>

注意: 项目名 不支持驼峰(含大写字母)

建议使用 使用全部小写字母跟字母之间使用短横线

2、栗子

vue create vue-example

image

二、选项信息

1、预设配置

如果之前有创建过项目并保存了配置 会提示多出一个预设的配置选项

2、默认设置

default(babel,eslint)

默认设置(直接enter)非常适合快速创建一个新项目的原型,没有带任何辅助功能的 npm包

3、自定义配置

Manually select features

提供可选的包的信息

三、自定义配置

1、说明

命令行创建项目需要用:

  • 方向键选择相关选项,回车进入下一级

  • 空格键 选择/取消选择

  • A键全选/取消全选

image

2、选项概要

>( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript包含并扩展了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 //(end to end) 测试

3、Babel

转化器, 可以将ES6代码转为ES5代码

4、Router

是否使用history router

  • hash

    默认值,浏览器url址栏中带#符号

  • history

    单页客户端应用(比如移动端应用)

5、Vuex

vue的状态管理

6、Progressive Web App (PWA) Support

PWA全称Progressive Web App,直译是渐进式WEB应用

7、预处理器

主要为css解决浏览器兼容、简化CSS代码等问题(Sass诞生于2007年,最早也是最成熟的一款CSS预处理器语言)

选择一个你熟悉的预编译语言(LESS)

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
//Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)

SCSS/SASS

//Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
LESS
//Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。
Stylus

8、ESLint

提供一个插件化的javascript代码检测工具(新手不建议开启)

? Pick a linter / formatter config: (Use arrow keys)

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

9、检测时机

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
// 保存就检测

( ) Lint on save
// fix和commit时候检查
( ) Lint and fix on commit

9、单元测试

? Pick a unit testing solution: (Use arrow keys)
//mocha灵活,只提供简单的测试结构,如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装

Mocha + Chai
//安装配置简单,容易上手。内置Istanbul,可以查看到测试覆盖率,相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect
Jest

10、存放配置的路径

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 独立文件放置

In dedicated config files
// 放package.json里
In package.json

11、是否保存本次配置

// y:记录本次配置,然后需要你起个名; n:不记录本次配置
? Save this as a preset for future projects? (Y/n)

你可能感兴趣的:(vue cli 创建项目)