配置一个vue3.0项目的完整步骤

说起来有点丢人，我已经使用vue好久了，但是怎么从0开始配置一个vue项目，每次还是要百度。这次决定写个博客，加强下记忆，如果再记不住就直播自己的女朋友洗澡。

以下以新建一个图书管理项目为例。我使用vue3新建项目，对于创建一个项目来说，vue3真的比vue2简单很多。

1.初始化项目

1.1全局安装vue-cli

创建vue项目，首先要确保全局安装了vue命令行工具。

我这边使用yarn而不用npm，因为yarn要比npm好用的多，强烈推荐使用。如果大家对yarn不熟悉，我这边免费赠送我的yarn教程。 点击查看 。

yarn add global @vue/cli

1.2 新建项目

使用vue-cli3开发项目，可以使用图形化界面，也可以使用命令行，还可以基于原型进行开发。我这里以常见的基于命令行的开发为例。

我想在我D盘的test文件夹下新建一个图书管理项目，项目名叫book。执行如下命令即可。

D:test>vue create book

这里可以选择我们需要安装的预处理器preset。我们可以直接选下图中的第一个选项，这样可以省去很多麻烦。不过这里为了讲解需要，我们选择默认的（bable+eslint）。往后我们再讨论怎么手动安装其他preset。我强烈建议你选择第一项，这样真的可以省去很多麻烦。

程序执行完后，项目结构如下：

.
|-book
 |-babel.config.js
 |-package.json
 |-public
 | |-favicon.ico
 | |-index.html
 |-README.md
 |-src
 | |-App.vue
 | |-assets
 | | |-logo.png
 | |-components
 | | |-HelloWorld.vue
 | |-main.js
 |-yarn.lock

将命令行路径设置为book项目所在的路径

D:test>cd book

启动项目

yarn serve

执行完，我这边没有报错，就说明安装没有问题。

2.项目结构

vue已经给我们新建了一个初始的项目结构，但是这个项目结构还不完善。我们需要新建一下几个目录。新建的目录都是新建在src目录下。

views 用户存放我们的页面
store 放置vuex程序
api 放置所有的接口程序
utils 放置工具函数（可有可无）
router 放置路由信息
styles 放置全局样式（可有可无）
components 这个已经有了，用来存放我们页面中的组件。我们可以直接把组件新建在components目录下，不过这样不太清晰，我喜欢在components目录下，再为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下