Vue项目搭建(从零开始)

前言:笔者于明年六七月份毕业,现在正在准备毕设,该文章就是准备毕设项目的前端心路

在开始文章之前首先说明本人的前端水平,大概就是

写过一些原生的前端表格,了解vue,对它的一些组件和功能听说过,基本属于啥也不会状态,这也预示着vue的学习路程不会太过轻松

本文的脉络如下:

项目使用vue-cli脚手架创建一个空白项目,之后

引入vue的路由,实现单页面的切换,实现页面切换之后给每个页面添加一个按钮,

引入Axios,实现异步请求的发送,该按钮向后端发送一个请求

构建一个基本的SpringBoot项目,接收请求,打印响应内容

下面学习vue的每一部分对应我的一个疑问

那么,开始了


提问:我得有一个vue项目才能开始学习,怎么创建vue项目

创建初始项目

方式一:下载vue的包,引入项目,如下所示

Vue项目搭建(从零开始)_第1张图片

这种方式非常简单,但不适合我的前端分离模式,所以我们要用vue提供的脚手架

如果有人需要这样做,可以去网络上寻找vue.js这个包,之后继续开发,但接下来的步骤就不适合你了

方式二:利用vue脚手架创建项目

你需要下载安装一些前端工具,才能继续接下来的内容

工具列表:

  • node(带npm用于包管理)

  • vue

  • vue脚手架(vue-cli

  • vscode

有了工具之后我们来构建一个vue项目

打开命令行输入以下命令

Vue项目搭建(从零开始)_第2张图片

选择vue版本,我们选择vue2

Vue项目搭建(从零开始)_第3张图片

回车开始创建项目,等着就好

Vue项目搭建(从零开始)_第4张图片

那么使用vscode打开文件,你会得到这样一个目录

Vue项目搭建(从零开始)_第5张图片

启动该项目

ctrl+`,唤出vscode自带的控制台,输入

npm run serve

启动项目

需要说明的是,有可能你是

npm run dev

这个值是在package.json文件中规定的,你可以查看自己的是什么

Vue项目搭建(从零开始)_第6张图片

项目启动成功,vscode的控制台会输出两个地址,浏览器输入地址即可访问项目访问

Vue项目搭建(从零开始)_第7张图片

Vue项目搭建(从零开始)_第8张图片

ok,vue项目创建成功


创建的vue项目是一个静态单页面,怎么样切换组件来展示不同的内容

以及,什么是组件

Vue路由

组件

组件是以 vue结尾的文件,比如上面的Helloworld.vue 文件,他就是一个组件,

组件文件由三部分构成,页面,js部分,样式

页面:我们写html的地方,后期如果使用ElementUI,他给出的组件也是放在这里,由一个 template 标签包裹

js部分:由一个 script 标签包裹的就是 js部分,这里可以引入组件,创建vue实例等

样式:由style标签包裹的部分,用于给页面渲染

如何使用组件呢,当你创建了一个vue组件之后,引入组件,声明组件,使用组件,三步走,下图就是一个例子

Vue项目搭建(从零开始)_第9张图片

后面还需要学习vue的动态组件,用于组件占位和切换,但这里用普通组件就够了

准备组件

现在在src目录下创建一个文件夹,叫views,之后我们创建的所有组件都放在这里,文件夹内创建两个组件

Vue项目搭建(从零开始)_第10张图片

About.vue






Home.vue





引入路由

同样,在vscode中打开项目,ctrl+`打开控制台,输入以下命令

npm i vue-router@3

这里需要说明,因为我们在创建项目的时候选择了vue2的版本,所以我们使用的路由是3版本,

这里可能会出现的问题

在安装路由时你直接使用了

npm i vue-router

之后启动就会报错,这就是上面说的路由版本兼容问题,

你可以在package.json中查看版本问题,如果不合适,需要卸载重装,router路由卸载请自行百度

Vue项目搭建(从零开始)_第11张图片

创建文件夹 router,里面创建文件 router.js 用来配置vue的路由

Vue项目搭建(从零开始)_第12张图片

router.js

//该文件专门创建整个应用的路由器
import VueRouter from 'vue-router'

import Vue from 'vue'

//引入组件
import About from '../views/About'
import Home from '../views/Home'

// 将组件挂载在实例上
Vue.use(VueRouter)

//创建并暴露一个路由器
const router=new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        },
    ],
    mode:'history'
})

// 向外抛出路由组件
export default router

在上面的文件中,我们导入了两个组件,并对他们配置了响应的路由,其中 path 表示路径,component 表示该路径对应的组件

光在这里写一个文件是不行的,还需要在vue的实例上挂载这个路由配置

Vue项目搭建(从零开始)_第13张图片

上面main.js文件的红框内容就是需要写的内容,下面贴出来,直接替换就可以

main.js

import Vue from 'vue'
import App from './App.vue'

// 组件路由
import router from '@/router/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

页面修改

最后一个步,我们在App.vue中修改 template 中的内容,去掉多余的 欢迎页组件,放两个 router-link

这个标签就和a标签一样的,用于跳转,只不过vue给他改了名字,用于组件跳转

在router-link下面,还有一个 router-view标签,该标签用于占位,如果直接访问App.vue,该标签不显示任何东西,只有当对应路径被触发时,该标签则渲染组件,渲染的组件就是这个路径对应的组件

还记得我们之前在 router.js 文件中书写的内容吗?






到此为止,我们的vue路由就算是学完了

启动项目看一看吧

Vue项目搭建(从零开始)_第14张图片

报了一个错,这是vue的语法检查,说我们组件的名字起的不符合规范,不影响,可以在 vue.config.js 中配置一个选项,取消这个错误

Vue项目搭建(从零开始)_第15张图片

Vue项目搭建(从零开始)_第16张图片

好的,项目启动成功,点击访问,

Vue项目搭建(从零开始)_第17张图片

可以看到我们的功能成功实现

前后端分离的项目,前端怎样向后端发送请求?

Vue与Axios整合

首先下载 Axios 插件

npm i axios

这里我将axios的配置文件,以及每个页面的接口文件单独放,便于后期维护,如果不想这样,也可以直接写,文末有对应方法

依次在src下建立文件夹 utils 和 api

Vue项目搭建(从零开始)_第18张图片

还需新建三个文件,我们一个一个来说

request.js是axios的核心配置文件

request.js

// 导入 axios
import axios from 'axios'

// 调用 axios.create() 函数, 创建一个 axios 的实例对象, 用 request 来接收.
const request = axios.create({

  // 如果后端是soa架构,那么多个服务都有不同的端口,这里该如何书写?
  // 如果后端是soa,那么这里写的是网关的端口,之后通过网关的负载均衡来拉取不同的后端服务
  
  baseURL: 'http://127.0.0.1:8081' // 指定请求的根路径
})

export default request

这个文件中最主要的就是baseURL这个属性,他指定向后端发送的请求的地址,这里我们填写本机

别的就没什么好说的了

about.js

  // 导入 axios 实例对象
  import request from '@/util/request.js'

// 测试后端连通性 ——分页页面
export function test2() {
    return request({
      url: '/system/about/test2',
      method: 'get'
    })  
  }
  

home.js

  // 导入 axios 实例对象
  import request from '@/util/request.js'


// 测试后端连通性
export function test1() {
    return request({
      url: '/system/home/test1',
      method: 'get'
    })  
  }
  

这两个文件大同小异,引入axios实例,之后方法内,url表示后端 控制层业务路径,method表示请求方式

这里我们需要对原先的两个组件做点小改动,这里以 about.vue 为例,Home同理,

非常简单的东西,我相信各位都比我聪明

About.vue






这里我们为页面添加了一个按钮,引入了一个js文件,为vue实例添加了一个方法

这些完毕之后,重启项目

访问页面并点击,就能看到按钮发送了一个请求

Vue项目搭建(从零开始)_第19张图片

SpringBoot项目构建

上面的那个请求到哪去了,我们做一个简单的springboot项目来捕获一下

使用maven构建一个项目

引入依赖

Vue项目搭建(从零开始)_第20张图片

设定端口

Vue项目搭建(从零开始)_第21张图片

启动类

Vue项目搭建(从零开始)_第22张图片

controller层

Vue项目搭建(从零开始)_第23张图片

拦截对应路径,test2是我为主页写的,这里就不多说了

ok,项目构建完毕,启动前后端项目,联调试试

Vue项目搭建(从零开始)_第24张图片

Vue项目搭建(从零开始)_第25张图片

测试尽量使用 chrome,IE这破玩意出的错莫名其妙的,我还以为自己程序写错了

到这里测试通过,后端也能接收到前端的请求,至此学习告一段落

本文非常比较长,也还存在一些问题,比如

  • 前端的请求如何携带参数,参数又该如何处理

  • 前端如何使用ElementUI构建页面,不止是放到页面上显示,如何做出一个我想要的页面

  • 后端传过来的值,前端应该如何渲染

  • 前端如果需要部署到生产环境,需要由nginx代理,那独立项目如何打包

问题很多,我们慢慢来

参考:

Vue路由_大聪明码农徐的博客-CSDN博客_vue路由

Vue中的路由_一枕槐安1的博客-CSDN博客_vue路由

在 Vue 项目中使用 axios 的三种方式 - 简书 (jianshu.com)

后言

生活基本就靠着这些内容在支撑:

二十年前出版的书,十年前发行的音乐,五年前旅游拍的照片,三年前上映的电影,去年赚的收入,仨月前fc屯下的速冻水饺,昨天做的核酸报告,和今日的悲伤事故…

你可能感兴趣的:(vue.js,前端,javascript)