学习记录374@写给Java后端程序员看的vue安装与项目创建教程

vue是前端的框架，但是因为需要前后端交互，我们还是需要学会简单使用vue的，最基本的当然是安装啦

下载node

node是什么？自己百度，这里你只需要知道她需要被用来安装vue就可以了
进入node.js官网下载。注意下载新版，因为后面才可以下载新版的vue脚手架

安装及其简单，一路下一步即可，下载安装好了之后，在cmd窗口中可以输入node -v 查看版本，npm -v 查看npm的版本，npm是啥？自己百度，这里只需要知道她对安装vue有帮助就行了。

安装vue脚手架

vue脚手架是啥？你可以理解为vue框架，就是前端项目的框架结构，就好像我们创建一个maven项目一样，各个文件分类很清楚，有java，有test，有resource等。

在cmd 中输入npm install -g @vue/cli 安装即可，注意这个新版的安装，如果是旧版的安装是输入npm install --global vue-cli，不要安装旧版本的！不要安装旧版本的！不要安装旧版本的！
安装完毕可以输入vue -V (注意是大写V)查看版本；

创建vue项目

进入一个文件目录，这个目录中将创建你的项目，在这个目录中打开cmd，或者你打开cmd后进入某个目录也可以。
输入vue init webpack 项目名字，回车开始创建，
然后会出现这个，按照下面的说明配置即可，基本上都回答yes即可：

然后在你刚才的目录下就会出现一个项目：

然后进入项目的目录中，cmd，输入npm install 安装依赖，就像安装jar包一样，注意一定要进入项目目录中，这样这些依赖才会安装在这个项目的node_modeules文件夹中。

运行项目

在项目目录中，cmd，然后输入npm run 你的项目名 ，注意一定要在项目目录下启动

浏览器中输入让你输入的地址http://localhost:8081，我这里是8081的，因为我还开了另外一个项目，你的初次开启应该是8080。
打开后就会看到类似于这样的图片，这就是主页：

安装vscode

为了更好的编辑项目，需要下载一个IDE啊，就选择vscode了。
vscode下载，下载安装及其简单，一路下一步就行了。

然后打开vscode-文件-打开文件夹-选择你的项目，就可以打开了；

打开后

关于目录结构

以上是我copy的别人的图，基本就是这样了，但是还有些细节。
比如刚才的首页到底是怎么加载的？流程是什么，这个对于入门是很重要的。

首页加载流程

整体流程-index.html----app.vue----index.js—helloworld.vue

入口index.html中的id=“app”，找到app.vue这个文件