一、安装
- 如果电脑上已经安装的
vue-cli
是老版本,没法选择vue3
,卸载重新装。
$ npm uninstall vue-cli -g
- 全局安装,默认安装最新版本
$ npm install -g @vue/cli
- 检查是否安装成功
$ vue --version
二、创建项目
$ vue create 项目名
? Please pick a preset: (Use arrow keys) Default ([Vue 3] babel, eslint) // 默认 vue3 配置 Default ([Vue 2] babel, eslint) // 默认 vue2 配置 ❯ Manually select features // 手动选择配置
- 选择
Default
直接创建项目,包括babel、eslint
这些工具,其他Router、Vuex
等其他依赖需要自己手动安装。 - 如果选择了
Manually select features(手动安装)
,则会进入配置选项
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed) ❯◉ Babel // 代码编译 ◉ TypeScript // ts ◯ Progressive Web App (PWA) Support // 支持渐进式网页应用程序 ◉ Router // vue路由 ◉ Vuex // 状态管理模式 ◉ CSS Pre-processors // css预处理 ◯ Linter / Formatter // 代码风格、格式校验(个人不喜欢受约束) ◯ Unit Testing // 单元测试 ◯ E2E Testing // 端对端测试
- 一般正常项目开发只需要
Babel
、Router
、Vuex
即可开始,根据自己喜好可以加上CSS Pre-processors
、Linter / Formatter
。
如果希望使用TypeScript
来代替JavaScript
进行开发,可以勾选下。 - 版本选择
? Choose a version of Vue.js that you want to start the project with (Use arrow keys) ❯ 3.x 2.x
? Use class-style component syntax? (y/N) n
- 如果习惯了
vue
的原生开发风格,建议选n
,什么是 class 风格的组件语法?。
上图是选n
的代码风格,下图是选y
的代码风格。 - 是否使用
Babel
与TypeScript
一起用于自动检测的填充?
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y
? Use class-style component syntax? (y/N) y
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ❯ Less Stylus
? 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) n