这是一篇前后端分离的vue+springboot项目学习记录2021.4.29
vue项目搭建
本项目采用了命令行生成的方式，首先安装 Node.js，访问官网 link.https://nodejs.org/en/，首页即可下载（因为npm是在Node.js集成的）具体我是参考的 ： link.https://www.cnblogs.com/aizai846/p/11441693.html
- 下载完成后运行安装包，一路下一步就行,然后在 cmd 中输入
node -v，检查是否安装成功 - 输入
npm -g install npm，将 npm 更新至最新版本,在输入npm -v检查版本号是否正确 - 使用
npm install -g vue-cli安装脚手架,注意此种方式安装的是 2.x 版本的 Vue CLI - 首先，进入到我们的工作文件夹中，我在 D 盘新建了一个叫 IDEAProject的文件夹，然后执行命令
vue init webpack wj-vue，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。 wj-vue 是我们的项目名称（White Jotter）,在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问项目名称是不是 wj-vue，直接回车确认就行。
- 可以看到 IDEAProject的 目录下生成了项目文件夹 wj-vue，里面的结构如图
- 接下来，进入到我们的项目文件夹里(cd D:\IDEAProject\wj-vue)，执行
npm run dev,项目构建成功，这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行npm install，再执行npm run dev(这里可以查一下npm run serve和dev的区别)访问 link.http://localhost:8080，查看网页 demo，大功告成。
Vue 项目结构分析
- 根据上图中的结构图列出下面的重点图示，其中我们最常修改的部分就是 components 文件夹了，几乎所有需要手动编写的代码都在其中。
- 2.x 时代没有创建 view 这个目录，其实加上更加合理，现在我们姑且认为 Vue 把视图也当做“组件”的一部分，有助于初期的理解。
接下来我们分析几个文件，目的是看看各个部分是怎么联系到一起的
1. index.html
就是一个普普通通的 html 文件，让它不平凡的是
<div id="app"></div>，下面有一行注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。
还有不普通的一点是，整个项目只有这一个 html 文件，所以这是一个
单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。
<!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>
2. 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 中。
3. 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/>'
})
这个 js 文件可能看着不顺眼，比如没有分号（;），因为是 ES6 的语法，不这么写反而会提示错误，可以把es-lint 改了或者关了，但熟悉一下新的规则也挺好。
最上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router即 router 文件夹里定义的路由。
Vue.config.productionTip = false作用是阻止vue 在启动时生成生产提示。
在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue对象的挂载目标，router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
