Vue3 创建项目流程（vue create xxx）

卡尔特斯
804 阅读2分钟

一、安装

  • 如果电脑上已经安装的 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

  • 是否使用 class 风格的组件语法?

    ? Use class-style component syntax? (y/N) n

    如果习惯了 vue 的原生开发风格，建议选 n，什么是 class 风格的组件语法？。

    image.png

    上图是选 n 的代码风格，下图是选 y 的代码风格。

    image.png

  • 是否使用 Babel 与 TypeScript 一起用于自动检测的填充?

    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y

    这里一定要选 y。

  • 是否使用 class 风格的组件语法?

    ? Use class-style component syntax? (y/N) y

    如果在项目中想要保持使用 TypeScript 的 class 风格的话，建议选 y。

  • 路由是否使用 history 模式?

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

    这里根据情况选择，但是一般项目情况下选 y 会实用点。

  • 选择一种 CSS 预处理类型

    ? 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

    也就是是否把当前的这次配置保持，下次再新建项目的时候，可以选择这个配置项直接创建项目，类似开始的 Default 选项，可以快捷创建项目，看自己喜好。

  • 项目创建完成！各回各家！

avatar
文章
阅读
粉丝