用 create-vue 从 0 到 1 搭建一个后台管理系统

当前网站开发用到的是 Vue3 版本，如果平时项目用 Vue2 版本可以当扩展阅读，在网站和目录布局设计上看其实两个版本差太多。当然很多细节实现还是有一些差异的。

1. 环境准备

1.1 安装 nodejs

如果本地没有装 node的先去 node 官网 进行下载。

需安装最新版本的 node

1.2 安装 Vue CLI

现在 Vue 官网建议使用 create-vue 去搭建 vue 项目。

2. 搭建 Vue 项目

2.1 使用 CLI 创建项目

执行命令 npm init vue@3

2.2 安装依赖

进入项目目录去安装相应的依赖。推荐使用 pnpm进行安装依赖，但是现阶段 pnpm install有时候会有依赖缺失问题，所以可以先进行 pnpm install，如果有依赖缺失的话，可以使用 npm install进行安装。

2.3 启动项目

如果不知道启动的命令可以打开 package.json进行查看。也可以通过 cat package.json进行查看。

执行命令 npm run dev启动。💢 可恶报错了。

然后经过一番周旋知道是因为node过低导致的。所以我们借助 nrm或者 n来切换我们使用的 node 版本。这里我用 n安装了 18.12.0版本。

然后使用 node/18.12.0版本。最后，我们再去试一下，项目能否正常运行。

🎉 项目正常运行了

2.4 规范目录结构

项目能正常运行之后，我们就需要在基础项目上，搭建一个完整的前端项目了。

稍微的改动一下目录结构，在原有的基础上增加了两个目录 utils和 styles。接下来我们具体列一下这几个目录的作用。

public放置静态资源目录，可通过路由拼接直接访问。

src/assets 放置图片等资源，不可通过url拼接直接访问，打包会直接打入代码内部。

src/components 放置公共的组件，提取的公共组件可放入这个文件夹。

src/router放置路由配置，可在内部实现进入路由和出路由处理业务的相关逻辑。

src/stores