框架Vue
C.&H.
这个作者很懒,什么都没留下…
展开
-
vue3项目的创建和配置文件
vue3项目的创建和配置文件原创 2022-07-02 08:10:28 · 6915 阅读 · 1 评论 -
创建vue项目时遇到的问题
一、由于用户权限不足,无法加载文件,以管理员身份运行cmd也可以解决此问题。解决方案:(1)在终端中继续输入Set-ExecutionPolicy -Scope CurrentUser,执行命令后会显示如下位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy请为以下参数提供值:ExecutionPolicy:(2)继续输入 RemoteSigned即可完成;(3)再次输入vue create vue_yiqing时即可成功安装二、版本更新问题原创 2022-04-28 21:43:01 · 4946 阅读 · 0 评论 -
Vue项目的创建
1、在目录F:\H5DaiMa\VS Code\Day1下创建vue项目,项目名为:vue_testF:\H5DaiMa\VS Code\Day1>vue create vue_test2、进行相关的设置(选择的Vue 3.x)3、创建成功4、启动项目vue_test(注意:需要在根目录F:\H5DaiMa\VS Code\Day1\vue_test下启动)5、访问http://localhost:8080/,显示如下页面,则创建成功...原创 2021-06-22 19:01:06 · 73 阅读 · 0 评论 -
五十二、进阶之Nuxt---反向代理( 解决跨域问题)以及elementUI的使用
一、反向代理( 解决跨域问题)实现功能:使comingsoon页面显示猫眼中的数据(1)安装反向代理模块(2)comingsoon.vue中获取数据(3)在nuxt.config.js中进行反向代理配置二、elementUI的使用(1)安装插件(sass-loader 和 node-sass)(2) 根据官方文档使用即可...原创 2021-03-19 07:39:17 · 853 阅读 · 0 评论 -
五十一、进阶之Nuxt-------asyncData(请求数据)
注意:在当前页面刷新时,服务端执行此函数; 从其他也买你跳转过来时,客户端执行此函数;(1)获取正在热映的电影信息,显示到页面使用这种方式,可以直接在后端获取数据,将渲染好的页面交给前端1. 引入axios2. 获取数据3. 显示到页面(2)asyncData中的参数在detail页面获取传过来的数据(3)点击nowplaying中的电影,将其详细信息显示到detail页面...原创 2021-03-19 07:38:51 · 2855 阅读 · 0 评论 -
五十、进阶之Nuxt动态路由 及 视图
一、动态路由实现功能:1. 点击nowplaying页面中的数字,跳转到detail页面; 2. 并将当前数字显示在detail页面中; 1. 在nowplaying页面,显示数字列表,并且点击数字实现跳转2. 在pages文件夹下,创建deatil文件夹(与上图中添加的路由名一致)。并且在detail文件夹下,创建_myid.vue文件(其中myid是随意取的,获取传过来的数据时使用)3. 效果图二、视图实现功...原创 2021-03-18 19:18:01 · 553 阅读 · 0 评论 -
四十九、进阶之Nuxt 重定向
(1)方法一:在配置文件nuxt.config.js进行重定向处理在地址栏输入:直接跳转到我们配置的重定向页面:(2)方法二:利用中间件。实现重定向实现功能:访问Film页面时,直接跳转到Film/nowplaying页面1. 在middleware文件夹中定义redirect.js文件(middleware文件夹存放的都是中间件)2. 在nuxt.config.js进行配置访问Film页面:直接跳转到Film/nowplaying页面:.原创 2021-03-18 17:33:38 · 2474 阅读 · 0 评论 -
四十八、进阶之Nuxt 一级路由及声明式导航
(1)Nuxt一级路由Nuxt.js依据pages目录结构自动生成vue-router模块的路由配置,不需要自己配置例如:我们创建在pages文件夹下,创建了3个vue文件对这个组件分别进行访问:(2)Nuxt声明式导航(点击直接访问相应的页面,而不需要在地址栏中切换)1. nuxt项目的根组件是:2. 在根组件default.vue中,添加声明式导航:其中<nuxt-link>类似于<router-link>3.原创 2021-03-18 16:55:51 · 545 阅读 · 0 评论 -
四十七、vue进阶之nuxt框架的项目创建(基于vue.js通用应用框架)
(1)在目录下全局安装nuxt的脚手架npx create-nuxt-app mycc1. 安装指令的含义:如果已经安装,该指令则创建项目mycc(自己定义)如果没有安装,该指令先全局安装,再创建项目mycc2. 具体的安装过程访问localhost:3000。显示该页面,说明项目创建成功...原创 2021-03-18 16:23:16 · 274 阅读 · 0 评论 -
四十六、进阶之服务器端渲染(SSR)
官网:https://ssr.vuejs.org/SEO:搜索引擎优化(1)服务器端渲染Vue示例1. 先安装vue 和vue-server-renderer2. 创建rendererTest.js文件(参照官网)3. 在控制台执行该js文件画线部分为渲染的结果(2)与服务器集成在 Node.js 服务器中使用时相当简单直接,例如Express1. 安装express2. 将官网模板赋值到expressTest.js文件,并修改3...原创 2021-03-18 15:31:15 · 133 阅读 · 0 评论 -
四十五、vue进阶之手势事件
vue touch网站:https://github.com/vuejs/vue-touch/tree/next(1)安装npm install --save vue-touch@next(2)使用<template> <div> <v-touch v-on:swipeleft="onSwipeLeft"> <!-- 手势作用区域demo。onSwipeLeft是自己定义的方法 -...原创 2021-03-18 14:25:51 · 424 阅读 · 0 评论 -
四十四、进阶之vue---mintUI(index List的使用)
实现功能:1. 通过index List实现城市列表的效果 2. 选择城市(通过cookie获取该城市的id),显示该城市的电影院信息 3. 注意:之前请求的链接都包含相应的城市编号(1)创建City.vue,并显示城市列表(City.vue)1. 首先利用axios获取卖座网的城市信息2. 对获取的城市信息进行过滤,将其过滤为对象数组的形式。每个对象有一个key值和数组,如{‘A’,["鞍山","安徽"]}...原创 2021-03-18 13:40:10 · 781 阅读 · 0 评论 -
四十三、进阶之vue---mintUI(常用功能的使用)
(1) minUI的下载与引入1. 下载npm install --save mint-ui2. 引入(main.js)//引入mintUIimport MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)(2) 使用minUI创建按钮(center.vue)(3) 使用minUI的Indicator,在Film.vue页面中添加 加载符号 (Film.vue)1. 引入.原创 2021-03-18 09:30:10 · 510 阅读 · 0 评论 -
四十二、进阶之vue-----ElementUI(PC框架)
element官网:https://element.eleme.cn/#/zh-CN/component/installation(1) elementUI的安装(2) elementUI的引入(main.js)//引入element UIimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);(3)elementUI的使用..原创 2021-03-18 08:08:21 · 128 阅读 · 0 评论 -
四十一、进阶之vuex----getters
在store中返回一些指定数据,比如想获取好评排名前三的电影数据实现功能:获取即将上映的前3个电影(1)在getters中对comingList进行过滤处理,并将过滤结果返回(store/index.js)(2)获取getters返回的过滤数据(Coming.vue)...原创 2021-03-18 08:08:05 · 93 阅读 · 0 评论 -
四十、进阶之vuex-----mapState
(1)使用mapState获取状态信息mapState是获取状态信息的另一种方式。例如:通过这种方式,获取store/index.js中isTabbarShow的值其中获取该对象的值,再执行...,将获取的对象进行展开合并,到一个数组... 是展开合并运算符,例如:1. 数组使用...进行合并2. 运算符使用...进行合并(2)对import{mapState}from'vuex'加括号的解释这是因为vuex中有多个方法,我们只需要用mapSta...原创 2021-03-17 20:44:30 · 140 阅读 · 0 评论 -
三十九、进阶之vuex异步处理(对即将上映页面的数据进行缓存)
问题:重复访问,导致对服务器的重复请求,降低用户体验。解决:使用vuex的异步处理,第一次访问时将数据缓存,下次访问直接从缓冲中获取,提高访问速度。注:刷新页面时,会把当前页面占用的缓存释放掉,再重新加载新的缓存。实现的功能:获取即将上映页面的数据,并将其数据进行缓存,提高访问速度(1)分析如果我们对正在热映进行异步处理,缓存数据1. 判断store中有没有nowplaying的数据。如果没有,则通过action进行ajax请求获取数据,并将获取的数据交给mutation,赋值给原创 2021-03-17 20:07:41 · 281 阅读 · 0 评论 -
三十八、进阶之vue-devtools测试工具安装与使用
一、vue-devtools测试工具安装(1)首先下载vue-devtools链接:https://pan.xunlei.com/s/VMUm_DaYbIqH65SQns1jgVVlA1提取码:76fa(2)点击3个点-》更多工具-》扩展程序(3)选择开发者模式-》将下载的文件直接拖入到空白区域-》弹框选择添加扩展程序并且该工具的按钮必须是打开(4)选择固定vue.js devtools选上就显示蓝色(5)如果当前页面使用vue编写的,这个图标就是彩色的原创 2021-03-17 18:48:34 · 591 阅读 · 0 评论 -
三十七、进阶之vuex(状态管理)实现三十六节中的功能(同步)
vuex对应store/index.jsstore/index.js文件一、使用vuex实现三十六节中tabbar的显示和隐藏问题(1)在store/index.js中定义共享的变量isTabbarShow来控制tabbar的显示(2)在App.vue中访问isTabbarShow(删掉之前的isshow以及总线监听)通过这句话可以直接访问到值isTabbarShow,因此可以在detail.vue中对该值进行修改(3)在detail中修改isTabbarShow..原创 2021-03-17 16:04:22 · 97 阅读 · 0 评论 -
三十六、进阶之事件总线(非父子通信)--进入详情页隐藏底部的tabbar
实现功能:进入详情页时,隐藏页面底部的tabbar,退出详情页时,显示底部的tabbar进入详情页(隐藏tabbar)退出详情页(显示底部灰色的tabbar)方法:用事件总线来实现tabbar和Detail是非父子关系,对于这种非父子之间的通信(适用于项目中用到非父子通信的地方比较少的情况),引入事件总线可实现(1)首先创建下面目录,并在bus/index.js中创建事件总线(2) 在App.vue中用事件总线监听事件,在Detail.vue中用事件总线触发事件操原创 2021-03-17 15:12:02 · 149 阅读 · 0 评论 -
三十五、影院页面(获取卖座官网的影院信息并显示)
Better-Scroll插件实现页面中拖动滚动、拉动属性功能(平滑滚动),以提高用户体验。当div内容的高度超过div的高度时,使用该插件实现平滑滚动。Better-Scroll的安装:(1)具体实现过程Cinema.vue<template> <!-- div的高度设置为“整个页面的高度” 减 “底部选项栏的高度” 因此为其设置动态样式 --> <div class="cinema" :s.原创 2021-03-17 14:53:19 · 586 阅读 · 0 评论 -
三十四、进阶之获取详情页面信息并显示
(1)分析如何获取对应电影的详情信息获取卖座网站电影的详情信息观察卖座网,进入“阿凡达”和“你好李焕英”的详情页面,可以发现路径变化的只有电影id(filmId)因此我们可以通过电影的id获取对应电影的详情信息https://m.maizuo.com/gateway?filmId=5382&k=4136317https://m.maizuo.com/gateway?filmId=5335&k=2152933因此可以通过下面的代码,获取详情信息原创 2021-03-17 13:23:46 · 479 阅读 · 0 评论 -
三十三、添加选项按钮及吸顶效果
一、添加正在热映和即将上演选项按钮(1)创建组件FilmHeader.vue(作为按钮部分)<template> <div> <ul> <router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link> <router-link to="/film/comin原创 2021-03-17 10:41:22 · 170 阅读 · 0 评论 -
三十一、进阶之项目轮播
在之前Film.vue文件中有轮播,本节对其实现真正的轮播效果下载swiper插件引入swiper的css文件的问题:新版的swiper插件中是没有dist文件夹的,引入swiper.css的地址被替换成了swiper/swiper-bundle.css,...原创 2021-03-17 09:56:16 · 78 阅读 · 0 评论 -
三十二、使用axios获取指定网站的数据
获取卖座网的数据 mounted(){ axios({ url:"https://m.maizuo.com/gateway?type=2&cityId=440300&k=1427252", headers:{ 'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"1615895162724483673423873"}',原创 2021-03-17 09:32:18 · 1154 阅读 · 0 评论 -
三十、进阶之项目iconfont 及 nowplaying中电影信息显示
一、iconfont 图标设置底部的三个按钮(film、center、cinema)(1)在App.vue中添加样式(2)在Tabbar.vue中添加样式(包含三个组件按钮的文件)使3个组件在底部居中显示(3)为film添加iconfont图标1. 先将iconfont文件夹放到public文件夹下2. 在index.html文件中引入iconfont.css文件其中,根据我们可以确定<%=BASE_URL%>表示public文件夹..原创 2021-03-16 21:32:16 · 398 阅读 · 0 评论 -
二十九、进阶之项目数据请求
(1)卖座的官网下面这句代码,表示所有的域名都可以拿到它的数据。(不用再配反向代理)但是它加了验证,配了一些字段,如果请求中有这些字段,这通过请求;否则不会给这些数据。有下面的这两个字段,则可以通过验证(2)获取卖座官网的信息,并将电影名显示到Nowplaying.vue的列表中axios中获取的数据放到res中,下面显示的是res.data中的数据(2.1)axios请求数据(2.2) 显示数据(2.3) Nowplaying.vue&..原创 2021-03-16 20:57:04 · 141 阅读 · 0 评论 -
二十八、进阶之history模式及路由守卫
一、history模式通过在router/index.js中添加mode:'history'可以取消路径中的#风险:但是后端需要进行文件配置,不然会出现404的错位二、路由守卫类似于淘宝,点击我的,如果没有登陆,会直接跳转到登陆页面,而不会让你访问“我的”控制页面是否能被访问(1)全局守卫(任何路由都会被拦截)类似于,进入校门之前,所有人都被拦截,要测体温,出示健康码等等。。通过后才可进入例如:对上一节中的例子添加全局守卫(router/index.js)\原创 2021-03-16 19:48:25 · 473 阅读 · 0 评论 -
二十七、动态路由及命名路由
路径中的信息是变化,下图中就是动态路由(:myid不是定值,是传过来的值)一、动态路由例子:实现以下功能比如:点击111时(Detail组件与Film是同级组件)(1)首先,在Film的子组件Nowplaying中添加列表(2)点击Nowplaying中的列表,进行页面跳转(跳转到Detail组件)(3)router/index.js文件中对detail路径进行配置(4)创建detail组件补充:通过这行代码,可以获取相应的信息,从而可以.原创 2021-03-16 16:18:17 · 242 阅读 · 0 评论 -
二十六、进阶之二级路由
(1)二级路由的解释#后,前面的一个路径不变,后面的路径在变化(2)访问Film的两个子组件Nowplaying和Comingsoon在二十四和二十五节的基础上(2.1)首先在views/Films下创建子组件Nowplaying和Comingsoon(2.2)在Film组件中插入子组件在router/index.js中会创建Film组件的两个孩子路径,(2.3)在router/index.js中创建Film组件的两个孩子路径(2.4)效果图.原创 2021-03-16 15:07:38 · 135 阅读 · 0 评论 -
二十五、进阶之路由声明式导航(router-link)
在二十四的基础上,实现下面页面(与此节不同,二十四节中,每次都需要在地址栏修改)通过点击按钮(film、cinema 或 center),来切换到相应的页面级组件(此时地址栏发生变化)并且点击时有高亮效果,刚进入该页面时,默认选中的按钮,也是高亮效果(1)首先在App.vue中引入组件tabbar,用以显示导航栏(2)在components文件夹下,创建组件文件Tabbar.vue主要用到组件router-link(3)效果图初始情况(film为高亮灰色,显示原创 2021-03-16 14:10:51 · 115 阅读 · 0 评论 -
二十四、进阶之一级路由配置
单个页面也可能有多个路径,路由进行路径之间关系的管理(1)vue-router的下载(创建项目时,已经下载)(2)router的环境配置(已有router/index.js配置文件,只需进行修改)(2.1)创建相关的组件(在router/index.js中使用)注意:页面级的组件、当前页面唯一使用的组件放在views文件夹下; 共享的组件放在components文件夹下因此在views下创建(2)中的三个组件(页面级组件)(2.2)引入上述的...原创 2021-03-16 13:15:56 · 229 阅读 · 0 评论 -
二十三、进阶之反向代理配置(异步通信)
注意:修改配置文件时,一定要重启服务器本文示例:获取猫眼电影网站的数据(异步通信)(1)使用axios,需要下载相应的库axios是前后端通信的桥梁在创建的项目路径下,执行(下载axios库):npm install --save axiosaxios安装成功(2)在App.vue引入axios,并进行ajax请求,将获取到的该网站的信息显示到控制台 //(1)引入axios import axios from 'axios'//(2)进行ajax请求,将获原创 2021-03-16 10:06:39 · 114 阅读 · 0 评论 -
二十二、进阶之eslint(自动修复错误)及 打包(上线项目)
(1)eslint(错误修复)执行下面代码,会自动修复错误npm run lint(2)打包(以上线项目)执行下面代码,自动将项目打包到dist文件夹(只需将dist文件夹交给后端就可以)npm run build打包成功生成dist文件夹其中的html和js文件均在一行显示...原创 2021-03-16 08:23:36 · 587 阅读 · 0 评论 -
二十一、进阶之多个“单文件组件”
(1)创建两个单文件组件:navbar 和sidebar对于单文件组件,需要提前定义在components文件夹下,并且每个组件占用一个文件Navbar.vue文件Sidebar.vue文件(2)在App.vue中引入两个单文件组件:navbar 和sidebar引入组件文件定义全局组件 或 局部组件1.全局组件2.局部组件(3)实现显示或隐藏的功能1.template部分2.script部分3.css部分...原创 2021-03-15 22:54:56 · 180 阅读 · 0 评论 -
二十、进阶之单文件组件
(1)创建的cch项目中的main.js文件和index.html(2)定义单文件组件(包含三部分)(2.1)问题1运行报错:x errors potentially fixable with the `--fix` option解决方案:在.eslintrc.js文件中找到’@vue/standard’配置将其删除或注释。然后重新启动(2.2)相关命令(1) npm run serve 开发环境构建(2) npm run build 生产环境构建(3)原创 2021-03-15 21:46:05 · 97 阅读 · 0 评论 -
十九、VSCode、Node.js安装配置、vue脚手架安装、Git
一、Node.js的安装(1)官网下载相应的版本(https://nodejs.org/zh-cn/download/)(2)傻瓜式安装,一路Next(建议安装目录换到其它盘:F:\nodejs)(3)安装成功二、Node.js的环境变量配置在通过npm安装vue或webpack的时候,node.js默认安装在路径C:\Users\用户名\AppData\Roaming下,为了不占用C盘空间,并且C盘出现系统禁止脚本运行的情况(装vue脚手架时可能报错),所以强烈建议将路径.原创 2021-03-15 15:10:03 · 2954 阅读 · 1 评论 -
十八、彻底卸载node.js
(1)在程序和功能卸载node.js(2)重新启动电脑(3)寻找这些文件夹并删除:C:\Program Files (x86)\NodejsC:\Program Files\NodejsC:\Users\{User}\AppData\Roaming\npm(或%appdata%\npm)C:\Users\{User}\AppData\Roaming\npm-cache(或%appdata%\npm-cache)c:\Users{账户}\下的.npmrc文件(例如:C:\Us.原创 2021-03-15 12:48:32 · 3849 阅读 · 0 评论 -
十七、vue进阶之单文件组件介绍(一个文件只写一个组件)和脚手架安装及项目创建!
单文件组件的后缀为.vue(1)单文件组件的结构:(2)下载脚手架(Vue CLI)-->脚手架会配置webpack-->webpack对文件组件进行预处理(翻译vue文件到html文件)原创 2021-03-15 09:51:47 · 329 阅读 · 1 评论 -
十六、vue进阶之轮播指令
(1)轮播指令的使用(2)轮播指令的创建(3)数据获取原创 2021-03-14 22:37:49 · 92 阅读 · 0 评论