VUE CLI - 使用VUE脚手架创建前端项目工程

发布于:2025-05-11 ⋅ 阅读:(24) ⋅ 点赞:(0)

前言

        前端从这里开始,本文将介绍如何使用VUE脚手架创建前端工程项目

1.预准备(编辑器和管理器)

  • 编辑器:推荐使用VscodeWebStorm,或者Hbuilder(适合刚开始练手使用),个人感觉上面这些编辑器都比较方便~看个人习惯吧,我使用的是WebStorm(需要破解)。
  • Node.JS:Vue 脚手架是基于 Node.js 的环境来运行的,它需要 Node.js 提供的运行时环境和包管理工具 npm 来进行项目的创建、依赖安装等操作。下载地址:Node.js 中文网
  • 包管理工具npm:随 Node.js 一起安装,无需额外操作。它是 JavaScript 的默认包管理工具,能方便地安装、更新和卸载 Vue 脚手架以及项目所需的各类依赖包。使用上相对简单直接,对于一般的 Vue 项目开发完全能够满足需求。当然如果你习惯Yarn,也可以使用Yarn代替。

2.安装VUE脚手架

在Windows系统终端中,输入如下命令,进行脚手架的安装:

npm install -g @vue/cli
// 如果需要更换npm的下载源,可以先使用以下命令进行换源
npm config set registry https://registry.npmmirror.com  // 换为淘宝源
npm config get registry  // 查看淘宝镜像

使用 Vue -V,查看VUE脚手架是否安装成功,显示版本信息

3.使用脚手架创建VUE工程 

在你的工程目录下,使用 vue create 【项目名】创建工程 ,需要注意项目名不能有大写字母。

接着界面提示你选择一个预设配置(preset),主要有以下选项:

  • Default ([Vue 3] babel, eslint):使用 Vue 3 的默认配置,包含 Babel 和 ESLint。
  • Default ([Vue 2] babel, eslint):使用 Vue 2 的默认配置,包含 Babel 和 ESLint。
  • Manually select features:手动选择功能,可以自定义项目配置。

 

 选择第三个自定义选项,回车。接着出现下面的选项,分别代表:

  • Babel:JavaScript 编译工具,用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本。
  • TypeScript:一种静态类型检查语言,编译为 JavaScript。
  • Progressive Web App (PWA) Support:为项目添加 PWA 支持,使网页应用可以像原生应用一样工作。
  • Router:Vue 的官方路由管理器,用于构建单页应用(SPA)。
  • Vuex:Vue 的状态管理库,用于管理应用的状态。(不过现在一般使用Pinia~)
  • CSS Pre-processors:CSS 预处理器(如 Sass、Less 等)。
  • Linter / Formatter:代码检查和格式化工具,用于保持代码风格一致。
  • Unit Testing:单元测试工具,用于测试代码的各个部分。
  • E2E Testing:端到端测试工具,用于测试整个应用流程。

依据你的项目需要选择需要的部分,使用键盘上的 空格键 选择或取消选择功能。按 A 可以全选所有功能。 选择完之后,直接回车。

选择你的VUE版本,是VUE2还是VUE3 

 接着会跳出几个问题,是否使用类组件语法,是否使用TS语言,是否启用路由的历史模式(history mode),使 URL 更美观(去掉 #)。最后选择错误检查和代码风格规范,如果你希望代码自动格式化且减少风格争议,建议选择 ESLint + Prettier。

 

 

 


网站公告

今日签到

点亮在社区的每一天
去签到