前后端分离项目-社交管理系统之前后端连载，主界面的搭建的展示 组件化开发 学习笔记(二)
前后端连载
当我们写好了后端代码，各种接口的实现。接下来我们转入前端需要做的事情。
第一步
首先自然是创建一个vue项目。同样的使用node.js在终端中下载vue以及vue-cil。
npm i npm -g
npm i @vue/cli -g
在终端中输入这两个命令。下载好之后如果幸运通过vue -V命令能够查看到vue的版本。说明你的vue已经安装好了。但是我遇到了个问题，记录下来：
1.‘vue’ 不是内部或外部命令,也不是可运行的程序
明明已经下载了为什么不成功呢。通过百度清一色的解答都是添加环境变量，添加之后还是不行。然后检查
C:\Users\ASUS\AppData\Roaming\npm
这个路径 这个路径也可以通过终端查找输入命令 npm config list
查看发现我的Vue根本就没下好！原来是npm i @vue/cli -g的时候其实并没有结束但是我以为成功了没注意看，当时已经过去了5分钟。我想怎么都下载完了就关掉终端。原来是这个问题，于是重新下载，这次我盯着看，发现进度条动了一下就一直卡在某一个阶段不动了。我检查网络没问题，我知道npm下载很慢，可没想到那么慢！但是我懒得去找解决方法于是放着去吃饭。饭毕，进度条还是不动。终于开始寻找解决办法：
安装cnpm镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
成功之后我们就应该使用cnpm install命令来下载vue。虽然也比较久，但是明显没有一直卡在某个地方不动。最后安装成功了。虽然有一些WARN但是目前并没有什么问题。
第二步
vue init webpack client
我们的vue安装好之后，我们就通过命令来创建我们的前端项目。注意要在我们当时项目的文件夹中创建。也就是存放我们后端代码的文件夹。这个命令似曾相识，我们创建后端项目时也是
npm init 所以创建过程也比较熟悉。
这里全部NO 最后yes即可。
创建成功
创建好之后项目文件夹中出现了
打开发现前端项目我们已经成功的创建了。
我们通过npm run dev 查看我们的前端项目是否创建成功。
他告诉我们端口8080上我们的前端项目已经成功跑起来了。
这时候我们可以再开一个终端，然后npm run server来启动我们的后端项目
但是这样显得笨拙。也不方便。我们可以通过下载连载模块和修改package.json来达到我们输入一个命令同时加载前后端项目，也就是前后端连载。
下载前后端连载的模块
package.json中出现
表示成功。
接着修改script里面的内容
"client-install":"npm install --prefix client",
"client":"npm start --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"dev":"concurrently \"npm run server\" \"npm run client\""
测试一下
同时启动成功！。
前端主页面搭建
首先先把他内置默认的组件和logo去掉。框起来的地方删除，来到APP.vue中把引用组件，logo的代码删除，以及css都删除得到干净的前端页面。
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
创建组件
主页面的设计，遵从主流的上面有导航栏，中间展示，底部有一些信息。
所以我们在components文件夹中新建三个vue文件。
以一个Top为例：
<template>
<div><h1>顶部</h1></div>
</template>
<script>
export default {
name:"Top",
data() {
return {
}
},
}
</script>
<style>
</style>
然后来到App.vue中引用，声明，调用。三步
成功！这样我们就可以开始设计我们的页面样式等等。
注意
我们必定使用一些主流开发框架，比如bootsrap，jquery等等。这些引入应该放在
index.html中引用
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>clienttitle>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js">script>
head>
<body>
<div id="app">div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">script>
body>
html>
均通过cdn方式进行引用，当然也可以下载离线的资源放进项目中进行引用。总之记得引用就行。
效果展示
这里下一步的思想并不是点击注册按钮跳转到指定的html中，而是通过router-link的方法。路由的方法进行展示。