项目练手-AloneWay-Part1-创建前端Vue项目

10.1

1.1 从前端Vue项目开始

此次共要创建2个项目：前端aloneway_vue项目
后端aloneway_main项目

先从创建前端Vue项目开始干！

1.1.1 通过Vue框架的脚手架@vue/cli（以前叫vue cli），搭建Vue.js项目

先得知道两个概念：
前后端分离：
前端页面通过ajax技术异步调用后端的restful api，向后端发送数据，以及从后端获取数据。
单页面应用（single page web application SPA）：
只有一张页面，用户在于后端服务器交互时，动态更新这个页面的Web应用请求。

由于搭建Vue.js项目需要Vue框架的脚手架@vue/cli，所以得先安装@vue/cli

1.1.2 安装@vue/cli 脚手架

由于需要使用npm来安装@vue/cli，而npm是集成在Node.js中的。
所以第一步要安装Node.js。官网：https://nodejs.org/en/

1.1.2.1 安装node.js

左边是长期支持的版本，右边是最新版。哪个版本都可以。
下载完正常下一步下一步地安装。
检查安装是否成功：
cmd中输入node -v 会显示当前node.js的版本号：

1.1.2.2 安装npm包

由于node.js已经与npm完美地整合到一起了，所以上一步安装node.js时，也就同时安装好了npm包。
所以可以在cmd中通过npm -v查看npm的版本：

1.1.2.3 更新npm至最新版本

由于要从npm包中下载@vue/cli，所以要保证npm是最新版本。
可用命令npm -g install npm 更新npm到最新版本。

1.1.2.4 （可选）安装npm在国内的镜像cnpm —本项目中使用npm

由于npm的服务器在国外，下载东西的速度可能比较慢。可以选择用国内的镜像cnpm，但cnpm中的资源有可能更新的不及时，不是最新版。熊和鱼掌不可兼得~~
注意：cnpm不要与npm混合着使用。
一个项目中，要是用cnpm，就要从头用到尾。不要中途改用npm，否则会出现混乱。
万一混用了，也有解决办法：
把项目的node_modules文件夹删除，重新执行npm install或者cnpm install就行了。

1.1.2.5 用npm安装@vue/cli 脚手架

万事俱备，终于可以安装@vue/cli 脚手架了：

命令：npm install -g @vue/cli
这个命令安装的是最新版本的@vue/cli脚手架。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，推荐大家使用。

命令：npm install -g vue-cli
这个命令安装的是旧版本的vue-cli脚手架。2.X的版本

新版和旧版在项目结构上稍有不同。

本项目先用旧版本的，2.X…

1.1.3 使用IDEA创建一个Vue.js项目

首先得在IDEA中安装Vue插件，然后再新建Static Web项目时，右边才会有Vue.js的选项。

进入到输入项目名称等内容的界面：
Vue CLI默认是@vue/cli。本项目中由于我想使用vue-cli，所以得选择我刚刚下载的vue-cli文件。
注意：项目名不能有特殊字符~~
项目名和模块名可以分别命名。

创建出的项目包结构如下：

创建出的项目包结构中就这点儿文件是不对的，要使用vue-cli脚手架安装项目：
在Terminal中输入命令vue init webpack aloneway

接下来这几项可以这么选：

然后就生成了这样的项目结构：

提示的明明白白：
IDEA 构建出的 Vue 项目是不含 node_modules 的，所以要先调出终端，执行npm install
注意：此时要先跳转到aloneway_vue这个模块下：

然后就可以启动这个vue项目了，找到package.json，在它身上右键，找到Show npm Scripts，运行npm run dev

控制台出现这个提示后，说明启动成功，可以在浏览器输入 http://localhost:8080 ，就会直接跳转到我这个Vue项目目前的首页。