前言

最近在学校老师的带领下,开发一个练手项目,叫做传智健康

这是一个单体项目,后端还是比较常规,前端使用的是Vue+Element,但是并未使用组件化。

再加上没有使用前端工程化,前端的代码显得非常杂乱,难以维护,所以想对其进行修改,打算将其修改为前后分离的项目。

之前没有接触过前端开发,所以从最简单的搭建脚手架开始吧~

安装

因为要使用前端工程化,所以必须要用到Node来构建我们的工程化项目。

你可以选择去官网下载单体的Node。

也可以选择下载NVM,NVM的下载可以参考站内文章:安装Node版本管理工具

安装好Node后,就可以安装我们的Vue脚手架了,在终端执行npm install -g @vue/cli以安装Vue脚手架

image-20231001173752834

程序员金句:警告不是错

执行完成后,会出现added xxx packages in xxm,就安装成功啦。

创建项目

进入终端,并切换到你项目想存放的目录后键入vue create <项目名称>以开始创建。

image-20231001175247117

可以看到默认给了我们三种方案:

  1. 快速创建Vue3:带babel与eslint
  2. 快速创建Vue2:带babel与eslint
  3. 手动创建

这里演示手动安装

使用方向键选择Manually select features选项,使用空格键选中(基于我的认知,选择了如下内容):

image-20231001181417402

选项解释如下:

选项说明
Babel使用Babel可以将新的JavaScript语法转换为浏览器可以理解的旧版本语法,以兼容性更好地支持不同浏览器。
TypeScript选择此选项可以使用TypeScript来编写你的Vue应用程序,它是一种类型安全的JavaScript超集。
Progressive Web App (PWA) Support选择此选项会为你的应用程序添加Progressive Web App支持,使你的应用可以像本地应用一样运行。
Router选择此选项将自动安装和配置Vue Router,它是Vue的官方路由器,用于管理应用程序的不同页面之间的导航。
Vuex选择此选项将自动安装和配置Vuex,它是Vue的官方状态管理库,用于在应用程序中管理全局状态。
CSS Pre-processors选择此选项可以选择使用哪种CSS预处理器,例如Sass、Less或Stylus,以增强你的样式表编写体验。
Linter / Formatter选择此选项将添加代码质量和风格检查工具,例如ESLint,并自动格式化你的代码。
Unit Testing选择此选项将添加单元测试的支持,你可以使用工具如Jest或Mocha来编写和运行测试。
E2E Testing选择此选项将添加端到端测试的支持,你可以使用工具如Cypress或Puppeteer来模拟用户操作并进行应用的整体测试。

回车后选择vue2.x版本:

image-20231001181504821

选择后会根据之前的选项配置各个选项,按需配置就行,也可以一直回车,构建完成后出现以下内容:

image-20231001181818370

进入项目目录cd <项目目录>,执行npm run serve,跑起来后访问http://localhost:8080/就可以看到已经搭建成功啦~

image-20231001182129068

image-20231001182227740

参考文档

手动搭建一个完整的vue2项目(超详细_完整步骤)