VUE2.0学习随笔
关注
分享
扫一扫
文章平均质量分 63
主要是记录VUE2.0学习过程中的心得
一方通行00
只想做简洁，清晰明了的分享内容
展开
-
VUE项目学习笔记：页面无法铺满整个屏幕
VUE初始项目页面整体无法铺满整个屏幕1、出现的问题在VUE初始项目运行后，页面整体无法铺满整个屏幕，如下图所示2、出现问题的原因和解决（1）主要是因为vue-cli脚手架搭建的vue项目中的App.vue作为页面的核心，存在默认设定样式间隔，造成无法顶格显示解决办法：删除这段样式代码即可。（2）删除完成之后发现，页面还是无法铺满整个屏幕，如下图所示：解决办法：重新设定App.vue的间隔样式，如下图所示：3、解决完成之后的效果：4、整个App.vue文件的代码<templ原创 2021-01-12 14:58:52 · 14749 阅读 · 4 评论 -
VUE项目学习笔记：关闭代码检查
VUE项目关闭代码检查进入vue项目根目录中，选择config，打开index.js，搜索Eslint，更改useEslint值为false，如下图所示：原创 2020-12-31 09:52:16 · 9336 阅读 · 0 评论 -
VUE3.0学习系列随笔（五）：自定义组件使用
VUE3.0学习系列随笔（五）：自定义组件使用VUE2.0和VUE3.0虽然在工程目录结构上存在较大差异，但是具体的代码实现逻辑相同，本文所使用的自定义组件方法，同样适用于VUE2.0。1、无参子组件的自定义和调用（1）定义无参子组件自定义组件已办存放在VUE工程结构的component文件夹下，新建自定义组件的方式和新建普通vue文件一样，整个VUE代码结构，本文自定义head组件，主要是作为页面的顶部div使用，代码如下：<template> <div class="he原创 2021-01-25 16:56:18 · 10633 阅读 · 1 评论 -
VUE项目学习（八）：引用axios进行后端接口请求
VUE项目学习（八）：引用axios进行后端接口请求axios是一个基于 promise 的 HTTP 库，是vue中比较常用的后端接口请求方法。演示效果为：1、引入axios包（1）执行命令，在vue项目中安装axiosnpm install axios --save安装完成结果图为：（2）在main.js中添加以下代码，全局引入axiosimport axios from 'axios'Vue.prototype.$axios = axios（3）在具体的vue文件中，直接原创 2021-01-15 18:02:35 · 7019 阅读 · 0 评论 -
VUE项目学习（七）：引用element-ui和进行简单页面布局
VUE项目学习（七）：引用element-ui和进行简单页面布局1、element-ui介绍Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，目前广泛应用于vue应用之中 。本文使用的vue项目的GItHub地址为：https://github.com/CoderPlayer0/CsdnVue.git2、页面布局效果3、引入element-ui（1）在vue项目中安装element-ui，命令为：npm i element-ui -S安装完成之后为：原创 2021-01-15 11:49:31 · 10934 阅读 · 1 评论 -
VUE项目学习（六）：自定义间隔进度条
VUE项目学习（六）：自定义间隔进度条网上有很多种进度条，但是我没找到这种间隔进度条，索性自己弄一个1、进度条演示：2、VUE代码template代码：<div class="progressbar"> <div class="title"> <span>自定义进度条:</span> </div> <div class="progress"> <div class="g原创 2021-01-12 20:21:59 · 8286 阅读 · 2 评论 -
VUE项目学习系列博文
VUE项目学习系列博文VUE项目学习（1）VUE项目学习（一）：搭建VUE前端项目（2）VUE项目学习（二）：学习项目文件结构（3）VUE项目学习（三）：win10版nginx部署vue项目（4）VUE项目学习（四）：编写个人页面和配置路由（5）VUE项目学习（五）：引用echarts组件VUE项目学习笔记（1）VUE项目学习笔记：关闭代码检查（2）VUE项目学习笔记：页面无法铺满整个屏幕VUE项目代码持续更新整个项目所在的GitHub地址：https://github.com/Cod原创 2021-01-12 16:06:14 · 7056 阅读 · 0 评论 -
VUE项目学习（五）：引用echarts组件
vue项目创建简单echarts图表演示效果图：1、在vue项目中导入echarts（1）在Hbuilder中打开项目终端的方式如下：（2）在vue项目终端中，输入以下命令，下载和安装echarts组件npm install echarts --save下载成功效果为：2、在vue中引入echarts（1）因为是只在局部使用echarts，因此只在单个vue文件中引用。import * as echarts from 'echarts'（2）定义一个固定大小的div作为echa原创 2021-01-11 15:30:18 · 9598 阅读 · 4 评论 -
VUE项目学习（四）：编写个人页面和配置路由
VUE项目配置路由准备工作先配置好node.js开发环境，并使用VUE-Cli下载好VUE项目，具体流程可以参考博客https://blog.youkuaiyun.com/qq_26666947/article/details/111929871本文使用HBuilderX作为VUE项目开发工具，也可以使用VSCode工具。删除初始VUE项目的Logo...原创 2021-01-11 10:44:37 · 8113 阅读 · 1 评论 -
VUE项目学习（三）：win10版nginx部署vue项目
win10 nginx部署vue项目niginx的安装和启停操作参照博客：https://blog.youkuaiyun.com/qq_26666947/article/details/1122720581、打包vue项目（1）在前端编译工具的终端界面中，使用命令：npm run build，对vue项目进行打包，如下图所示。（2）打包完成之后，vue项目中会生成一个dist文件夹，里面放置打包完成的前端项目dist文件夹中的内容为：2、编辑配置文件（1）在nginx的根目录下，点击conf文件夹，原创 2021-01-08 11:05:12 · 8937 阅读 · 0 评论 -
VUE项目学习（二）：学习项目文件结构
VUE项目中文件介绍VUE项目结构：index.html：主页，项目入口App.vue：根组件main.js：入口文件router文件夹下的index.js：路由配置文件当点开浏览器访问项目，最先访问的是index.html， 上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上。 <body> <div id="app"></div> </body>main.js作为项目的入口文件，在main.js中原创 2020-12-31 11:30:01 · 7408 阅读 · 0 评论 -
VUE项目学习（一）：搭建VUE前端项目
新手搭建VUE前端项目1、安装node.js环境（1）下载node.js，下载地址为：https://nodejs.org/en/（2）按照默认选项安装node，检查安装版本（3）配置下载镜像，镜像地址为：http://npm.taobao.org/，安装成功后，可以直接使用cnpm代替npm命令npm install -g cnpm –registry=https://registry.npm.taobao.org检查cnpm是否安装成功2、搭建vue项目（1）全局安装VUE脚手架v原创 2020-12-29 17:12:19 · 7668 阅读 · 0 评论