前端—Vue+TS+ElementUI+Vite
文章平均质量分 65
Vue系列文章
测试开发abbey
高级测试工程师,2年C语言开发,4年服务端测开,擅长服务端测试、音视频测试
展开
-
vue页面背景颜色修改
由于vue的单页面应用导致我们的项目只有一个index.html文件,然而我们若想改变页面的背景色美酒必须动态改变body的背景色才是最直观最有效的解决方案。废话不多说直接上代码,亲测百分之百有效:<template> <div> </div></template> <script>export default { data() { return {}; }, mounted(){}, m原创 2022-05-18 16:59:28 · 6379 阅读 · 0 评论 -
Vue组件的引用
父子组件使用在工程目录/src下创建component文件夹,并在component文件夹下创建一个 firstcomponent.vue并写仿照 App.vue 的格式写一个组件。<template> <div id="firstcomponent"> <h1>I am a title</h1> <a> {{ author }} </a> </div></template>原创 2022-05-18 15:12:13 · 2249 阅读 · 1 评论 -
在Vue中使用Antv G2
1.安装依赖可以通过 npm 添加依赖npm i @antv/g2@3.5.15 @antv/data-set@0.9.6 vue-g2 --save2.引入依赖在 main.js 中写入以下内容:import Vue from 'vue'import 'vue-g2'import App from './App.vue'Vue.config.productionTip = falsenew Vue({ render: h => h(App)}).$moun原创 2022-05-18 14:51:52 · 1484 阅读 · 0 评论 -
Node常见使用
1、 MAC如何降低node版本安装node版本管理模块 nsudo npm install n -g可以根据自己的需要选择安装版本[可选]2.1 安装稳定版sudo n stable2.2 安装最新版sudo n latest2.3 版本降级/升级sudo n 版本号 // 8.16.0 / 12.8.0...原创 2022-02-08 16:58:34 · 164 阅读 · 0 评论 -
vue中@符号表示什么意思?
这和vue没关系。./这是相对路径的意思。@/这是webpack设置的路径别名。这东西在vue标准模板里面的build/webpack.base.conf这个文件里面。resolve: {// 路径别名alias: {'@': resolve('src'),'vue$': 'vue/dist/vue.esm.js'}},就是说@这东西代表着到src这个文件夹的路径...原创 2021-07-01 14:29:09 · 5477 阅读 · 1 评论 -
如何在vue中使用element-ui
vue导入Element-ui框架1.安装命令:cnpm install element-ui --save1出现上图说明安装成功2.在main.js中引入js和cssimport ElementUI from 'element-ui';1import 'element-ui/lib/theme-chalk/index.css'13.让vue引用Element uiVue.use(ElementUI);14这时可以使用element-ui了:那么我们引用一个样式试下原创 2021-06-19 18:49:07 · 4853 阅读 · 0 评论 -
TypeScript—语法简介
基本类型变量声明let和const原创 2021-06-09 14:30:31 · 125 阅读 · 0 评论 -
TypeScript—快速入门
让我们使用TypeScript来创建一个简单的Web应用。安装TypeScript有两种主要的方式来获取TypeScript工具:通过npm(Node.js包管理器) 安装Visual Studio的TypeScript插件Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。 如果你的Visual Studio还没有安装TypeScript,你可以下载它。针对使用npm的用户:> npm install.原创 2021-06-09 11:05:17 · 102 阅读 · 0 评论 -
vue-cli详细教程
都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取消事件。。。。(确实很烦)。vue的官方文档还是不错的,由浅到深,如果不使用构建工具确实用的很爽,但是这在实际项目应用中是不可能的,当用vue-cli构建一个工程的时候,发现官方文档还是不够用,需要熟练掌握es6,而vue的全家桶(vue-cli,vu.原创 2021-06-15 17:34:01 · 532 阅读 · 0 评论 -
Vue—上手实践—环境搭建
原文地址:认识Vue 并安装nodeJS和NPM目录2.Node和NPM2.1.下载Node.js2.2.NPM2.Node和NPM前面说过,NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。2.1.下载Node.js下载地址:https://nodejs.org/en/推荐下载LTS版本。课程中采用的是8.11.3版本。也是目前最新的。大原创 2021-06-08 16:21:14 · 101 阅读 · 0 评论 -
node.js和npm的关系
一、npm是什么当一个网站依赖的js代码越来越多,程序员发现这是一件很麻烦的事情:去 jQuery 官网下载 jQuery去 BootStrap 官网下载 BootStrap去 Underscore 官网下载 Underscore……有些程序员就受不鸟了,于是npm就出来了,全称是 Node Package Manager 包管理工具。这一点和maven、gradle十分相似,只不过maven、gradle是用来管理java jar包的,而npm是用来管理js的。NPM 的实...原创 2021-06-15 11:28:59 · 115 阅读 · 0 评论 -
为什么vue前端项目要使用nodejs
一、传统的JavaScript传统的js是运行在浏览器上的,因为浏览器内核分为两个部分:渲染引擎---渲染HTML和CSS,JavaScript 引擎---负责运行 JavaScript,随着技术的发展, Chrome 使用的 JavaScript 引擎是 V8,它的速度非常快且性能好,同时由2009年5月Ryan Dahl开发的Node.js诞生。二、什么是Node.js?Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使...原创 2021-06-15 13:49:47 · 2805 阅读 · 0 评论 -
什么是webpack?
一、面向过程的前端开发首先,让我们来看一段面向过程的前端开发的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...原创 2021-06-15 11:53:25 · 127 阅读 · 0 评论 -
Vue—相关工具—webpack
原文地址:webpack快速入门8.webpackWebpack 是一个前端资源的打包工具,它可以将js、image、css等资源当成一个模块进行打包。中文官方网站:https://www.webpackjs.com/官网给出的解释:本质上,webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模..原创 2021-06-08 15:50:38 · 103 阅读 · 0 评论 -
Vue—基础概念—路由(vue-router)
原文地址:Vue路由vue-router7.路由vue-router7.1.场景模拟现在我们来实现这样一个功能:一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换:7.1.1.编写父组件为了让接下来的功能比较清晰,我们先新建一个文件夹:src然后新建一个HTML文件,作为入口:index.html然后编写页面的基本结构:<div id="app"> <span>登录</span> <span.原创 2021-06-08 15:38:55 · 234 阅读 · 1 评论 -
Vue—基础概念—组建化
6.组件化在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。6.1.全局组件我们通过Vue的component方法来定义一个全局组件。<div id="app"> <!--使用定义好的全局组件--> <counter></co原创 2021-06-08 15:23:03 · 148 阅读 · 0 评论 -
Vue—基础概念—指令
原文地址:Vue指令5.指令什么是指令?指令 (Directives) 是带有v-前缀的特殊特性。指令特性的预期值是:单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。例如我们在入门案例中的v-on,代表绑定事件。5.1.插值表达式5.1.1.花括号格式:{{表达式}}说明:该表达式支持JS语法,可以调用js内置函数(必须有返回值) 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不...原创 2021-06-08 11:22:46 · 215 阅读 · 0 评论 -
Vue—基础概念—实例
原文地址:Vue实例1、创建Vue实例每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的:var vm = new Vue({ // 选项})在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:el data methods等等,接下来我们一 一介绍。2、模板或元素每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。例如一段html模板:<div id...原创 2021-06-08 11:03:18 · 332 阅读 · 3 评论 -
什么是单页面应用程序
原文:Vue系列(1):单页面应用程序前言:关于页面上的知识点,如有侵权,请看这里。关键词:SPA、单个 HTML 文件、全靠 JS 操作、VirtualDOM、hash/history api 路由跳转、ajax 响应、按需加载、MVVMSPA我们先来看一下在百科上面的解释吧,emmmm,一般呢,我每次搜索一些不懂的词,都会习惯先去看百科里面的解释,反正我从来都不奢望能看懂,只是指望有个大概的框架的,哈哈~“单页面应用(SPA:single-page application...原创 2021-06-08 10:37:26 · 2129 阅读 · 0 评论 -
Vue学习路线图!
如果你是 Vue 开发新手,可能已经听过很多行话术语,比如单页面应用程序、异步组件、服务器端渲染,等等。你可能还听说过与Vue.js 生态系统有关的,包括 Vue 核心库、Vue Router 和 Vuex。一口气吃不成胖子,试图一下子学习所有东西可能是徒劳的,所以我将在这篇文章中展示一个高级“知识地图”,它包含了与 Vue 开发相关的关键领域。0. JavaScript 和基本的 Web 开发如果我要你学习中文书籍中所写的内容,你首先要学会中文,对吧?同样,Vue 是一个...原创 2021-06-07 20:32:53 · 1946 阅读 · 0 评论 -
JavaScript常见面试题和答案
原文地址:https://www.yisu.com/zixun/117910.html这篇文章将为大家详细讲解有关JavaScript常见面试题和答案,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。问题1:Java和JavaScript有什么不同Java JavaScript Java是一种OOP编程语言。 JavaScript是一种OOP脚本语言。 它创建在虚拟机或浏览器中运行的应用程序。 代码在浏览器或node环境上运行。 .原创 2021-06-07 21:04:16 · 1133 阅读 · 0 评论 -
CSS快速入门
简单介绍原创 2021-06-14 12:10:06 · 84 阅读 · 0 评论 -
HTML快速入门
网页基本信息网页基本标签 ...原创 2021-06-12 15:15:16 · 120 阅读 · 2 评论 -
Web开发学习路线图
以下路线图主要展示了成为前端开发者、后端开发者或运维开发者的技术学习路线。前端学习路线图主要还是掌握好 HTML、CSS、JavaScript。框架太多不需要多去了解,学习一两个即可,可以多关注 Vue。后端学习路线图后端技术还是倾向于 PHP 和 Python。运维开发学习路线图学好 Linux、Nginx、MySql、Docker。关注各大云服务商,简化的运维成本。...原创 2021-06-07 20:39:33 · 810 阅读 · 4 评论