素材巴巴 > 程序开发 >

Vue学习第一天(9月3号)

程序开发 2023-09-19 20:27:20

前后端不分离(适用于小项目)

        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

-g全局安装,module被安装到npm的本地仓库里面,一般用于安装工具-S或者--save在项目中安装,会随着项目一起打包,一般用于安装生产环境中需要的依赖-D或者--dev在项目中安装,不会随着项目一起打包,一般用于安装开发环境中需要的依赖

        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项目的基本结构


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。