SpringBoot+vue项目实战（一）

SpringBoot+Vue项目实战

一：vue开发

步骤一：安装node.js

Node.js 官方网站下载：https://nodejs.org/en/
2.选择操作系统对应的包

下载完成，安装包如下：

傻瓜式安装，直接下一步即可
安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：

3.配置npm在安装全局模块时的路径和缓存cache的路径
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，如下图所示：

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令：

npm config set prefix “D:\node\node_cache”

npm config set cache “D:\node\node_cache”
（prefix和cache后跟的是你node_global和node_cache这两个新建的目录，）
执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”， 值为“D:\node\node_modules”，如图

最后编辑用户变量里的Path，将相应npm的路径改为：D:\node\node_global，同样如下图：

以上vue的运行环境就建好了，下面开始创建vue项目

步骤二：安装镜像

由于 npm install安装速度慢，所以本文使用阿里淘宝镜像及其命令 cnpm进行安装，cmd打开命令窗口输入命令：

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

步骤三：安装Vue

输入：cnpm install vue ，回车等待终端给出响应。

步骤四：安装全局vue-cli脚手架

输入： cnpm install --global vue-cli,安装全局vue-cli脚手架，用于快速搭建大型单页应用。

步骤五：检查Vue是否安装成功

输入： vue -V检查是否安装成功，如果返回版本号则说明安装成功。

步骤六：创建一个基于 webpack 模板的新项目（可略）

终端切换到你的目标目录下创建一个项目，这里以在vue的安装目录下创建一个叫做my-vue-project的项目为例:输入

vue init webpack firstApp

webpack 后跟的就是你要建立的vue项目名称

步骤七:启动项目，访问项目

1.首先切到新建的目录下，上一步我新建的项目名称为firstApp

2.输入启动命令行

cnpm run server

有的人会用cnpm run dev 这样也可以启动项目，主要是看vue项目中的package.json文件内配置来确认使用哪一个命令来启动项目，我这配置的是server，所以用的是cnpm run server。

3.出现http:表示项目启动成功了，
这里我直接去访问：

home和About这两个按钮是我新加的
终止服务只要在命令窗口输入ctrl+c即可

下面开始在idea中，去开发我们的项目

步骤一：先择file,点击open导入我们的项目

步骤二：引入vue插件

idea要想支持vue项目，只需要引入vue插件即可
1.file-setting-plugins - browse repositorise
搜索vue，找到后下载即可

下载后，在路径file-setting-plugins搜索vue,勾选框选中后，选择apply激活即可

步骤三：新建两个vue文件

1.在src目录下，新建一个包，在该包下新建两个vue文件，一个是About.vue,一个是Home.vue文件。
2.有的人因为idea是第一次做vue项目，我们第一次在新建一个类是会发现找不到.vue结尾的类，这个时候只需要在路径file-setting-editor-file types 这个下面会有一个Vue.js开头的选项，选中，在registered patterns下新建内容选填为*.vue

之后再路径file-setting-editor-file and Code选中，新建，name填vue File ,Extension填vue
下面是让你填模板内容，我这里填的是

<template>
  <div>
      {
   {
   msg}}
  </div>
</template>

<style>
  body {
   
    background-color: #ff0000;