详细-vue3项目初始化配置流程

一、安装Vue脚手架

1、先安装node

安装包可以去官网下载，安装步骤网上教程很多，这里不做提示。

在cmd窗口输入：node -v 命令，如果出现相应的版本号，则说明安装成功

2、安装vue

在cmd窗口输入以下命令：

javascript 复制代码

npm install -g @vue/cli
或者
yarn global add @vue/cli

3、安装淘宝镜像

javascript 复制代码

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、查看vue版本

javascript 复制代码

vue --version

二、命令行创建

1、vue-cli方式创建

javascript 复制代码

vue create demo

2、vite创建

javascript 复制代码

// npm创建
npm create @vitejs/app test_demo

// yarn创建
yarn create @vitejs/app test_demo

在这里我使用的是 vue-cli方式创建的项目

绿色方框里的内容是说我的vue版本需要升级，可以使用 npm i -g @vue/cli 命令进行操作

其他人在输入 vue create 项目名后，可能会出现这样一条语句：

javascript 复制代码

Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

意思是你不能科学上网，建议你使用过淘宝源，这时候需要选择Y，也就是使用淘宝源进行创建。如果你已经配置过淘宝源则不会显示这个选项。

javascript 复制代码

? Please pick a preset: (Use arrow keys)     // 请选择预选项
> Default ([Vue 2] babel, eslint)           // 使用Vue2默认模板进行创建
  Default (Vue 3) ([Vue 3] babel, eslint)  // 使用Vue3模板进行创建
  Manually select features                // 手动选择（自定义）

这个时候就要看实际需要了，不过相比较Vue2来说，Vue3对于TypeScript的支持更加友好，现在越来越多的项目也更偏向于Vue3开发。我个人更喜欢使用Vue3。这时候我们选择第三项：手动选择。会出现很多可供选择的选项让你自定义选择。（如果这时候的你没有上面的三个选项，说明Vue-Cli是旧版本，需要更新）

此时，默认会选择以上几个。

javascript 复制代码

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version                  // 选择Vue版本
 (*) Babel                               // javascript转译器
 ( ) TypeScript                          // 使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support   // 渐进式WEB应用
 ( ) Router                              // 使用vue-router
 ( ) Vuex                                // 使用vuex
 ( ) CSS Pre-processors                  // 使用css预处理器
 (*) Linter / Formatter                  // 代码规范标准
 ( ) Unit Testing                        // 单元测试
 ( ) E2E Testing                         // e2e测试

我在这里又选了 TypeScript、Router、Vuex、CSS Pre-processors，大家可跟具体情况而定

点击回车，进入下一层选择。

javascript 复制代码

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x  // 选择Vue2
> 3.x  // 选择Vue3

对于我来说，毫无疑问，选择 3.x

进入下一层：

javascript 复制代码

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N)  // 是否使用 class-style，目前基本上用不到，所以选择N

选择了TS之后会询问，是否使用Class的语法风格定义组件（React中的定义方式）

接下来会出现下面的选项：

意思是：是否使用TypeScript和Babel的形式编译 JSX

TypeScript 本身就有编译功能，默认会把 JavaScript 代码转换为 ECMAScript 3 版本兼容的代码

如果你需要现代模式、自动检测 polyfill、转换 JSX 语法等功能，则建议开启这个选项

当选择以后，TypeScript 本身只会把代码转为 ESNext，也就是最新版的 ECMAScript 规范

然后由 Babel 把 ECMAScript 转换为低版本 JavaScript，例如 ECMAScript 5，以及自动检测 polyfill、转换 JSX 等功能

说白了就是让 TypeScript 转换和 Babel 转换相结合起来一起使用

意思是：是不是用history模式来创建路由，我个人比较喜欢hash模式

hash模式和history模式的不同:

最直观的区别就是在url中 hash 带了一个 # 而history是没有#的

一般选择第一个或者第三个

javascript 复制代码

? 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

选择代码格式化检测

javascript 复制代码

? Pick a linter / formatter config:
  ESLint with error prevention only  // 只进行报错提醒
  ESLint + Airbnb config             // 不严谨模式
  ESLint + Standard config           // 正常模式
  ESLint + Prettier                  // 严格模式
> TSLint (deprecated)                // typeScrite格式校验工具

代码检查方式保存检查

文件配置，我选择配置在独立的文件中

保存上述配置，保存后下一次可直接根据上述配置生成项目，也可以选择不保存

按下回车，等待下载完成即可

如果下载完成后，cmd窗口出现报错：

这是因为少安装了vue-template-compiler模块

直接打开项目，在终端里运行：npm install vue-template-compiler 即可

或者 npm install vue-template-compiler -g 全局安装

然后运行 npm run serve 命令即可启动项目