Vue项目搭建(从零开始)

这篇具有很好参考价值的文章主要介绍了Vue项目搭建(从零开始)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

本文的脉络如下:

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

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

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

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

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

那么,开始了


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

创建初始项目

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

Vue项目搭建(从零开始)

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

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

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

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

工具列表:

  • node(带npm用于包管理)

  • vue

  • vue脚手架(vue-cli

  • vscode

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

打开命令行输入以下命令

Vue项目搭建(从零开始)

选择vue版本,我们选择vue2

Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)

启动该项目

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

npm run serve

启动项目

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

npm run dev

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

Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)
Vue项目搭建(从零开始)

ok,vue项目创建成功


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

以及,什么是组件

Vue路由

组件

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

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

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

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

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

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

Vue项目搭建(从零开始)

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

准备组件

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

Vue项目搭建(从零开始)

About.vue


<template>
  <div>


    <h1>这是about分页</h1>
  
  </div>
</template>

<script>

export default {

};

</script>

<style>
</style>

Home.vue

<template>
  <div>
   
    <h1>这里是HOME分页</h1>
   
  </div>
</template>

<script>

export default {
 
};

</script>

<style>
</style>

引入路由

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

npm i vue-router@3

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

这里可能会出现的问题

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

npm i vue-router

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

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

Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)

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项目搭建(从零开始)

上面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 文件中书写的内容吗?

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

        <h1>这是一个测试标签</h1>

    <router-link to="/about">分页</router-link><br />
    <router-link to="/home">主页</router-link><br />

     <router-view />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

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

<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>

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

启动项目看一看吧

Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)
Vue项目搭建(从零开始)

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

Vue项目搭建(从零开始)

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

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

Vue与Axios整合

首先下载 Axios 插件

npm i axios

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

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

Vue项目搭建(从零开始)

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

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


<template>
  <div>
    <h1>这是about分页</h1>
   
    <button @click="sub">分页按钮</button>

  </div>
</template>

<script>
import { test2 } from "@/api/about";

export default {
  methods: {
    sub() {
      test2();
    },
  },
};
</script>

<style>
</style>

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

这些完毕之后,重启项目

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

Vue项目搭建(从零开始)

SpringBoot项目构建

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

使用maven构建一个项目

引入依赖

Vue项目搭建(从零开始)

设定端口

Vue项目搭建(从零开始)

启动类

Vue项目搭建(从零开始)

controller层

Vue项目搭建(从零开始)

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

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

Vue项目搭建(从零开始)
Vue项目搭建(从零开始)

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

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

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

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

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

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

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

问题很多,我们慢慢来

参考:

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

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

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

后言

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

二十年前出版的书,十年前发行的音乐,五年前旅游拍的照片,三年前上映的电影,去年赚的收入,仨月前fc屯下的速冻水饺,昨天做的核酸报告,和今日的悲伤事故…文章来源地址https://www.toymoban.com/news/detail-486144.html

到了这里,关于Vue项目搭建(从零开始)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier

    项目git地址, 欢迎修改提交,不足地方还请补充批评指正! 项目git地址 ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具,其目标是使代码更加一致并避免错误。 ESLint 是完全插件化的。每条规则都是一个插件,你可以在运行时添加更多。你还可以添

    2024年04月09日
    浏览(52)
  • 【Elasticsearch】从零开始搭建ES8集群并且集成到Springboot,更好的服务电商类等需要全文索引的项目(一)

    最近公司的电商项目越来越庞大,功能需求点也越来越多,各种C端对查询和检索的要求也越来越高,是时候在项目中引入全文检索了。 ElasticSearch 是一个基于 Lucene 的搜索服务器,它提供了一个分布式多用户能力的全文搜索引擎,并且是基于Java 开发的,我记得很久之前ES还不

    2024年02月15日
    浏览(39)
  • 搭建vue项目环境之二(完成基础环境的搭建之后开始正式安装)

            由于工作太忙了,一直都是东奔西跑的,好多知识都是零散的,最近刚好有空,就计划利用这个空闲时间认真的整理以前学过的知识,帮助自己回顾过往,中间也难免有很多错误,欢迎指正挑刺。一直以来都是万金油,最后就是啥都会,但是也都是啥都会一点也都不

    2024年02月11日
    浏览(33)
  • 从0开始在Vscode中搭建Vue2/3项目详细步骤

    1.安装node.js:Node.js下载安装及环境配置教程【超详细】_nodejs下载_WHF__的博客-CSDN博客 node.js自带npm,无需单独安装。 验证: node -v    npm -v 2.先简单创建一个空文件夹,vscode进入该文件夹,并打开终端。 3.安装cnpm,目的加快vue-cli安装速度: npm install -g cnpm --registry=https://regis

    2024年02月08日
    浏览(37)
  • 从0开始写Vue项目-Vue2集成Element-ui和后台主体框架搭建

    1. 从0开始写Vue项目-环境和项目搭建_慕言要努力的博客-CSDN博客 一、了解Element-ui  1.Element-UI Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供一组组件 Element UI 提供组件的参考实例, 直接复制 2.官网  地址:https:

    2024年02月12日
    浏览(31)
  • 从零开始Vue项目中使用MapboxGL开发三维地图教程(四)改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标

    总章节 从零开始Vue项目中使用MapboxGL开发三维地图教程 (一) MapboxGL介绍以及前期vue项目的搭建 (二) Mapbox地图样式 (三) 添加全屏,缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能 (四) 改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中

    2024年02月09日
    浏览(33)
  • 从零开始搭建web组态

    成果展示:by组态[web组态插件] 目前只有两种选择,canvas和svg Canvas: 是一个基于像素的渲染引擎,使用JavaScript API在画布上绘制图像,它的优点包括: Canvas渲染速度快,适合处理大量图像和高度动态的图像。 可以直接操作像素,能够创建高质量、流畅的动画效果。 Canvas可用于

    2024年04月23日
    浏览(34)
  • 从零开始搭建群众权益平台(五)

    本篇博客我们将实现 验证新的用户名或电子邮件,文件上传,支付,通知等内容 验证新的用户名或电子邮件: 在更新用户信息的路由中,我们需要确保新的用户名或电子邮件还没有被其他用户使用: 输入验证: 对用户输入进行验证非常重要,以

    2024年02月09日
    浏览(28)
  • 从零开始搭建群众权益平台(一)

    本次的平台我们名为群众权益维护平台,我们将讲解整体的思路,涉及到很多内容,我将给出一份简化的示例,包含了网页的基本结构、前端和后端代码,以及部署的基本步骤。 技术栈使用:HTML,CSS,JavaScript(前端),Node.js(后端),MongoDB(数据库),Heroku(部署)。 这

    2024年02月09日
    浏览(28)
  • 从0开始搭建一个vue3+vite+ts+pinia+element-plus的项目

    前言:vue3+ts+vite大家已经都开始用了,最近也在学习,基本上是零基础开始ts的学习,很多语法知识是边写边查,没有系统的学习ts。此处展示从零开始,搭建的一个框架,方便拿来即用! 其中框架选择vue,语言选择typeScript 项目启动成功以后如下所示: 为了方便日常工作中

    2024年02月06日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包