Vue-cli v4.5.x 创建项目

最新推荐文章于 2024-03-21 17:16:14 发布

不在江南

最新推荐文章于 2024-03-21 17:16:14 发布

阅读量4.8k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/oowweb/article/details/114369483

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装

安装3.x及以上版本
npm i @vue/cli -g	

安装1.x或2.x版本
npm i vue-cli -g 	

安装指定版本
npm i @vue/cli@4.5.4 -g

创建

vue create cryptojs

选择预设:(使用方向键)

? Please pick a preset: (Use arrow keys) 
> Default ([Vue 2] babel, eslint) #vue2 + babel + eslint基础配置
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)  #vue3预览版 + babel + eslint基础配置
  Manually select features  # 手动选择功能

选择项目的特性

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
>(*) E2E Testing

属性	描述
Choose Vue version	选择Vue版本
Babel	将es6 语法转换成兼容的 js
TypeScript	支持使用 TypeScript 语法来编写代码
Progressive Web APP(PWA) Support	PWA 支持
Router	vue 路由配置插件
Vuex	vue 程序状态管理
CSS Pre-processors	css 预处理
Linter / Formatter	代码风格检查和格式化
Unit Testing	单元测试
E2E Testing	E2E 测试

是否使用路由的 history 模式

 Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

选择一个CSS预处理器

(默认支持PostCSS, Autoprefixer和CSS模块)
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。（该回答参考http://www.imooc.com/qadetail/318730）

网上反应：在大型项目中使用dart-sass比 node-sass（js本机C库的包装）要慢于很多。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

选择：编码规则

推荐 ESLint + Prettier, 可以保证Prettier格式化和ESLint规划统一

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

属性	描述
ESLint with error prevention only	只配置使用 ESLint 官网的推荐规则这些规则在这里添加链接描述
ESLint + Airbnb config	使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb的规则在这里添加链接描述
ESLint + Standard config	使用 ESLint 官网推荐的规则 + Standard 第三方的配置 Standard 的规则在这里添加链接描述
ESLint + Prettier	使用 ESLint 官网推荐的规则 + Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具

选择代码规则检测方式

一般会选择保存就检测 Lint on save。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择一个单元测试解决方案

? Pick a unit testing solution:
  Mocha + Chai
> Jest

主流前端测试框架对比

单元测试框架	Jasmine	Mocha	Jest
	比较老的框架	广泛使用的框架	新的热门框架，由facebook开源支持
优点	1、开箱即用（支持断言和仿真）2、比较"老"，坑基本有人踩过	1、灵活性高可扩展性好,更多的与其他一些库结合使用 2、社区最成熟	1、开箱即用配置少 2、API简单支持断言，仿真，快照测试，在隔离环境下测试 3、互动模式选择要测试的模块 4、优雅的测试覆盖率报告 5、mock丰富 6、IDE整合 7、提供全面的方案
缺点	比较老旧	需要较多配置，一些功能需要引入其他的库	热门的新框架，社区没有Mocha成熟

由于项目使用vue，vue官方推荐使用 Jest 和 Mocha + chai，因为jest 速度快，API简单，易配置，隔离性好，监控模式，IDE整合，snapshot，生成测试报告，mock丰富，适合大型项目快速上手，所以项目采用jest做单元测试

选择一个端对端测试解决方案

? Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based)

您希望Babel, ESLint 配置的存放位置，我们选择在专用的配置文件中

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files     //在专用的配置文件中
  In package.json               //在package.json

Save this as a preset for future projects?(y/N) （是否保存配置我们可以选择Y ，保存后下次构建项目的时候就可以直用这次的配置构建项目）

? Save this as a preset for future projects? (y/N)

创建完成

Testing binary
Binary is fine
added 115 packages from 87 contributors in 26.91s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project cryptojs.
👉  Get started with the following commands:

 $ cd cryptojs
 $ npm run serve

运行项目

cd cryptojs
npm run serve

注

一切不清楚的东西官方推荐设置
选择大写字母(y/N)

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

? Save this as a preset for future projects? (y/N)