一、node.js的安装
对于Windows用户，建议安装Node.js版本8.9或更高（推荐8.11.0及以上）。您可以从Node.js官方网站下载.msi文件，并按照步骤进行安装。安装完成后，在命令行中输入
node -v
对于Linux用户，可以通过以下命令安装Node.js和npm：
apt-get install nodejs node -v apt-get install npm npm -v
npm命令的使用：
npm get registry
npm config set registry http://registry.npm.taobao.org/
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 <project name=""> // 文件名不支持驼峰命名（含大写字母）</project>
在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 <space> to select, <a> to toggle all, <i> to invert selection)>( ) Lint on save // 保存就检测 ( ) Lint and fix on commit // fix和commit时候检查</i></a></space>
⑤ 单元测试解决方案：
? 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
参考博客：https://www.php.cn/link/79aadfd37377569522c12e25d973b68e
以上就是Vue CLI 3.x搭建Vue项目的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
433
