vue+springmvc前后端分离开发九前端环境的搭建与前端项目创建

前端需要什么环境？

• 相比后端，前端的环境要好配置一些，因为系统是基于web的，所以有的时候只需要一个浏览器就行了
• 此项目需要的前端环境如下
  • 火狐、谷歌、edge等主流浏览器，不要用ie就行
  • nodejs，用来安装vue的

浏览器安装

• 我使用的是win10自带的edge浏览器，想用别的浏览器请自行下载

Vue安装

• 这里说的vue安装，其实是安装vue-cli，它集成了一系列解决方案，能够帮助我们快速搭建好单页应用、方便安装管理依赖等
• 网上对vue-cli安装的教程有很多，建议自行搜索，但一定记住它的版本必须在3以上，否则不能使用vue ui
• 简单概括vue-cli的安装步骤
  • 安装nodejs（安装stable版，而不是latest）
  • 更换npm的下载源，或者下载cnpm
  • 用npm install @vue/cli -g命令安装vue-cli

创建一个vue项目

• 前端环境设置好了以后，就可以开始创建一个vue项目了

• 打开命令行，输入vue ui，开启图形管理界面
  

  

• 在创建选项中，将目录定位到我们之前clone下来的git仓库上，选择创建项目在与后端项目同级的位置上
  

  

• 点击创建，在下一个创建新项目选项中的配置如下，这里不选择初始化git仓库，因为很明显我们已经有了git仓库了
  

  

• 预设选择标准预设即可，等待项目创建完毕
  

  

• 项目创建完毕，用vscode打开它（你可能需要安装vue插件以提供语法支持功能），目录如下
  

  

前端项目目录结构简单介绍

• node_modules
  • 项目依赖都在这里，是一个单独的环境
• public
  • favicon.ico是网站的小图标
  • index.html是入口文件
• src
  • assets
    • 用来存访一些静态图片，注意要以有组织的形式存访
  • components
    • 在这里编写一些可复用的组件，也可单独作为一个页面
  • router
    • index.js这个文件是用来对前端路由进行管理的，归功于vue-router，前端真正意义上实现了路由由自己来决定
  • store
    • index.js这个文件是用来对全局状态进行管理的，实质上是vuex的作用
  • views
    • 编写一些视图文件，真正意义上展现出来的页面，会结合vue-router一起使用，注意命名规范
  • App.vue
    • 相当于一个模板，模板内部可以不断地替换各种各样的视图，但是模板的整体组成不会改变
  • main.js
    • 程序入口，全局依赖，全局配置都写在这里
• .gitignore
  • 熟悉git的人都知道这时git提交时会根据正则表达式忽略掉部分文件
• package.json
  • 记录着项目的一些信息，比如项目名、版本、脚本代码、开发依赖、运行依赖等，非常重要

---

至此，前端环境的搭建和前端项目创建已讲解完毕，下一节会讲解此项目开发所需要的各种依赖，以及用vuetify写一个模板页