说起来有点尴尬，我用vue很久了，但是如何从0配置一个vue项目，每次都需要百度。这次，我决定写一篇博客来加强我的记忆。如果想不起来，就广播女朋友洗澡。

下面以一个新的图书馆管理项目为例。我用vue3建立了一个新项目。对于创建项目来说，vue3确实比vue2简单得多。

1.1 vue-CLI的全球安装

要创建vue项目，我们必须首先确保vue命令行工具是全局安装的。

我用纱代替npm，因为纱比npm好用多了，强烈推荐。如果你不熟悉纱线，我会免费给你我的纱线教程。点击查看。

Yarnadglobal @ vue/cli1.2新项目

使用vue-cli3开发项目可以使用图形界面、命令行和原型。我以基于命令行的通用开发为例。

我想在我的D盘上的测试文件夹下新建一个库管理项目，项目名是book。执行以下命令。

D:testvue在这里创建书籍，您可以选择我们需要安装的预处理器预置。我们可以直接选择下图中的第一个选项，可以省去很多麻烦。然而，为了解释起见，我们选择了默认值(bable eslint)。稍后我们将讨论如何手动安装其他预设。强烈建议你选择第一种，真的可以省去很多麻烦。

程序执行后，项目结构如下：|-book |-babel . config . js |-package . JSON |-public | |-fav icon . ico | |-index . html |-readme . MD |-src | |-app . vue | |-assets | |-logo . png | |-components | |-hello world . vue | |-main . js |-yarn . lock将命令行路径设置为book项目所在的路径

D:testcd book启动项目

Yarnservice完成，这里没有报错，说明安装没有问题。

1.初始化项目

vue为我们创建了一个初步的项目结构，但这个项目结构并不完美。我们需要创建一些新的目录。新创建的目录都创建在src目录下。

视图的用户存储我们的页面存储place vuex程序api place所有接口程序utils place工具函数(可选)路由器place路由信息样式place全局样式(可选)组件该组件已经存在，用于存储我们页面中的组件。我们可以直接在components目录中创建组件，但是不清楚。我喜欢在Components目录中为每个页面创建一个新的文件夹，并将每个页面的组件放在相应的文件下。资产已经存在，用来存储我们的资源文件、视频、音频、图片等。此时的目录结构如下：

|-book |-babel . config . js |-package . JSON |-public | |-fav icon . ico | |-index . html |-readme . MD |-src | |-API | |-app . vue | |-assets | |-logo . png | |-components | |-helloworld . vue | |-main . js | |-router | |-store | |-index . js | |-utils | |-view |-yarn . lock

2.项目结构

我会做一次产品经理，做一个虚拟图书馆管理项目。我们有两页。它们如下

在登录页面，用户输入账号admin和密码admin，跳转到我们的主页，显示一些图书信息(为了省事我就不显示了)。该项目将涉及哪些操作：

点击跳转请求显示vue提供的组件，我们还需要手动添加这些组件

路由组件：vue-路由器请求组件：axios模拟ui组件：element-ui sass表单验证组件：vee-validate状态：vuex js-cookie已准备好。现在我们根据自己的需求一步一步地开发我们的页面。

3.项目介绍

4.1登录页面

在视图文件夹下创建新的Login.vue和Index.vue。这三页的代码差不多，目前只是基本代码，以后会修改。

模板！-这是登录页面- div这是登录页面/div！-这是索引页-这是索引页/索引页/模板