Vue + Spring Boot，搭建前端

记录一个前后端分离项目，vue2 前端的项目搭建

一， 前后端介绍

  简单地说，前后端分离 的核心思想是前端页面通过 ajax 调用后端的 restuful api 进行数据交互，而 单页面应用（single page web application，SPA），就是只有一张页面，并在用户与应用程序交互时动态更新该页面的 Web 应用程序。

Vue 的官方教程

  在前端项目开发中，我们可以根据实际情况不同程度地使用 Vue。利用 Vue CLI（或写成 vue-cli，即 Vue 脚手架）搭建出来的项目，是最能体现 Vue 的特性的。

二，安装 Vue CLI

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

  下载安装，左边稳定版，右边最新版。安装好之后 cmd 运行node -v，与npm -v，安装最新的 npm 的命令 npm -g install npm

  也可以选择安装 cnpm ，即 npm 的国内镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org，接下来安装脚手架。

1. 安装vue2脚手架
   （1）在cmd命令行中输入脚手架安装命令；
   （2）全局安装vue脚手架：npm install -g vue-cli 或者指定版本：npm i [email protected] -g；
   （3）安装以后，输入：vue -V 出现相应的版本号，则表示安装成功；
   
   （4）卸载脚手架：npm uninstall -g vue-cli；
2. vue-cli3脚手架安装
   （1）如果安装了 1.x 或者 2.x 版本的脚手架，需要先卸载；
   （2）安装脚手架：npm install -g @vue/cli
   （3）安装以后，输入 ：vue -version 查看版本，出现相应版本 3.x 则表示安装成功；
   （4）初始化项目：vue create myApp；
   （5）选择配置，一般选择手动配置，根据自己需要来选择，不选择默认配置；
   （6）进入项目：cd myApp；
   （7）启动项目：npm run serve（yarn serve）；
   （8）打包上线：npm run build；
3. 搭建项目
   （1）选择你要安装到那个文件夹；
   （2）初始化项目：vue init webpack myProject；
   （3）进入项目：cd myProject；
   （4）启动项目：npm run dev（如果下载的别人的项目，需要先安装依赖 npm install）;
   （5）打包上线：npm run build；
   （6）如果项目没有自动打开浏览器，将 config 文件夹里面的 index.js 文件中 autoOpenBrowser 设置为 true ；
   （7）路由有 hash 和 history 模式，在 new Router 的对象里面 mode 来设置，默认是 hash 模式；

二，构建前端项目（用 Vue2.x）

1. 使用 cmd 命令

  新建一个文件夹，进入cmd命令，执行 vue init webpack snow-v，这里 webpack 是以 webpack 为模板指生成项目，还有 pwa、simple 等参数。 snow-v 是项目名称。

  接下来会有一些配置项需要设置，一路向下配置即可。


npm run dev

2. 使用 IDEA

  如果没有安装 Vue 插件，首先安装插件。

  create project

  填好信息，此处可以选择 Cli 的版本，finish

  下一步，会提示有些东西是否安装配置，输入y就行了，如果没有自动安装 node_modules，调出终端执行 npm install。

  运行完之后，输入npm run dev，如果不行输入 npm run serve，Vue 版本问题

  也可以使用 IDEA 自带的方法启动，右键package.json文件，选择Show npm Scripts，或者打开package.json文件，里面的命令也可以直接点击。

  大功告成！

三，项目文件

  用 CLI 创建好项目之后，项目文件夹应该长这个样子：

1. build : webpack 的初始化配置
2. config : index.js （项目配置）
3. node_modules : 项目依赖模块
4. src/components : 组件
5. src/router : index.js（路由配置）
6. App.vue : 根组件
7. main.js : 入口
8. static : 静态资源目录
9. index.html : 首页入口
10. package.json : 项目依赖配置