2021-11-17_学习B站Spring Boot+vue项目step001

1. 前端框架搭建及项目创建

1.1 需要先安装Node.js。Node.js中自带了一个叫npm的包。npm这个包是管理依赖的一个软件。

1.2 需要安装vue cli插件，用来创建vue工程。在命令行里全局安装：

npm install -g @vue/cli

（备注：我之前电脑已装vue cli 2.9.6，一直无法升级到新版本，最终根据 https://blog.csdn.net/manmanwei/article/details/107686844 这篇博客的内容，最终完成卸载掉2.9.6，装上了新版本）

1.3 vue cli 创建项目。项目名为springboot-vue-demo：

vue create springboot-vue-demo

提示如下证明已成功：

ccessfully created project springboot-vue-demo.
Get started with the following commands:

$ cd springboot-vue-demo
$ npm run serve

按上述提示执行命令cd sp按tab自动补全：

cd springboot-vue-demo
npm run serve

 提示：

DONE Compiled successfully in 8515ms 下午6:56:17

App running at:
- Local: http://localhost:8080/
- Network: http://192.168.43.214:8080/

1.4 idea打开后，package.json里，script里的serve命令最后加上“--open”，可实现每次npm run serve后，自动在浏览器打开。

1.5 index.html是提供的一个界面：最后会将vue文件编译后，通过这个界面去显示：index.html中有如下代码：

<div id="app"></div>

1.6 最主要的是src目录，里面是核心的代码。

1.6.1 assets存放静态资源，比如图片、css、js。

1.6.2 components放组件。可以把一些代码通过组件的方式进行打包，变成一个vue文件，可以在别的页面进行引入。

1.6.3 router是写路由的位置。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

“/”是我们主页的路由。

路由就是把路径（path: '/'）与页面（component: Home）做了一个映射。通过路径我们可以访问到页面。

1.6.4 store用来定义我们页面用到的一些变量。

1.6.5 views是视图文件的存放位置。

1.7 package.json定义项目的依赖。

2. 前端页面搭建

2.1 下图中选中Header，按Alt+Enter，进行导入。

export default {
  name: 'Layout',
  components: {
    Header
  }
}

 目前进度是正在根据视频教程进行开发，明天继续学习。