# Vue2高级-组件+路由+脚手架 - vue组件（掌握） - vue-router路由（掌握） - vue-cli脚手架（掌握） ## 一. Vue组件 ### 1. 什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。终上所述：\*\*组件是用来完成特定功能的自定义HTML标签\*\* 例如: \`\`\`html \`\`\` 注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能 ### 2. 组件的作用 组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。封装重复利用 ### 3. 组件的分类 组件分为全局组件和局部组件 全局组件：在所有vue实例中有效 局部组件：在当前vue实例中有效 #### 3.1. 全局组件 \*\*语法：\*\* Vue.component("自定义标签的名字",{配置对象}) \*\*特点：\*\* 全局组件定义在Vue实例外面，可以在任何被Vue实例挂载的标签中使用 \*\*案例：\*\* \`\`\`javascript ------------------------------------------------------------------------------- //定义第一个全局组件 Vue.component("mycomponent1",{ template : " 这是第一个全局组件 ========= " }) //定义第二个全局组件 var component2Config = { template : " 这是第二个全局组件 ========= " }; Vue.component("mycomponent2",component2Config); var app = new Vue({ el: "#app", data: { } }); var app1 = new Vue({ el: "#app1", data: { } }); \`\`\` #### 3.2. 局部组件 \*\*语法：\*\* \`\`\`javascript var app = new Vue({ el: "#app", data: {}, components : { "局部组件的名字1" : {组件的配置对象}, "局部组件的名字2" : {组件的配置对象} } }); \`\`\` \*\*特点：\*\* 局部组件定义在Vue实例中，只能在当前Vue实例所挂载的标签中使用 \`\`\`javascript //1.在id=app1挂载的实例的components中定义局部组件 var app1 = new Vue({ el: "#app1", data: {}, components : { "mycomponent" : { template : " 这是一个局部组件 ======== " } } }); //2.在id=app2的标签中是不能够使用上面app2对象的局部组件的 var app2 = new Vue({ el: "#app2", data: {} }); \`\`\` 组件定义注意事项： \~\~\~ 1.组件中模板的定义有且仅有一个根元素 2.组件的名称建议全小写，如果非要用驼峰，访问的时候需要以a-b进行访问。举个栗子 组件的名称：helloWorld - 元素中引用时必须使用进行引用 3.挂载点可以使用元素选择器和类选择器，但是也是只有第一个有效，所以推荐使用id选择器 \~\~\~ ### 4. 组件中定义数据 #### 4.1. 全局组件中定义数据 \`\`\`javascript "组件的名字": { template: "", data(){ return { 键1: 值1, 键2: 值2 } } } \`\`\` #### 4.2. 局部组件中定义数据 \`\`\`javascript components: { "组件的名字": { template: "", data(){ return { 键1: 值1, 键2: 值2 } } } } \`\`\` \*\*注意事项：\*\* - data数据只能够以函数的形式返回，因为函数中可以写其他的业务代码 - 只能够在各自的组件模板中使用各自的组件中的data数据 - Vue对象中的数据不能够在组件中使用。组件的数据也不能够在挂载的html标签上使用 \*\*测试代码：\*\* \`\`\`html {{name}} \`\`\` ### 5. 组件中定义模板 两种方式： 第一种：直接在template属性写上html代码字符串或者变量指定 \`\`\`javascript Vue.component("myComponent",{ template: " 我是全局组件 ====== 呵呵{{msg}} ", data(){ return { msg: "鸡杀马" } } }) \`\`\` 第二种：将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串)。可以在网页中定义template标签或者script标签包含模板中需要的html模板代码 \`\`\`html template标签中的html {#mytemplate} ============================== \`\`\` ## 二. Vue-Router路由 ### 1. 什么是路由 回顾：@RequestMapping：请求映射Controller接口方法 在Vue中，路由是负责将进入的浏览器\*\*请求映射\*\*到特定的\*\*组件\*\*代码中，即点击页面中的导航链接不会刷新页面，只会把匹配到组件或页面局部更新到当前页面，数据需要通过\[ajax请求\](https://so.csdn.net/so/search?q=ajax请求\&spm=1001.2101.3001.7020)获取。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源 官方地址：https://v3.router.vuejs.org/zh/ 例子：网易云音乐就是一个非常经典的Vue项目：https://music.163.com/ ### 2. 路由入门 Vue Router 是 Vue.js 官方的路由管理器，是Vue的一个插件。路由不包含在vue中，是一个插件，需要单独下载。要使用路由也需要引入： \> cdn直接引入到页面中 直接下载 / CDN：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js \> npm下载并引入 地址：npm i vue-router@3.0.1 引入路由： \`\`\`html \`\`\` 挂载到一个dom元素上，使用路由： \`\`\`html 10_vue路由.html 首页 产品 关于我们 \`\`\` ## 三. Vue-cli脚手架必须搞定 ### 1. Vue-cli简介 在开发中，需要打包的东西不止是js、css【类加载器和样式加载器】、html、图片。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。并且自己管理前端库的版本可能会出现版本冲突问题 幸好，vue官方提供了一个快速搭建webpack项目的脚手架工具：vue-cli 使用它能快速的构建一个vue web工程模板，并且开发者无需管理版本号，避免版本冲突问题 官网：https://github.com/vuejs/vue-cli 安装命令：npm install -g vue-cli ### 2. 快速上手 #### 2.1. vue-cli快速创建webpack项目 新建一个项目（避免版本冲突）：hello-vue-cli vue init webpack 【使用Vue的脚手架工具去初始化一个webpack打包项目】 !\[img\](课件图片/wps5AD4.tmp.jpg) !\[img\](课件图片/wps5AD5.tmp.jpg) !\[img\](课件图片/wps5AE5.tmp.jpg) !\[img\](课件图片/wps5AF6.tmp.jpg) !\[img\](课件图片/wps5B07.tmp.jpg) 怎么记：路由router之前全部会回车，路由之后全部选n #### 2.2. 运行测试 !\[img\](课件图片/wps5B2B.tmp.jpg) npm run dev：启动项目命令 - package.json的环境 演示热更新 npm run build：手动打包可以在Tomcat等服务器运行\[部署的时候需要手动打包\] ### 3. 单文件组件.vue \*\*Vue的单文件组件是一种将模板、样式和逻辑代码封装在一个文件中的组件开发方式，它使用了以.vue为后缀的文件，结构清晰，便于维护和复用\*\*。单文件组件 = 单文件页面 = 以.vue结尾的文件 单文件组件中包含三部分内容： - template：html模板，模板部分定义了组件的结构和布局，使用HTML标记和Vue的模板语法进行编写。可以使用Vue的指令、插值表达式、事件绑定等功能来动态渲染和交互 - script：js脚本，脚本部分定义了组件的行为和逻辑，使用Vue的组件选项进行编写。可以在脚本中定义组件的数据、计算属性、方法、生命周期钩子等。还可以引入其他模块、组件和插件，对外暴露组件接口 - style：样式，样式部分定义了组件的样式和布局，可以使用CSS、Sass、Less等预处理器进行编写。样式可以通过作用域或全局方式应用到组件中，避免样式冲突和影响 每个组件都有自己独立的html、JS、CSS，互不干扰，真正做到可独立复用 注意：以后作为开发者只需要开发一个单文件组件/页面（以.vue的文件），然后配置路径就可以了，其它打包的交给webpack自动帮我们完成 注意：如果开发工具是IDEA，可以在IDEA中添加vue插件支持： !\[img\](课件图片/wps5B18.tmp.jpg) !\[img\](课件图片/wps5B19.tmp.jpg) !\[img\](课件图片/wps5B2A.tmp.jpg) ### 4. 项目结构介绍 下面我们来认识一下自动生成的那些文件，了解一个大概，看几个主要的文件即可 !\[webpack项目架构图\](课件图片/webpack项目架构图.png) #### 4.1. package.json 包管理文件，相当于后端maven工程的pom.xml !\[2002214512\](./课件图片/2002214512.png) #### 4.2. main.js main.js作为程序的主要js，\*\*该js中的配置在整个项目中都适用\*\* !\[123\](课件图片/123.png) \`\`\`js // The Vue build version to load with the \`import\` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /\* eslint-disable no-new \*/ new Vue({ el: '#app', //元素绑定 ，对应了 App.vue中的 router, //路由，对应了 import router from './router' components: { App }, //定义组件 ，对应了 import App from './App' 其实引入了App.vue template: '' //使用组件，会把这个组件展示到页面上 }) \`\`\` #### 4.3. App.vue !\[image-20220510130428640\](./课件图片/image-20220510130428640.png) - 这个页面是程序的主页面，所有的其他子页面都将会挂载到这个下面 - router-view是路由的出口，路由匹配到的组件将渲染在这里 #### 4.4. router/index.js !\[123\](./课件图片/123-16521602932736.png) ### 5. 项目结构和运行流程 页面显示的就是App的内容（上半部分是图片，下本部分是路由匹配上的组件的内容）,这个内容是如何显示出来的？ #### 5.1. 开启服务器时 !\[server-start\](课件图片/server-start.png) \~\~\~ 流程描述： 1. 当使用npm run dev启动服务器时，会根据package.json的描述找到打包入口文件main.js 2. 当我们访问的时候，就会在运行时将main.js打包(并不是实际的生成出打包文件)，并自动注入/引入到index.html \~\~\~ #### 5.2. 访问项目时 !\[page-called\](./课件图片/page-called.png) \~\~\~ 流程描述： 1. 当浏览器通过地址localhost:8080访问时，默认访问localhost:8080/index.html 由于页面有一个挂载点，main.js中的Vue实例被挂载到这里。而且使用了路由，所有地址栏会变成localhost:8080/#/ 2. 然后/在路由匹配规则中匹配了HelloWorld.vue，所以就会将HelloWorld.vue的内容显示到页面 3. 为了统一管理，main.js中实际上是App.vue的内容，App.vue嵌入或引用了匹配组件的内容。所以实际页面显示出来的内容实际上是App.vue的内容，上面是图片，下面是匹配上的组件的内容 \~\~\~ 注意作为开发者：以后只需要：1. 写一个单文件组件（.vue的页面） 2. 配置路由