@vue/cli 脚手架 简介
脚手架 是一个工具
脚手架 帮助我们 创建一个基本的项目结构
1. @vue/cli 脚手架 的 安装 [只需要安装一次]
NPM i -g @vue/cli
2. 使用 脚手架 工具, 创建这个项目
vue create 项目名
安装配置步骤
2.1 选择版本, 后续都使用配置好的项目版本
- ? Please pick a preset: (Use arrow keys)
- default (babel, eslint)
> Manually select features [自定义配置]
2.2 选择所需模块
? Check the features needed for your project: (Press [space] to select, [a] to toggle all, [i] to invert selection)
>(*) Babel -- 识别 ES5\ES6 的语法, 并转换成 ES5 - 语法, 实现兼容
( ) TypeScript -- JavaScript 的一种语法糖
(*) Progressive web App (PWA) Support -- Web App 的进度支持
(*) Router -- 路由模块
(*) Vuex -- vuex 模块
(*) CSS Pre-processors -- CSS 预处理语言 (Less,Sass,stylus)
(*) Linter / Formatter -- [可选] 代码风格, 格式化代码 , 对于不符合风格的代码, 在开发环境下会进行报警告
( ) Unit Testing -- Unit 测试方法
( ) E2E Testing -- E2E 测试方法
必选的内容是 Babel,Router,Vuex,CSS Pre-processors
2.3 选择 路由的模式 [不重要]
是否使用历史模式
- ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
- Y
2.4 选择 CSS 预处理语言
- ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
- Sass/SCSS (with dart-Sass)
- Sass/SCSS (with node-Sass)
- > Less
- Stylus
2.5 选择代码格式化风格
- ? Pick a linter / formatter config: (Use arrow keys)
- ESLint with error prevention only
- ESLint + Airbnb config
- ESLint + Standard config
- > ESLint + Prettier
2.6 选择 本地存储 还是 Git 仓库 存储
Pick additional lint features:
> (*) Lint on save 本地自己保存
( ) Lint and fix on commit (requires Git) Git 仓库共享
2.7 选择 配置 保存的地方
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files 保存到配置文件
> In package.JSON 保存 package.JSON 文件
2.8 是否保存配置 [提供给下次安装使用]
? Save this as a preset for future projects? (y/N)
y yes 保存
? Save preset as: 保存的名字
自定义名字
第二次安装步骤:
2.1 输入安装命令
vue create 项目名
2.2 选择保存的版本
- Vue CLI v4.1.2
- ? Please pick a preset:
- > study1 (Less, babel, pwa, router, vuex, eslint)
- default (babel, eslint)
- Manually select features
3. 使用, 运行项目
3.1 进入项目目录
3.2 运行项目命令
NPM run serve
来源: http://www.jianshu.com/p/ec7389bdaca1