vue-cli3.0从0开始搭建项目

vue3.0真的比vue2.0简单很多

1.初始化项目

1.1全局安装vue-cli

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

我这次打算使用yarn，因为yarn要比npm好用的多，强烈推荐使用。

yarn add -g @vue/cli

yarn 切换到淘宝源yarn config set registry http://registry.npm.taobao.org

这样安装依赖包的速度的就会大大加快

1.2新建项目

使用vue-cli3开发项目，可以使用图形化界面，也可以使用命令行

我这里使用图形化界面在终端输入vue ui即可出现界面

然后选择我们需要安装的预处理器

安装好之后然后进入到我们项目中启动项目

yarn serve

执行后，没有报错，说明安装的没有问题

2.项目结构

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

1. views用户存放我们的页面

2.store 放置vuex程序

3.api 放置所有的接口程序

4.utils 放置工具函数

5.router 放置路由信息

6.styles 放置全局样式

7.components 这个文件已经有了，用来存放我们页面中的组件，我们可以把组件新建在这个目录下面，不过这样并不清晰，我们要为每个页面新建一个文件夹，把每个页面的组件放在对应的文件下

8.assets 这个已经有了，用来存放我们的资源文件，视频、音频、图片等

3.项目介绍

自己做一次产品经理，虚拟一个图书管理项目

我们有两个页面：1.登录页面，用户输入账号和密码就能跳转到我们的首页 2.首页，显示一些图书信息

项目涉及到的操作：

1.点击跳转

2.请求

3.展示

因此处理，vue提供给我们的组件外，我们还需要手动添加一下如下组件

1.路由组件：vue-router

2.请求组件： axios mock

3. ui组件：element-ui sass

4. 表单验证组件：vue-validate

5.状态 vuex js-cookie

现在我们根据需求一步一步开发我们的页面

4.开发项目

4.1登录页