说起来有点丢人，我已经使用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目录下，再为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下
assets 这个也已经有了，用来存放我们的资源文件，视频、音频、图片等。
此时的目录结构如下：
|-book |-babel.config.js |-package.json |-public | |-favicon.ico | |-index.html |-README.md |-src | |-api | |-App.vue | |-assets | | |-logo.png | |-components | | |-HelloWorld.vue | |-main.js | |-router | |-store | | |-index.js | |-utils | |-views |-yarn.lock
3.项目介绍我们要讲解vue的使用，总的拿个项目练手。我就做一回产品经理，虚拟一个图书管理项目吧。我们有2个页面。分别如下
登录页 ，用户输入账号admin和密码admin，就跳转到我们的首页
首页，显示一些图书信息（我为了省事就不显示了）。
这个项目会涉及到那些操作呢：
点击跳转
请求
展示
因此处理，vue提供给我们的组件外，我们还需要手动添加一下这些组件
路由组件：vue-router
请求组件：axios mock
ui组件：element-ui sass
表单验证组件：vee-validate
状态：vuex js-cookie
好了现在我们根据我们的需求，一步步开发我们的页面。
4. 开发项目4.1 登录页
在views文件夹下新建Login.vue、Index.vue 。这三个页面的代码大同小异，目前只是基本的代码，稍后还要修改。
<template> <!-- 这是login页面 --> <div>这里是login 页面</div> <!-- 这是index页面 --> <div>这里是index 页面</div> </template> <style> </style> <script> export default { name: 'Login', data() { return { } }, } </script>
修改src目录下的App.vue 文件。删掉#app文件里的内容，改为<router-view>，这里就是以为显示其他组件的地方。删除script中的内容。修改后的App.vue代码如下：
<template> <div> <router-view></router-view> </div> </template> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
5.vue-router使用vue开发任何一个项目都涉及都路由，所以我们先讲解路由。这里需要安装的组件是vue-router
D:\test\book>yarn add vue-router
在我们刚刚新建的router文件夹下新建index.js文件，程序如下