Vue
文章平均质量分 51
书和咖啡
学习python的小侠客
展开
-
Vue CLI 建立目标
运行 vue-cli-service build 时,可以通过 --target 选项指定不同的生成目标,这允许我们使用相同的代码基为不同的用例生成不同的构建。我们主要从下面几个方面进行认识和了解:应用程序应用程序是默认生成目标,在此模式下:带资产和资源提示注入的 index.html供应商库被分割成一个单独的块以获得更好的缓存4kb以下的静态资产内联到JavaScript中`public 中的静态资产被复制到输出目录中Vue与JS/TS条目文件使用 .vue 文件作为原创 2021-10-10 22:48:48 · 696 阅读 · 0 评论 -
vue 和 vue-cli 的区别和关联
基本概念vue:是一套框架,用于构建用户界面的渐进式框架。Vue-cli: 而vue-cli 是一个基于 Vue.js进行快速开发的完整系统。Vuevue主要是从基础知识、组件的了解、动画的过渡、可复用性和组合以及工具、模块化的管理。Vue-clivue-cli 主要是从搭建交互式脚手架、零配置原型开发、基于webpack构建并进行配置、插件和Preset的扩展以及图形化的创建和Vue.js项目的用户界面管理等。区别和关联区别:vue是一整套框架,而vue-cli只是它其中的一个脚手架原创 2021-09-30 23:46:59 · 2530 阅读 · 1 评论 -
Vue CLI 使用网页包
关于使用 webpack 的配置,我们可以从以下几个方面来进行了解与认识:简单配置调整webpack配置的最简单方法是为 configureWebpack 选项提供对象vue.config.js:module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }}修改加载程序的选项添加一个新的加载器检测项目的webpack配置输出重定向到配置好的文件中便于检查:vue原创 2021-09-27 22:45:46 · 120 阅读 · 0 评论 -
Vue CLI 使用CSS
Vue CLI项目支持postss、CSS模块和预处理器,包括Sass、Less和 Stylus。我们可以从下面几个方面来了解与认识:引用资产所有编译的CSS都由 css-loader 处理,它解析了 url() 并将它们解析为模块请求,也就意味着我们可以使用基于本地文件结构的相对路径来引用资源。注意:如果要引用npm依赖项内的文件或通过webpack别名引用文件,则路径必须以 ~ 作为前缀,以避免歧义。预处理器创建项目时,可以选择预处理器(Sass/Less/Stylus)。如果没有这样操作的话原创 2021-09-23 21:26:54 · 814 阅读 · 0 评论 -
Vue CLI HTML和静态资产
HTMLHTML 可以从以下几个方面进行了解:索引文件文件 public/index.html 是一个模板,将使用 html webpack 插件进行处理,在构建期间,将自动注入资产链接,除此之外,Vue CLI 还可以自动注入资源提示(预加载/预取)、清单/图标链接(使用PWA插件时)以及生成期间生成的JavaScript和CSS 文件的资产链接。插值由于索引文件用作模板,因此可以使用lodash模板语法在其中插入值:<%=VALUE%> 用于非缩放插值;<%-VA原创 2021-09-17 23:16:16 · 404 阅读 · 0 评论 -
Vue CLI 浏览器兼容性
浏览器兼容性关于浏览器的兼容我们可以从下面一些内容来了解与认识:Vue CLI 3初始化的项目,你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。我们通常只需要修改browserslist就可兼容目标浏览器:"browsersli原创 2021-09-15 22:57:21 · 809 阅读 · 0 评论 -
CLI 服务
使用二进制在Vue CLI项目中,@vue/cli-service 安装一个名为 vue-cli-service的二进制文件。我们可以直接以 npm 脚本中的 vue cli 服务或终端中的./node_modules/.bin/vue cli 服务的形式访问二进制文件。在使用默认预设的项目的package.json中:{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build"原创 2021-09-13 22:10:28 · 302 阅读 · 0 评论 -
Vue CLI 插件 Plugins
插件PluginsVUE CLI 是使用是基于插件的体系结构的。如果检查新创建的项目的 package.json ,我们将发现以 @vue/cli-plugin- 开头的依赖项。插件可以修改内部webpack配置并将命令注入vue cli 服务,同时在项目创建的过程中列出的大多数特性都是作为插件实现的。基于插件的体系结构它使得VUE CLI 也更具有灵活性和可扩展性。在现有项目中安装插件每个CLI插件都附带有一个生成器(用于创建文件)和一个运行时插件(用于调整核心webpack配置并注入命令)。当原创 2021-09-08 22:50:11 · 2032 阅读 · 0 评论 -
Vue CLI 配置
简单配置在package.json 文件同项目下创建新的 js 文件(vue.config.js),然后在src文件下新建pages文件夹:文件夹下面的每一个都是单独的页面,然后有不同的 html,js,vue。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uGYWLtRX-1630853139332)(img/pz_2.png)]index.html:<!DOCTYPE html><html lang="en"><head&g原创 2021-09-05 22:46:08 · 353 阅读 · 2 评论 -
Vue CLI创建第一个项目
创建第一个项目安装完vue-cli3 之后,我们需要创建一个项目,它与之前的版本创建命令是不同的:// 这是vue-cli3的创建vue create project-vue-cli// 这是vue-cli2的创建vue init webpack project-vue-cli创建项目时会有一些选项,根据需求,我们要注意的是如果不是很熟悉,那么我们就不要开启语法检查,只要等待文件下载完毕就好了。创建项目对应选项:default (babel, eslint) 默认选项,包含babel和原创 2021-09-02 23:11:51 · 115 阅读 · 0 评论 -
Node 下载安装
下载Node下载地址:https://nodejs.org/zh-cn/download/,选择需要的版本下载。安装下载完成之后,进行安装,步骤如下:下载好直接点击运行链接下一步,左下角有一个安装协议(勾选)下一步,默认安装目录,当然我们也可以修改选择我们自己合适的路径下一步,如下所示,我们可以选择我们需要安装的模式,默认是第一个下一步[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-egMc0Bd9-16302496763原创 2021-08-29 23:09:18 · 119 阅读 · 0 评论 -
安装 vue-cli
安装安装node环境版本要求:vue-cli 需要8.9或者是更高的版本。官网下载:https://nodejs.org/zh-cn/download/下载之后根据提示进行步骤安装,然后下面是安装好之后的检查是否存在以及版本号// 查看版本信息node -v安装npm环境(一般会随着node安装后自带上)// 安装npm install npm -g// 查看版本信息npm -v安装 vue-cli 环境使用下面两者之一安装新的包npm install -g @vue/原创 2021-08-27 22:39:09 · 812 阅读 · 0 评论 -
vue-cli3 知识点
介绍vue-cli通过 @vue/cli 搭建交互式的项目脚手架通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发一个运行时依赖(@vue/cli-service)一个丰富的官方插件集合,集成了前端生态中最好的工具一套完整图形化的创建和管理 Vue.js 项目的用户界面CLICLI(@vue/cli):一个全局安装的 npm 包(提供vue命令)vue create:快速创建一个新项目的脚手架vue serve:构建新想法的原型原创 2021-08-24 22:49:43 · 544 阅读 · 0 评论 -
Vue路由的配置
Vue 路由的配置什么是路由Vue 路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉 Vue 我们在哪里渲染它们。路由其实就是我们浏览器的一个地址。Vue 路由的优缺点路由的优点:用户体验好,不需要每次都从服务器全部获取,快速展现给用户。路由的缺点:不利于 SEO。使用浏览器的前进,后退键的时候会重新发送请求,没有合理利用缓存。单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置。当我们加载一个程序时,原创 2020-12-14 12:02:01 · 158 阅读 · 0 评论 -
Vue与服务端通讯
Vue.js 本身没有提供与服务端通讯的接口,但是通过插件的形式实现了基于 Ajax、Jsonp 等技术的服务端通讯。与服务器通讯目前与服务器通讯的主流方法:Ajax:在无刷新网页的情况下实现数据的更新,它用起来很方便快捷,但是有一个缺点是在使用时我们需要引入一个 JQuery,引进来之后我们实际上只用了它里面的一个方法,但是却导致引入了两个库,jQuery 太大,因此很少使用。axios,适用于在 ES5 和 ES6 里面的 promise 出现之后才出现的,它返回一个承诺,易于分离。就是允许我原创 2020-12-09 10:58:14 · 470 阅读 · 0 评论 -
Vue 组件
什么是组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 js 特性进行了扩展的原生 HTML 元素。使用组件的好处:组件是可以复用性的。易于维护。有封装性,易于使用。大型项目中降低组件之间重复性。注册及使用组件注册就是利用 component() 方法,先传入一个自定义组件的名字,然后传入这个组件的配置,语法如下所示:原创 2020-12-07 11:03:44 · 66 阅读 · 0 评论 -
Vue 循环渲染
v-for指令的使用在 Vue 中,可以使用 v-for 指令绑定数据到数组来渲染一个列表。使用 v-for 指令需要以 item in items 形式的特殊语法来实现。其中 items 是源数据数组,item是要在其上进行迭代的数组元素的别名:示例:例如假设有一组关于水果的数据,需要使用列表渲染页面,我们可以在 <li> 标签上绑定 v-for 指令:<!DOCTYPE html><html><head><meta charset="原创 2020-12-04 11:15:56 · 1310 阅读 · 1 评论 -
Vue 条件渲染
v-if 指令的使用在Vue中,v-if 指令可以用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。示例:我们来看下面这段代码,有姓名和年龄这两条信息,现要求只显示姓名,而隐藏年龄:<body> <div id="app"> <p v-if="show">显示姓名:小飞侠</p> <p v-if="hide">隐藏年龄:28</p> </原创 2020-12-02 18:22:55 · 274 阅读 · 1 评论 -
Vue 模板语法
模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,Vue 能够智能地计算出最少需要重新渲染多少组件,并把 DOM 操作次数减到最少。文本数据绑定最常见的形式就是两个大括号{{}},大括号中间的内容是data里面的数据,不仅可以是变量还可以是表达式。当绑定的数据对象原创 2020-11-30 11:07:35 · 135 阅读 · 0 评论 -
Vue 生命周期(钩子函数)
什么是生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程,例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。下图是官网中实例的生命周期示例图:beforeCreate:是第一个生命周期函数,表示实例完全被创建出来之前会执行这个函数。在此函数执行时,data和methods中的属性与方法定义都还没有初始化。created:是第一个生命周期函数,在此函数中,d原创 2020-11-27 11:07:53 · 846 阅读 · 0 评论 -
Vue中的methods方法
在 methods 中定义方法我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法:var vm = new Vue({ methods:{ // 在此时定义方法,方法之间使用逗号分隔 方法名:function(){}});示例:例如在 methods 中定义一个名为 show 的方法:methods:{ show: function(){ console.log("显示内容") }}在方法中访问属性在 me原创 2020-11-25 11:03:29 · 70416 阅读 · 7 评论 -
Vue的计算属性和监听属性
Vue 中的计算属性使用计算属性(computed)有一个好处在于它有一个缓存机制,因此它不需要每次都重新计算。当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的 DOM 部分也会同步自动更新。在处理一些复杂逻辑时计算属性是很有用的。在 Vue 中我们可以使用模板语法 {{}} 来展示一些数据,而当在模板中放入太多的逻辑会让模板过重且难以维护。这种情况下,Vue 给我们提供了一个特别好的解决方法,就是使用计算属性。我们可以将一些需要计算的过程写入到一个计算属性中去,然后让它动态的计算就可以了原创 2020-11-23 10:39:07 · 301 阅读 · 0 评论 -
Vue初体验
Vue的引入要使用 Vue,我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件,然后在 HTML 页面中通过 <script> 标签来引入这个文件。下载地址为:https://vuejs.org/js/vue.min.js。引入格式如下所示,其中 path 是文件所在路径:<script src="path/vue.min.js"></script> 或者也可以不下载 vue.min.js 文件,直接引入 Vue 文件地址,例如:<原创 2020-11-18 11:08:50 · 294 阅读 · 0 评论 -
认识Vue
什么是 VueVue.js 是一套用于构建用户界面的渐进式 JavaScript 框架,也是一个创建单页应用的 Web 应用框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还非常容易与第三方库或既有项目整合。相对于 Angular 来说,Vue 更加灵活,它可以让你以期望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则。且它仅是一个视图层,所以你可以将它嵌入一个现有页面,而不一定要做成一个庞大的单页应用。Vue有什原创 2020-11-16 10:35:23 · 198 阅读 · 0 评论