SSM整合项目（Vue3环境搭建）

SSM整合项目（Vue3环境搭建）

1.下载node.js

1.卸载原来的node.js

2.检测是否卸载成功

3.下载node.js（10.16.3）

一路next就可以

4.检测是否安装成功

2.全局安装Vue插件cli

命令行输入 npm install -g @vue/cli

3.新建Vue项目

1.新建目录

2.进入这个目录然后cmd

3.创建Vue项目ssm_vue在该目录下

1.输入指令vue create ssm_vue

2.使用上下键选择最后一个

3.回车

4.选择三个选项（按空格选择，上下键移动）

5.回车

6.选3.x回车

7.输入y并回车

8.选择 In package.json并回车

9.输入y并回车，表示保存配置

10.输入一个名字并回车，表示这个配置的名字

11.选择 NPM并回车

12.成功!

4.运行这个项目

1.继续输入指令 cd ssm_vue

2.输入指令 npm run serve

3.选择允许访问

4.打开浏览器输入localhost:8080，成功显示vue首页

5.IDEA打开项目，并配置项目启动

1.把项目文件夹拖拽到IDEA

2.Trust Project

3.成功打开

4.点击锤子右边的，然后点击加号，找到npm

5.配置npm，然后点击ok

6.驶入ctrl + c关闭刚才命令行开启Vue项目

7.IDEA启动项目，点击绿色的箭头

8.启动成功

9.没有识别Vue文件就是没哟安装插件，去插件里面安装就可以了

4.将这个前端项目交给Git远程仓库管理

1.在GitHub新建一个仓库

2.随便创建一个文件夹

3.右键git bash here

4.复制克隆地址

5.输入git clone + 刚才复制的地址

6.复制这个ssm_vue里面的文件，然后这个文件夹就没有用了

7.找到前端项目的文件夹，将刚才复制的文件粘贴进来即可

此时这个文件夹就变成了本地仓库

8.回到IDEA，发现本地仓库已经存在

9.将代码提交到远程仓库

5.Vue3前端工程路由机制

1.index.html

2.App.vue

3.router/index.js

4.HomeView.vue

5.HelloWorld.vue

6.路由机制梳理

1.index.html的div会被app.vue来渲染

2.App.vue的标签会被路由到的页面所渲染

3.router/index.js是配置路由的页面这里以 “/” 来演示

4.输入http://localhost:8080/则会找到HomeView.vue

5.这是HomeView.vue引用的HelloWorld组件，这个组件的信息会渲染HomeView.vue组件然后再展示到App.vue的标签最后再挂载到index.html

6.Vue3项目目录结构梳理