Vue学习（9月3号）

前后端不分离（适用于小项目）

        1、后端用Java写，部署在Tomcat服务中，会用到后端框架SpringBoot、Mybatis.......

        2、没有独立的前端，会在后端使用视图层技术来生成页面（jsp、freemarker、themleaf......）

        3、后端三层架构（MVC）

        4、后端路由（转发/重定向）

前后端分离（趋势）

        1、后端用Java写，部署在Tomcat服务中，会用到后端框架SpringBoot、Mybatis......

        2、前端单独称为一个工程（jQuery+Bootstrap/Vue/React/Angular框......）

        3、后端的三层架构不再是MVC，简化为MC

        4、前后端的所有交互都通过Ajax发起http请求，后端返回http响应

        5、前后端交互的数据格式可以xml/json

        6、这是rest风格，后端所有的控制器全部使用Rest控制器

        7、前端路由，后端不存在转发、重定向操作

大前端（近几年刚刚兴起的话题）

        1、前端和后端都是用JavaScript写

        2、开发环境是nodejs

搭建Vue开发环境（第一步）

        1、安装nodejs

              nodejs官网：Node.js

                nodejs有js代码库和npm（）包管理工具

        2、需要先熟悉npm工具的使用

                配置npm远程镜像仓库

                npm config get registry        查看默认的远程仓库

                npm config set registry https://registry.npm.taobao.org/        修改远程仓库

                配置npm本地仓库（默认在C盘，不一定要改，但是最好改一下）

                npm config get prefix        查看默认的本地仓库路径

                npm config get cache        查看默认的本地缓存路径

                npm安装命令

                npm install modulename -g

                npm install modulename -S

                npm install modulename -D

                npm卸载命令

                npm uninstall modulename -g

                npm uninstall modulename -S

                npm uninstall modulename -D

        3、安装Vue-cli脚手架环境（用于创建Vue项目工程的工具）

                安装老版本的脚手架（版本号是2.9.6 已经不更新维护了）

                npm install vuecli -g        老版本

                npm uninstall vuecli -g        老版本

                安装新版本的脚手架

                npm install @vue/cli -g        新版本

                npm uninstall @vue/cli -g        新版本

        4、使用Vue脚手架工具创建Vue工程

                创建项目工具不再使用开发工具创建，改用脚手架工具创建工程

                考虑：工程创建在什么路径下面

                Vue create 工程名称        创建工程

                 

 

删除预设

        5、找到预设的配置文件 

        C:\用户(users)\Admin\.vuerc

        6、使用idea打开项目工程

         

        7、idea安装Vue.js插件

        8、项目启动

                1、必须要在项目的根目录下面执行“npm run serve”命令

                2、使用idea自带的终端，使用“npm run serve” 命令

                访问工程首页

        9、打包部署

                npm run build

                出现dist目录则是成功（类似Java工程的target目录）

                dist-distribute(分布、发布)

         因为这是一个纯前端工程，里面没有任何与Java有关的代码，所以部署的时候可以使用Tomcat或者Nginx，但其实Nginx性能更好

                测试一下

                准备一台虚拟机，安装Nginx

                把这个dist目录拷贝到nginx/html/目录中

                

                Nginx：无法代理Javaweb工程，只能代理静态资源/纯前端工程

                Tomcat：可以代理Javaweb工程。

 选择IDE（集成开发环境）（第二步）

        1、WebStorm（和idea是一家公司的，需要破解）

        2、IDEA

        3、vscode（这个工具有学习成本）

        4、HBuilder（轻量级、国产的）

一个Vue项目的基本结构