最近在研究vue3.0,相关的脚手架(vue-cli)更新到了V4.5以上,记录一下相关的使用
安装
如果之前安装过vue-cli 2.x的版本,也就是之前vue2.x对应的版本,需要先进行卸载,命令:
npm uni -g vue-cli
没有则跳过,接下来安装vue3.0的cli,命令:
npm i -g @vue/cli
查看vue-cli版本
vue -V
创建项目
输入指令
vue create 项目名
会出现这三种情况
1. 安装vue2预设Default ([Vue 2] babel, eslint)
安装下载vue2版本的预设,默认配置只有babel和eslint其他的都要自己另外再配置
2. Default (Vue 3 Preview) ([Vue 3] babel, eslint)
安装下载vue3版本的预设,默认配置只有babel和eslint其他的都要自己另外再配置
3. Manually select features
自定义选择配置项,图片看不清出的看文字,根据需要选择,下面有说明
Check the features needed for your project:
//检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
( ) Choose Vue version // 选择vue版本,不选择,默认安装`2.6.11`版本的vue
( ) Babel // 语法编译器,es6->es5
( ) TypeScript // 支持使用 TypeScript 书写源码
( ) Progressive Web App (PWA) Support // PWA 支持
( ) Router // 支持 vue-router
( ) Vuex // 支持 vuex
( ) CSS Pre-processors // 支持 CSS 预处理器。
( ) Linter / Formatter // 支持代码风格检查和格式化。
( ) Unit Testing // 支持单元测试。
( ) E2E Testing // 支持E2E测试。
选择部分选项后出现的配置选项
Choose a version of Vue.js that you want to start the project with?
选择你的vue版本,会让你选择2.x或者3.x,根据需要选择就行
Use class-style component syntax?
是否选择class风格的组件语法?
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
使用Babel与TypeScript一起用于自动检测的填充?
Use history mode for router? (Requires proper server setup for index fallback in production)
路由使用history模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
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
选择预处理的模式
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
选择语法检测规范
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: (Use arrow keys)
> Mocha + Chai
Jest
测试方式
Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
Nightwatch (WebDriver-based)
WebdriverIO (WebDriver/DevTools based)
e2e测试方式
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?
是否保存当前预设，下次构建无需再次配置
Save preset as
给这次的配置起一个名字
转载：https://blog.csdn.net/lhkuxia/article/details/115589483
查看评论