day58（关于Vue CLI ，搭建开发环境，创建第1个VueCLI工程 ，了解VueCLI工程 ）

day58（关于Vue CLI ，搭建开发环境，创建第1个VueCLI工程 ，了解VueCLI工程 ）

1. 关于Vue CLI

1.关于VUE

  • 传统的前端开发框架大多是基于DOM（Document Object Model：文档对象模型）的，在操作时，需要关心被操作的页面元素，甚至这些页面元素的层级结构，核心思想是：先根据DOM找到对应的页面元素，然后再进行相关操作，例如设计其样式，或配置某个事件

  • Vue则是将必要的页面元素的相关属性（例如页面元素的样式、控件的值、页面元素的事件等）与数据进行绑定，当实现绑定后，就不再需要关心页面元素本身了，只需要关心各个数据即可，从而避免了大量繁琐的DOM操作，也实现了页面设计与数据处理的分离

2.关于Vue CLI

  • Vue CLI通常称为“VUE脚手架” ，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的工程模板

  • Vue CLI相关文档的官方网址是：https://cli.vuejs.org/zh/guide/

  • Vue CLI是由VUE提供的一个官方客户端（client），专门为单页面应用快速搭建繁杂的脚手架

  • 所谓的单页面，指的是在工程中，理论上只有1个HTML页面，只不过这个页面的所有内容都是可以动态更新的，你随时可以使用新的页面内容替换原有的内容，并且，你还可以使得URL一并更新，从用户体验上来说，这种单页面应用与传统的前端应用并没有什么不同

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

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

  • 由Vue CLI创建的工程，默认即是热部署的，当你启动了这个工程（非打包后的工程）的服务后，在绝大部分情况下，修改源代码后并不需要重新启动服务，即可体验到修改后的内容。

3.关于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. j s之上的JavaScript语言开发了npm，它允许配置一个仓库，I并将大量框架的文件放在了npm仓库中，并提供了一系列的管理命令，最终，开发人员只需要使用npm的命令，就可以在线获取到框架文件。通常，框架的文件会自动的存储到工程目录下，并在工程的配置文件中进行注册，开发人员只需要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。

  • 一定程度上，npm与Maven或Gradle是比较相似的。

2.搭建开发环境

1.安装Node.js

2.配置npm源

  • nmp源（即npm仓库，称之为：registry）默认是境外服务器，在国内使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内的服务器地址，例如使用https://registry.npm.taobao.org作为npm源

  • 配置npm源的命令如下： npm config set registry https://registry.npm.taobao.org

  • 当配置成功后，可通过get命令可查看npm源： npm config get registry

  • 注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，在Mac OS中，请使用sudo来执行以上命令。

3.安装Vue CL

  • 安装Vue CLI的命令如下： npm install -g @vue/cli

  • 以上命令中，-g表示全局安装，则当前操作系统中所有用户均可使用，且自动配置Vue环境变量。

  • 此过程将从仓库服务器中下载Vue CLI，通常耗时30秒至5分钟左右。

  • 提示：如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏旧等，均可无视。

  • 注意：以上操作仍需要管理权限才可以成功执行。

  • 安装完成后，可通过以下命令检验Vue CLI是否安装成功： vue -V 注意：命令中的-V中的V是大写的。

3.创建第1个VueCLI工程

1.创建工程

  • 通常使用Vue的命令来创建Vue CLI工程，并且，此命令会将工程创建在执行命令时的位置，所以，先在命令提示符窗口中进入VueWorkspace

  • 使用vue create命令即可创建Vue CLI工程，命令格式是： vue create 工程名称 。 例如执行： vue create vue-project-01

  • 注意：不可反复按Enter键，否则会视为选择各设置选项的默认项- 31-vue create 工程名称 vue create vue-project-01

  • 创建过程中会有一些选项，最先提示的选项是Please pickapreset，表示“请选择一个预设项” ，推荐选择Manually select features，表示“手动选择” ，通过键盘的上下箭头进行选择，选择到目标项后按下键盘的Enter键到下一步

  • 接下来的选项是Check the features needed for your project，表示“选择你的工程中需要使用的功能” ，推荐在列表中选择Babel、Router、Vuex这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的Enter键到下一步

  • 关于列表中主要的几个功能：

    • Babel：ES6高级语法向低版本语法兼容的工具

    • Router：路由管理器（管理请求路径与页面资源的映射关系，相关于Controller中@RequestMapping）

    • Vuex：全局状态管理工具（管理全局共享的内存中的数据，例如各页面需要使用到的用户信息）

    • Linter：初学者不建议勾选，是代码规范检验工具，其要求较严格

  • 接下来的选项是Choose a version of Vue.js that youwant tostartthe project with，表示“选择你的工程中希望使用的Vue.js的版本”，推荐选择2.x这项，选择到目标项后按下键盘的Enter键到下一步

  • 接下来的选项是Use history mode for router，表示“是否在路由中选择历史模式” ，推荐选择“是” ，输入Y后按下键盘的Enter键到下一步（提示信息中，Y是大写的，表示它是默认选项，不输入Y而直接按下Enter键是等效的）

  • 接下来的选项是Where do you prefer placing config for Babel, ESLint, etc.?，表示“你习惯把一些配置信息存放在哪里？”，推荐选择In package.json，即存放在package.json文件中，选择到目标项后按下键盘的Enter键到下一步

  • 最后的选项是Save this as a preset for future projects?，表示“是否保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择“否” ，输入N后按下键盘的Enter键（提示信息中，N是大写的，表示它是默认选项，不输入N而直接按下Enter键是等效的）

2.启动服务

  • 注意：从现在开始，你可以使用IntelliJ IDEA或类似的开发工具来打开你的项目，并使用内置的Terminal执行各个命令，使用方式与命令提示符窗口完全相同，为保证你有足够的权限执行命令，你应该以管理员的身份运行IntelliJ IDEA，否则，后续仍可能出现某些命令无法成功执行的问题。

  • 进入工程目录，执行npm run serve命令即可启动此工程的服务（过程中会编译打包此工程）： npm run serve

3.停止服务

  • 如果需要停止服务，在控制台使用Ctrl + C即可

  • 提示：当按下Ctrl + C后，会提示"终止批处理操作吗(Y/N)?" ，其实，当按下Ctrl + C后，服务已经被停止，在此提示中无论选择Y或N结果都已经不重要了

4.指定服务端口

  • 此服务默认占用8080端口，如果端口已经被占用，将自动修改端口为8081或继续向后递增端口号

  • 如需手动修改端口号，在工程根目录下的package.json中修改scripts属性下serve的值： vue-cli-service serve --port 端口号

4.了解VueCLI工程

1.工程结构

  • [.idea]：使用IntelliJ IDEA打开工程时会产生此文件夹，其中的文件都是IntelliJ IDEA管理此工程时将使用到的，不手动管理，即使删除此文件夹，IntelliJ IDEA也会按需自动创建此文件夹及其下必要的文件

  • [node_modules]：工程中使用到的模块，也可以理解为工程的依赖项，例如Babel、Vue等框架的文件，不手动管理– 需要注意：如果是从Git或其它位置复制得到的工程，可能没有此文件夹，需要运行npm install，否则将无此文件夹及其下的各依赖项，工程将无法正常启动– 本课程提供的资源中，各练习案例也不包含此文件夹，均需要在各工程目录下执行npm install后才可以正常运行

  • [public]：工程被编译打包后仍会保留的内容（文件内容可能会在编译打包过程中修改） – 你可以自行在此文件夹下创建子级文件夹，用于存放静态资源，例如图片等

  • public/index.html：默认的主页，通常不修改其内容。

  • [src]：页面源代码，除工程配置以外的所有开发都在此文件夹下

  • [src/assets]：资源文件夹，通常存放图片等– 注意：仅不需要被程序动态控制的图片放在此处

  • [src/components]：视图组件，通常是可以被其它各页面复用的，是各个.vue文件

  • [src/router]：路由控制

  • src/router/index.js：路由配置文件，除非工程中页面数量较大，或路由关系复杂，否则使用这1个文件进行路由管理即可

  • [src/store]：全局共享的内存中的数据

  • src/store/index.js：暂不关注

  • [src/views]：视图组件 ，通常，每个页面在此文件夹都应该有1个对应的文件，可引用[src/components]下的组件

  • src/App.vue：默认的主页视图组件

  • src/main.js：工程的主js文件，通常用于导入工程中将使用的其它库– 此文件中所有import语句必须在最上方位置，各import语句不区分先后顺序

  • .gitigore：用于配置使用Git提交工程时将忽略的文件和文件夹

  • bable.config.js：Babel的配置文件，在不熟悉的情况下不要手动修改此文件的配置

  • package.json：工程的管理配置文件，相当于Maven项目的pom.xml，在不熟悉的情况下不要手动修改此文件的配置，可能需要关注的主要有：– scripts：支持的2个npm命令参数，例如npm run serve、npc runbuild– dependencies：运行时依赖项 – devDependencies：开发依赖项，将不参与打包

  • package-lock.json：工程的管理配置文件，在不熟悉的情况下不要手动修改此文件的配置

  • README.md：工程的说明文档，用于开发人员编写如何使用、注意事项、更新日志等内容，使用IntelliJ IDEA首次打开工程时，会自动打开此文件，此文件的默认内容中提示了工程的运行命令

  • vue.config.js：Vue的配置文件，在不熟悉的情况下不要手动修改此文件的配置

     

2.关于视图组件

  • 在以上views/HomeView.vue文件中，第4行代码为:<HelloWorld msg="欢迎来到夜之城"/>

  • 以上代码是基于其在<script>标签内通过以下代码引用了 components/HellowWorld.vue视图组件:import HelloWorld from '@/components/HelloWorld.vue'

  • 并且，在节点中配置了名为msg值为"WelcometoYourVue.js App"的属性，而components/HelloWorld.vue中则使用{{ msg }}应用了传入的值，这是在Vue CLI工程中封装视图组件并引用时传参的典型方式

  • 在components和views下的.vue文件的设计方式是基本相同的，区别在于components下的视图组件应该是可以被引用的

  • 所有视图组件的源代码被修改后，都不需要重启服务，在浏览器可以看到最新的内容，这是Vue CLI的热部署（热更新）实现的

3.关于路由

  • Vue CLI应用是单页面的，也就是说，在Vue CLI工程的设计思想中，页面只有1个，只不过页面中的内容是可以动态调整的，所以，无论是使用不同的URL进行访问，还是页面中触发某个事件后，虽然用户看到了不同的页面效果，但是，用户看到的其实永远只是1个页面，只是页同中的内容不同而已，这也就是视图组件源文件中使用

  • Vue CLI工程使用路由控制 单页面中显示的元素，默认 的router/index.js源代码

  • 在此文件中，需要重点关注import语句和routes常量

  • routes常量是一个数组，数组元素是JSON对象，此JSON对象中主要配置的属性有：

  • path：路径，即URL路径，每个JSON对象的此属性值必须是唯一的，Vue将根据用户访问的URL加载对应的视图组件

  • name：名称，可忽略，如果配置此属性，则每个JSON对象的此属性值必须是唯一的

  • component：视图组件，当访问的URL匹配path时，此视图组件将被显示，在配置此属性的值时，需分析此视图组件是否为动态导入（懒加载）的– 默认即导入：当客户端首次访问此服务时，就会导入此视图组件，需通过此文件顶部通过import语句导入，且component属性的值就是import时指定的视图组件名，每个工程中通过此方式导入的视图组件应该非常少

  • 动态导入：取值是使用ES6中的import()返回的Promise对象，相比之下，import语句是默认即导入的，而import()函数是动态导入的，以避免客户端首次访问此服务时就加载了大量的视图组件，每个工程中的绝大部分视图组件都应该是这种方法导入的– 注意：以上语法格式需要Babel支持，否则将无法正常编译打包

  • 提示：此JSON对象还有更多属性配置，将在后续的应用中补充

posted @ 2022-05-23 13:33  约拿小叶  阅读(65)  评论(0)  编辑  收藏  举报