前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)

前后端连载

当我们写好了后端代码,各种接口的实现。接下来我们转入前端需要做的事情。

第一步

首先自然是创建一个vue项目。同样的使用node.js在终端中下载vue以及vue-cil。
npm i npm -g
npm i @vue/cli -g
在终端中输入这两个命令。下载好之后如果幸运通过vue -V命令能够查看到vue的版本。说明你的vue已经安装好了。但是我遇到了个问题,记录下来:
1.‘vue’ 不是内部或外部命令,也不是可运行的程序
明明已经下载了为什么不成功呢。通过百度清一色的解答都是添加环境变量,添加之后还是不行。然后检查前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第1张图片
C:\Users\ASUS\AppData\Roaming\npm
这个路径 这个路径也可以通过终端查找输入命令 npm config list
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第2张图片
查看发现我的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即可。
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第3张图片
创建成功
创建好之后项目文件夹中出现了
在这里插入图片描述
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第4张图片
打开发现前端项目我们已经成功的创建了。
我们通过npm run dev 查看我们的前端项目是否创建成功。
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第5张图片
他告诉我们端口8080上我们的前端项目已经成功跑起来了。

前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第6张图片
这时候我们可以再开一个终端,然后npm run server来启动我们的后端项目
但是这样显得笨拙。也不方便。我们可以通过下载连载模块和修改package.json来达到我们输入一个命令同时加载前后端项目,也就是前后端连载
下载前后端连载的模块
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第7张图片
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\""

测试一下
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第8张图片
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第9张图片
同时启动成功!。

前端主页面搭建

前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第10张图片
首先先把他内置默认的组件和logo去掉。框起来的地方删除,来到APP.vue中把引用组件,logo的代码删除,以及css都删除得到干净的前端页面。

<template>
  <div id="app">

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
</style>

前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第11张图片

创建组件

主页面的设计,遵从主流的上面有导航栏,中间展示,底部有一些信息。
所以我们在components文件夹中新建三个vue文件。
以一个Top为例:

<template>
	<div><h1>顶部</h1></div>
</template>

<script>
	export default {
		name:"Top",
		data() {
			return {	
			}
		},
	}
</script>

<style>
</style>

然后来到App.vue中引用,声明,调用。三步
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第12张图片
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第13张图片
成功!这样我们就可以开始设计我们的页面样式等等。

注意

我们必定使用一些主流开发框架,比如bootsrap,jquery等等。这些引入应该放在
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)_第14张图片
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的方法。路由的方法进行展示。

你可能感兴趣的:(前后端分离项目-社交管理系统,Vue,vue,npm)