vue+springboot项目练习（一、Vue的构建）

通过学习vue和springboot的基础部分，自己对前后端分离项目一无所知。想找前后端分离项目练手无意发现一个博客从无到有感觉合适拿来做练习、总结

原博客文章地址

搭建vue框架

一、首先下载node.js

1、node.js下载地址

打开Dos弹窗 输入node -v和npm -v查看是否安装成功以及安装版本号

2、使用 npm install -g vue-cli安装脚手架

二、构建前端项目

1、咋D盘新建workspace然后cmd进入Dos命令，使用vue init webpack bs-vue命令来生成已webpack为模板，bs-vue为项目名的项目。在执行中默认回车（Y）自动设置

创建成功提示并

进入到我们的项目文件夹里D:\workspace\wj-vue执行npm run dev项目构建成功
这一步如果报错，可能是未能加载项目所需的依赖包，即 node_modules 里的内容，需要在该文件夹执行npm install，再执行npm run dev

三、使用IDEA

1、构建CLI版本

2、IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行npm install 运行完成后，输入 npm run serve即可

3、IDEA视图运行，可以在package.json点击右键，选择 Show npm Scripts

4、可以激活 IDE 右上角的按钮，则无需在insert里输入npm run serve

四、Vue项目结构

1、Cli构建出来的Vue结构是这样子

结构

2、 index.html

通过注释，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。

3、App.vue

，是一个容器，名字叫“路由视图”，其它的组件即使拥有自己的路由（URL，需要在 router 文件夹的 index.js 文件里定义），也只不过表面上是一个单独的页面，实际上只是在根组件 App.vue 中。

4、main.js

import 导入几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。
Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。