第四阶段:JavaAPI总复习一一之一一

第四阶段:JavaAPI总复习一一之一一,第1张

1、Vue CLI:Vue脚手架 01.vue CLI基础:
关于Vue CLI
Vue.js(读音:/vjuː/, 类似于:view)是一套构建用户界面的渐进式框架 
● Vue.js的官方网址是:https://cn.vuejs.org/index.html

需要注意:在使用传统模式开发的前端工程中,各个页面是相对独立的, 
          甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它,
          【而Vue CLI工程与一个Web应用程序一样,是需要启动服务才可以访问的】,
          一定程度上,它的上手难度会更大一些,但是在中大型应用程序的开发中,
          它在开发效率、管理和维护成本上有更大的优势

单页面应用的工程中需要一定的配置,对配置文件的位置也有一定的要求, 
整体工程结果并不像传统的前端应用工程那么自由,所以,手动创建这种应用的成本较大,
而【Vue CLI则可以自动生成vue.js + webpack的工程模板,
    是为现代前端工作流提供了Batteries-included(自含全套工具集)的构建设置,
    只需要几分钟的时间甚至更短的时间就可以运行起来。】

由Vue CLI创建的工程,默认即是热部署的,
当你启动了这个工程(非打包后 的工程)的服务后,
在绝大部分情况下,修改源代码后并不需要重新启动服务,即可体验到修改后的内容。
——————————————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————————————————————
关于npm
npm的全称是:Node Package Manager,可译为“Node包管理器”。
在早期没有npm时,如果需要在前端工程中使用某些框架(例如jQuery、 Bootstrap等),
需要找到相关的官网或资源站点,要么下载这些框架的文件,要么使用cdn在线引用这些文件,
其过程相对烦琐,
因为这些框架的具体表现可能不只是一个文件,
如果下载,只能下载打包后的文件并自行解压缩,
如果在线引用,则需要自行添加多条源代码进行引用,
同时, 
是这些框架也是在不停维护和更新的,即使开发人员在本地已经下载过这些框架文件,
当需要新版本的框架时,又需要重新下载,或者上网搜索最 新的cdn引用地址。

为了解决这个问题,I s a a c Z. S ch l u e t e r使用运行在Node.js之上的 
JavaScript语言开发了npm,它允许配置一个仓库,并将大量框架的文件放在了npm仓库中,
并提供了一系列的管理命令,最终,开发人员只需要使用npm的命令,
就可以在线获取到框架文件。通常,框架的文件会自动的存储到工程目录下,
并在工程的配置文件中进行注册,开发人员只需要在主配置中进行导入及一些简单的配置就
可以开始使用这些框架。 
● 一定程度上,npm与MavenGradle是比较相似的。
——————————————————————————————————————————————————————————————————————————————————————
搭建开发环境:

为了使用npm,首先需要下载Node.js安装包:
– https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi 
– https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi 
– https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node- v16.14.2-x64.msi
Node.js的安装过程没有特别的注意事项,整个安装过程中都可以不必修 改任何内容,直至其自动安装完成
安装Node.js

1.此安装包会自动配置环境变量,安装完成后,可检查npm命令是否可用, 
   在 *** 作系统的命令提示符下执行以下命令即可:
(1)/1.右键windows图标,点击管理员,出现窗口后,输入【npm -v;】查看版本
   /2.或者【windows+R 输入cmd调出dos窗口】输入指令也可以!——————建议用这种!
   注意:你必须在新的命令提示符窗口(安装完Node.js后再打开的窗口) 中运行此命令。

2.配置npm源
  nmp源(即npm仓库,称之为:registry)默认是境外服务器,
  在国内使用时访问速度较慢,通常在初次使用时,应该将npm源更换为国内的服务器地址,
  例如使用https://registry.npm.taobao.org作为npm源
(1)设置淘宝的npm源:【npm config set registry https://registry.npm.taobao.org】

(3)当配置成功后,可通过get命令可查看npm源:
   查看npm源:【npm config get registry】 按回车若显示出上边那个网址即可成功

3.安装Vue CLI脚手架:
(1)执行命令:【npm install -g @Vue/cli】   
   注:-g表示全局安装,则当前 *** 作系统中所有用户均可使用,且自动配置Vue环境变量。
   
(2)出现以下提示就是安装成功:
   added 897 packages in 1m
   npm notice
   npm notice New minor version of npm available! 8.5.0 -> 8.10.0
   npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.10.0
   npm notice Run npm install -g npm@8.10.0 to update!
   npm notice 
(3)若安装没有成功,则需要卸载后重新安装npm源:重复以上步骤!!!
(4)继续:查看vue版本号:【vue -V】   即可显示当前的Vue CLI版本号



4.创建第1Vue CLI工程
(1)创建工程:把项目创建在该文件夹:Vue-Workspace 中:
             注:[cd..]的意思:可以退回到想创建上面文件夹的路径位置,
             若想在[F:\danei\softone\guobinjava> ]处创建,
             输入:【mkdir Vue-Workspace】  此时该文件夹创建成功,           
(2)进入该文件夹:【cd Vue-Workspace(3)当进入Vue Workspace后,就可以创建工程了 
   ①使用vue create命令即可创建Vue CLI工程,命令格式是:[vue create 工程名称]
    例如执行:【vue create vue-project-01】
   ②输入以上指令后,按下Enter键将准备创建工程,创建过程可能耗时较长, 
    注意:不可反复按Enter键,否则会视为选择各设置选项的默认项
(4)创建过程中会有一些选项:
   最先提示的选项是Please pick a preset,
   表示“请选择一个预设项”,推荐选择【Manually select features】,表示 “手动选择”,
   通过键盘的上下箭头进行选择,选择到目标项后按下键盘的Enter键到下一步:
(5)接下来的选项是Check the features needed for your project,
   表示 “选择你的工程中需要使用的功能”,
   推荐在列表中选择【BabelRouterVuex】这3项,
   使用键盘的上下箭头移动,使用【空格】选中或取消选中,
   选择完成后按下键盘的Enter键到下一步:
(6)接下来的选项是Choose a version of Vue.js that you want to start the project with,
   表示“选择你的工程中希望使用的Vue.js的版本”, 
   推荐选择【2.x】这项,选择到目标项后按下键盘的Enter键到下一步
(7)接下来的选项是Use history mode for router,
   表示“是否在路由中选 择历史模式”,
   推荐选择“是”,输入Y后按下键盘的Enter键到下一步 (提示信息中,Y是大写的,表示它是默认选项,
   不输入Y而直接按下 Enter键是等效的):
(8)接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?,
   表示“你习惯把一些配置信息存放在哪里?”,
   推荐选择 【In package.json】,即存放在package.json文件中,
   选择到目标项后按下键盘的Enter键到下一步
(9)最后的选项是Save this as a preset for future projects?,
   表示“是否 保存以上配置信息,作为后续将创建的新工程的预设?”,
   推荐选择 “否”,输入N后按下键盘的Enter键(提示信息中,N是大写的,表示它是默认选项,
   不输入N而直接按下Enter键是等效的
(10)至此,配置过程已经结束,接下来会自动创建工程,耗时取决于网络速度, 
    通常需要30秒至5分钟左右
(11)出现以下即为成功:
     Successfully created project vue-project-01.
     系统会提示这两句:
       $ cd vue-project-01
       $ npm run serve


5.启动服务
(0)从现在开始,你可以使用IDEA或类似的开发工具来打开你的项目(vue-project-01),
   并使用idea中内置的【Terminal   :在idea中最下边的窗口栏点开即可】执行下面的命令,
   使用方式与命令提示符窗口完全相同,为保证你有足够的权限执行命令,
   你应该以管理员的身份运行IDEA(一般在idea中是默认的),
   否则,后续仍可能出现某些命令无法成功执行的问题。 
(1)进入工程目录:执行命令:【cd vue-project-01】,
(2)执行【npm run serve】命令即可启动此工程的服务(过程中会编译打包此工程):
(3)当提示以下信息时,表示工程已成功启动:
     DONE  Compiled successfully in 7728ms                                          11:41:39
       App running at:
       - Local:   http://localhost:8080/
       - Network: http://172.18.8.11:8080/

(4)在浏览器访问上边系统提示的localhost网址,若页面中出现【Vue绿色图标】即为成功!!!


6.停止服务
(1)如果需要停止服务,在控制台使用Ctrl + C即可 
   ● 提示:当按下Ctrl + C后,会提示"终止批处理 *** 作吗(Y/N)?",输入Y即可停止服务!!!
           其实,当按下Ctrl + C后,服务已经被停止,
                 在此提示中无论选择YN结果都已经不重要了

7.重启服务
(1)在idea控制台重新输入【npm run serve】;系统提示出网址在浏览器访问即可!


8.若启动后该网址端口被占用
(1)第一种:可以百度找到该占用的端口号停止服务!
(2)第二种:可修改指定服务端的端口号
           此服务默认占用8080端口,如果端口已经被占用,
           将自动修改端口为 8081或继续向后递增端口号 
           ● 如需手动修改端口号,在【工程根目录下】的【package.json】中修改scripts属性下serve的值:
	     【vue-cli-service serve --port 端口号】
(3)例如上面的【package.json】改为使用9090端口:
   则下次启动时会使用新设定的端口号:
   DONE  Compiled successfully in 7728ms                                          11:41:39
       App running at:
       - Local:   http://localhost:9090/
       - Network: http://172.18.8.11:9090/
   提示:即使显式的指定了端口号,如果指定的端口仍被其它服务占用,
         仍会自动在指定端口号的值的基础上递增,以使用新的端口号!
         例如显式的指定了使 用9090端口,如果9090被占用且9091可用时,会自动改为使用9091端口。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1296791.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存