Vue + Spring Boot project combat (B): Using CLI project to build Vue.js

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/Neuf_Soleil/article/details/88926242

Foreword

From the beginning of this article, they enter the real practice.

In the front-end project development, we can use the Vue varying degrees according to the actual situation. Use Vue CLI (or written vue-cli, namely Vue scaffolding) build out of the project, it is the best embodies the characteristics of the Vue. This is something we can slowly feel in what follows.

Similar articles online about the building project is actually a lot, but I re-wrote it, first, to ensure that the project can run successfully, the second is explained a few details, the three are joined using the IDE's construction method.

Before hands, and I hope we have been clear about what is "before and after the end of the separation," and what is "single-page application" .

Simply put, before and after the end of the separation of the core idea is to exchange data via the front page restuful ajax call to the backend api, and single-page application (single page web application, SPA) , is only one page, and the user interacts with the application Web applications dynamically update the page when.

Attach Vue's official Tutorial:
https://cn.vuejs.org/v2/guide/

This is a first-hand learning materials herein, this practice although no access to the content, but in the future to regular review.

First, install Vue CLI

Because of the need to use npm install Vue CLI, Node.js and npm is integrated in the, so the first step we need to install Node.js, visit the official website https://nodejs.org/en/, home to download.

Figure on the left is long-term support version, the right is the current version, which downloads all right, I usually choose a long-term support version.

After the download is complete run the installation package, all the way to the next step on the line. Then enter cmd node -v, check whether the installation was successful.

As shown, there was a version number (version download time is determined based on), indicating that the installation has been successful. Meanwhile, npm package has also been installed successfully, you can enter npm -vto view the version number of the

input npm -g install npm, npm will be updated to the latest version.

---

After you can choose to install cnpm, namely npm domestic image. The advantage of using cnmp that will be faster in future downloads, but download the package may not be current.

Command to install cnpm is:

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

After the completion can use cnpman alternative npm, and I do not like to use cnpm, I like to use a small partner note that, cnpm Do not mix with npm use , a project from scratch with cnpm to use in the end, not the middle had the wrong order, otherwise there will be chaos. But what if this happens do not panic, the project node_modules folders deleted re-run npm/cnpm installon the line, but more a waste of time.

---

Thereafter, npm install -g vue-cliinstall scaffolding.

Next, we can set up our front-end project.

Second, the project to build the front end

1. General procedure

直接使用命令行构建项目。首先，进入到我们的工作文件夹中，我在 D 盘新建了一个叫 workspace 的文件夹，大家可以自行选择位置。

然后执行命令 vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 wj-vue 是我们的项目名称（White Jotter），大家也可以起别的名字。

在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 wj-vue，直接回车确认就行。

这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。

还有是否使用 es-lint，这玩意儿挺烦的，但为了代码质量先将就一下吧。

接下来等待项目构建完成就 OK 了。

可以看到 workspace 目录下生成了项目文件夹 wj-vue，里面的结构如图

接下来，进入到我们的项目文件夹里(cd D:\workspace\wj-vue)，执行npm run dev

项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行 npm -install ，再执行 npm run dev

访问 http://localhost:8080，查看网页 demo，大工告成！

2.使用 IDE (IntelliJ 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 即可。

另外 IDE 嘛，总是在 UI 上下了很多功夫，我们还可以在 package.json 文件上点击右键，选择 show npm scripts

然后就会出来 npm 命令窗口，想要执行哪个命令直接双击运行就可以了。

这些命令都是在 package.json 文件里预定义的。dev 和 start 是一样的，start 即是执行 npm run dev 命令

另外使用这种方法，可以激活 IDE 右上角的按钮，不过这些都不重要了。

上面的内容应该足够详细了，如果大家还是遇到了问题，可以在评论区反馈一下，我会第一时间解答。

三、Vue 项目结构分析

1.概览

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

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

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

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

2.index.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 id="app"></div> ，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

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

3.App.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>

大家可能注意到了，这里也有一句 <div id="app">，但跟 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css 对应。

<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

这个文件最关键的一点其实是第四行， <router-view/>，是一个容器，名字叫“路由视图”，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

4.main.js

前面我们说 App.vue 里的 <div id="app"> 和 index.html 里的 <div id="app"> 没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Here insert a mouth, this js file some students may not be pleasing to the eye looked at, such as no semicolon (;), as is the syntax for ES6, but will not write such an error, although es-lint can be changed or closed but I want to familiarize yourself with the new rules is also very good.

The top of the import of several modules, wherein the assembly module node_modules in vue, App i.e. App.vue defined in, i.e., router router folder defined routes.

Vue.config.productionTip = false, the role is to prevent vue generate production tips on startup.

In this js file, we create a Vue objects (instances) , EL attribute provides a pre-existing DOM element on a page as a mount target Vue objects, router representing the object contains Vue Router, and uses defined in the project routing. components represents a component of the object it contains Vue, template is a template used for identification string Vue example, similar to the definition of a html tag.

After reading the above three documents, I would like to basically understand the structure of the front end of the project. How the next, I will use an example to explain before and after the end of the separation of the project is to link.

View catalog series:
https://learner.blog.csdn.net/article/details/88925013

Next:
"Vue + Spring Boot project combat (III): before and after the end of the binding assay (login page development)."