前后端分离项目前端环境部署

前端环境部署

小白自学项目，不是什么教程，仅记录流程

框架：SpringBoot+Vue

准备：Idea Nodejs(前端开发环境) Jdk（后端开发环境） Mysql

           以上默认安装完毕

创建vue项目：

安装Vue/cli: 

npm install -g @vue/cli

或者

yarn global add @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

以前安装过此次则为更新

使用vue/vli创建项目

1、vue create 项目名

或者

vue ui

2、执行命令后会有以下选择，按方向键选择最后一个按回车选定

3、进入vue/cli提供的组件选择页面

4、按空格选定或者取消，默认选中Linter是代码规范

     选择Bable、Router(路由)然后回车

5、进入版本选择页面，此处选择2.x

6、在弹出的页面输入Y回车

7、在弹出的选项选择In package.json回车

8、在弹出的选项输入y保存，并输入保存的名称回车

9、项目初始化、安装依赖等等

10、安装完毕，根据命令依次执行蓝色命令

11、进度条读完以后会出现端口提示

12、如果想更换端口

       可以在这个页面先按Ctrl+C结束然后在次执行npm run serve即可

13、将网址输入以后出现此页面证明部署成功

报错1： 

原因：镜像过期

解决方案：

1、查看镜像设置 npm config list

2、设置新镜像

npm config set registry https://registry.npmmirror.com（淘宝镜像）

3、再次查看镜像设置

4、镜像修改成功重新执行安装命令。

报错2：

原因：npm没有使用权限

解决办法：在node的安装目录，将文件夹 node_cache和node_global赋予用户权限

点击应用

两个文件夹进行同样的设置即可，重新执行安装命令即可。

项目目录结构

用idea打开新建的项目：

public：放静态文件，静态的html、图标等等

src：源码文件

assets：放图片，logo等等

components：放vue组件

router：定义路由，路由用来切换界面

views：视图，即看见的页面

App.vue：是所有页面的入口

main.js：是vue所有配置的入口，在此导入Vue、App、router等等

               将所有的对象组装到一起

vue.config.js：vue/cli配置文件，这里可以配置端口、配置跨域访问等等