现在位置: 主页 > 技术文章 > 系统教程 >

Vue CLI 3.x搭建Vue项目

  • 蓮花仙者
  • 2025-08-30
  • 热度

一、node.js的安装

对于Windows用户，建议安装Node.js版本8.9或更高（推荐8.11.0及以上）。您可以从Node.js官方网站下载.msi文件，并按照步骤进行安装。安装完成后，在命令行中输入

node -v
，如果显示版本号，则表示Node.js已成功安装。此外，建议安装Git作为命令行终端，从Git官方网站下载并安装即可。

对于Linux用户，可以通过以下命令安装Node.js和npm：

apt-get install nodejs
node -v
apt-get install npm
npm -v

npm命令的使用：

  1. 查看当前的镜像地址：
npm get registry
  1. 将镜像源设置为淘宝镜像：
npm config set registry http://registry.npm.taobao.org/
  1. 恢复到原始镜像源：
npm config set registry https://registry.npmjs.org/

二、vue-cli的安装与更新

立即学习“前端免费学习笔记（深入）”；

如果您之前全局安装过旧版本的vue-cli（1.x或2.x），需要先卸载旧版本，否则可以跳过此步骤：

npm uninstall vue-cli -g

在卸载旧版本后，全局安装@vue/cli（Vue CLI 3的包名称已从vue-cli改为@vue/cli）：

npm install -g @vue/cli

更新@vue/cli：

npm update @vue/cli

检查安装是否成功（查看版本号，V大写）：

vue -V

三、使用vue-cli搭建Vue项目

使用以下命令可以创建一个新的Vue项目（注意此命令与vue-cli2.x不同）：

vue create   // 文件名不支持驼峰命名（含大写字母）

在Windows环境下，如果使用Git Bash创建项目，由于交互提示符可能不工作，您需要使用以下命令：

winpty vue.cmd create my-project

创建项目时，您将被提示选择一个预设。如果之前保存过配置，可以选择preset-config选项。如果没有保存过配置，您有两个选择：default（babel，eslint），适用于快速创建原型项目；Manually select features，手动配置功能，适合生产环境的项目。

选择手动配置后，您可以根据需要选择功能（使用方向键选择，按“空格键”选择/取消选择，A键全选/取消全选）。为了与vue-cli2.x创建的项目结构进行比较，我们这里仅添加Router功能，而不添加Vuex。

各参数的简要说明如下：

? Check the features needed for your project:>( ) Babel                              // 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。                       ( ) TypeScript  // TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为JavaScript在浏览器运行，目前较少人在用 ( ) Progressive Web App (PWA) Support  // 渐进式Web应用程序 ( ) Router                             // vue-router（vue路由） ( ) Vuex                               // vuex（vue的状态管理模式） ( ) CSS Pre-processors                 // CSS 预处理器（如：less、sass） ( ) Linter / Formatter                 // 代码风格检查和格式化（如：ESlint） ( ) Unit Testing                       // 单元测试（unit tests） ( ) E2E Testing                        // e2e（end to end） 测试

选择完功能后，您将被提示选择具体的工具包，选择您擅长或广泛使用的工具，以便在遇到问题时可以通过搜索引擎解决。具体选项包括：

① 是否使用history router：

② CSS预处理器：

? Please pick a preset: Manually select features? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):> SCSS/SASS  // Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）  LESS       // Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)  Stylus     // Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS。

③ ESLint提供一个插件化的JavaScript代码检测工具：

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

④ 何时进行代码检查：

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)>( ) Lint on save                    // 保存就检测 ( ) Lint and fix on commit          // fix和commit时候检查

⑤ 单元测试解决方案：

? Pick a unit testing solution: (Use arrow keys)> Mocha + Chai  // mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装  Jest          // 安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

⑥ 配置文件的存放位置：

? Where do you prefer placing config for Babel, PostCSS, 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:记录本次配置，然后需要你起个名; n：不记录本次配置

项目搭建完成后，进入项目目录并运行

npm run serve
即可访问Vue的默认演示页面。

参考博客：https://www.php.cn/link/79aadfd37377569522c12e25d973b68e