【SpringBoot+Vue项目实战开发】2020实时更新。。。。。。

最新推荐文章于 2024-07-30 16:34:14 发布

CodeLinghu

最新推荐文章于 2024-07-30 16:34:14 发布

阅读量2.2k

点赞数 4

分类专栏： SpringBoot 文章标签： java vue javascript web

本文链接：https://blog.csdn.net/weixin_43891901/article/details/107256669

版权

SpringBoot 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

SpringBoot+Vue项目实战开发

作者：令狐荣豪(编程小哥令狐)

一.使用 CLI 搭建 Vue.js 项目

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 https://nodejs.org/en/，首页即可下载。

图中左边是长期支持版本，右边是当前版本，下载哪个都行，我一般选择长期支持版本。

下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

安装 cnpm 的命令为：

npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

之后，使用 npm install -g vue-cli 安装脚手架。（本文写作的时候 cli 仍在 2.x 时代，3.x 的构建方法与此类似，评论区有读者总结了注意事项，这里不再赘述）

1.1构建前端项目

构建项目我们用的是IDEA开发工具进行的，所以下面的步骤如此。
对于习惯使用 IDE 的同学，可以使用更直观的方式构建项目。以 IntelliJ IDEA 为例，点击 Create New Project

然后选择 Static Web -> Vue.js，点击 next，输入相关参数

这里注意 Project location 需要输入到项目文件夹一级而不是 workspace。输入完成后点击 Next，等待 Vue CLI 初始化，然后在可视化界面上确认项目信息，修改或 Next 即可。IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行 npm install

运行完成后，输入 npm run dev 即可。

浏览器输入访问localhost://8080展示下图表示成功：

1.2Vue 项目结构分析

使用 CLI 构建出来的 Vue 项目结构是这个样子的

里面我们需要关注的内容如下图，重点需要关注的我用小红旗标了出来

其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。

接下来我们分析几个文件，目的是理解各个部分是怎么联系到一起的。

1.2.1index.html

首页文件的初始代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>wj-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

就是一个普普通通的 html 文件，让它不平凡的是

，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

1.2.2App.vue

上面图上我把这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。

.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。先看它的初始代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>