SpringBoot+vue项目初级（一）

1. 创建一个基于 webpack 模板的新项目

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

vue init webpack firstApp

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

2:启动项目，访问项目

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

输入启动命令行

npm run dev

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

出现

 DONE  Compiled successfully in 9235ms                           11:11:44 AM
 I  Your application is running here: http://localhost:8080

表示项目启动成功了，直接去访问web页面：home和About这两个按钮是新加的

终止服务只要在命令窗口输入ctrl+c即可

3、开始在idea中，去开发我们刚创建的firstApp项目

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

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

 

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

步骤三：新建两个vue文件
在src目录下新建一个包，在该包下新建两个vue文件，一个是About.vue,一个是Home.vue文件。
之后再路径file-setting-editor-file and Code选中，新建，name填vue File ,Extension填vue
下面是让你填模板内容，我这里填的是

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

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

<script>
  export default{
    data () {
      return {msg: '这个是Home模板页'}
    }
  }
</script>

按下面代码新建的两个类的内容
About.vue：

<template>
  <div id="app">
    <span>我的第一个vue项目</span>
  </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