【在vue项目当中使用sass】教程文章相关的互联网学习教程文章

在阿里云服务器上部署Spring Boot + Vue项目

一、安装mysql 1.1 安装 1.1.1 下载并安装mysql的YUM源 (1)下载mysql的YUM源 wget -P /home/lisonglin http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 安装mysql的YUM源 rpm -ivh mysql57-community-release-el7-11.noarch.rpm 检查mysql的YUM源是否安装成功 yum repolist enabled | grep "mysql.-community." 查看当前启用的 mysql版本 yum repolist enabled | grep mysql 1.1.2 安装MySQL ...

ant design vue项目实战

一、要求vue-cli版本3.0以上,首先升级至3.0以上,然后vue create antd-demo即可 二、项目发布,使用npm run build打包,router去掉history模式,自建vue.config.js文件,设置如下规则:publicPath:??'./',?//?默认'/',部署应用包时的基本?URL outputDir:?'dist', assetsDir:?'',?//?相对于outputDir的静态资源(js、css、img、fonts)目录 productionSourceMap:false,??//不生成map?source文件

vue项目的package.json配置详解【代码】

{ "name": "vue-manage", // 项目名称 "version": "1.0.0", // 版本 "description": "Reimbursement Manage", // 描述 "author": "LXG", // 作者 "private": true, //是否私人项目 "scripts": { "dev": "node build/dev-server.js", // npm run dev 的 dev,使用node执行 build/dev-server.js "start": "node build/dev-server.js", // npm run start 跑的是同样的命令 "build": "node build/build.js", // npm run build 跑的...

vue项目中使用 vant 组件无法修改css样式【代码】

原因:当 style 标签里有scoped属性时,在scoped作用域组件样式中,默认只能在作用在组件的根节点,如果需要影响其后代元素,需要使用深度选择器 深度选择器// 深度选择器 : /deep/ ::v-deep >>> 最后一个只作用于css/deep/ .van-nav-bar__title {max-width: unset;.search-btn {width: 555px;height: 64px;background-color: #5babfb;.van-icon {font-size: 32px;color: #fff;}.text {font-size: 28px;}}}

vue项目打包后,favorite.icon不见了【代码】【图】

问题描述:本地开发环境测试时,favorite.icon正常显示,部署其它环境,vue前端项目打包(npm run build)后,favorite.icon不显示了,成了一个这样的标识,控制台打印了Failed to load resource: the server responded with a status of 404 (Not Found) favorite.ico:1 查看vue构建后index.html,里面引用见下图 解决: npm run build 后,把favicon.ico放到了index.html同级目录,dist目录下,注意呀,不是static目录下 把fa...

使用命令创建 VUE 项目【图】

第一步:检查 vue/cli 的版本 只有当 vue/cli 的版本高于 4.0 才可以使用命令创建 vue 项目 第二步 使用 vue create 项目名 创建项目 项目名不能包含大写字母,否则会创建失败 第三步:选择默认配置还是手动配置 选项一:默认配置选项二:手动配置 (选择了手动配置) 第四步:根据项目需求选择配置项 空格:选中或取消a:全选或全取消上下箭头:移动到某一项回车:进入下一步 (选择了1、4、5、6、7)Babel:Babel 编译器,可...

vue项目中videoPlayer 的 src 视频地址参数动态修改---方法【代码】

方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单。 this.playerOptions[‘sources‘][0][‘src‘] 就是这一步解决提取src问题,主要部分用*号框起来了。 playerOptions 参数是一个字典对吧!修改字典中的值怎么做不用多说吧直接赋值就好了,下面方法 的重点就是取出src参数进行赋值。 你们视频的url从数据库通过动态获取过来的时候,直接赋值给这个字典中的src就行了,赋值方法:this.playerOptions[‘sources...

vue项目修改页面title【代码】【图】

方法一:在根目录下,找到vue.config.js,添加如下属性// vue.config.js module.exports = {// 设置打包路径publicPath: './',// 设置页面titlechainWebpack: config => {

Vue项目如何引入JQuery详细步骤【代码】【图】

用vue-cli脚手架工具构建项目成功后 如果需要引入JQ,步骤如下: 1、在Jquery官网下载:https://jquery.com/download/ 2、首先在项目中找到在package.json文件,在package.json里做如下操作: 注意:看自己下载的版本号来写!3、在终端里输入npm install jquery –save-dev 也可以是cnpm install jquery –save-dev 注意:jquery 一定要小写 不然会提示 Please use ‘jquery’ (all lowercase)! 4、(1)在项目中找到 build文件夹下...

VUE项目引入微信JSSDK 实现微信自定义分享【代码】

VUE项目引入微信JSSDK 实现自定义分享 前端vue、后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致 一、微信公众号后台添加 js安全域名(白名单) 二、(前端) VUE引入微信JSSDK 1、yarn add weixin-js-sdk或者npm install weixin-js-sdk --save-dev 2、封装wx分享功能 在asset中新建wx.js import axios from "axios"; import wx from 'weixin-js-sdk'; //初始化微信sdk const wxShowMenu = shareData =>...

vue项目落地(qiankun.js)微前端服务‘【代码】

什么是微前端? 网上抄的: 微前端是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发.我的理解: 微服务就像是一个操作系统:在其中可以运行多个app。但每个app呢,又可以脱离操作系统独立运行。为什么选择qiankun.js | qiankun.js优点 大白话: 就目前市...

vue项目(通用方法+axios自定义+http请求统一管理绑定+vue.config.js别名alias配置)【代码】

目录 1、vue.config.js别名配置与使用 2、通用方法全局使用(自定义插件) 3、axios自定义 4、http请求统一管理绑定1、vue.config.js别名配置与使用新建vue-cli3项目中默认是没有vue.config.js,自己在根目录新建。项目默认会定义 @ 代表 src目录下面是个人项目中部分配置,还包括svg使用类名与组件引入类似于element-ui的icon引入设置,文件压缩等配置,可以参照vue-admin-template,后面项目空了再发一下一下配置,包括npm包与组件...

Vue项目 实现一键复制功能【代码】

方法一:使用 v-clipboard 使用步骤: 1.安装依赖 npm install --save v-clipboard2.在main.js中引入 import Vue from 'vue' import Clipboard from 'v-clipboard'Vue.use(Clipboard)3.使用 <template><el-buttontype="text"v-clipboard:copy="copyRowData"v-clipboard:success="clipboardSuccessHandler"v-clipboard:error="clipboardErrorHandler">复制</el-button> </template>export default {data() {return {copyRowData:''}...

vue项目中高德地图的注册及使用【代码】【图】

1.创建应用 点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证。 注册完毕之后,点击右上角的控制台 点击右上角的创建应用 创建好之后我们点击添加,我们以web端为例。选择之后提交。 2.地图使用 打开使用文档 接下来在vue项目中导入高德地图。 文档地址:https://developer.amap.com/api/javascript-api/guide/abc/quickstart 创建第一个地图: //第一步 使用异步导入js文...