【VUE项目搭建】教程文章相关的互联网学习教程文章

VUE项目搭建

vue init webpack +项目名称 //建立项目npm install @jiaminghi/data-view //引入datavmain.js中 // 将自动注册所有组件为全局组件 import dataV from ‘@jiaminghi/data-view‘ Vue.use(dataV)npm install --save axios vue-axios //引入axiosmain.js中 import axios from ‘axios   import VueAxios from ‘vue-axios Vue.prototype.$axios = axio Vue.use(VueAx...

Vue项目中使用可视化图表echarts【代码】

app.title = ‘环形图‘;option = {tooltip: {trigger: ‘item‘,formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: ‘vertical‘,x: ‘left‘,data:[‘直接访问‘,‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘搜索引擎‘]},series: [{name:‘访问来源‘,type:‘pie‘,radius: [‘50%‘, ‘70%‘],avoidLabelOverlap: false,label: {normal: {show: false,position: ‘center‘},emphasis: {show: true,textStyle: {fontSiz...

vue项目中的一些问题【代码】

1、切换路由时根路由一直处于被激活状态  解决办法: 加exact属性 <router-link to="/home" exact>首页</router-link> 如果需要进去首页默认选中home,需要配置路由重定向{path: ‘/‘,redirect: ‘/home‘ }2、改变了vuex里面的数据以后视图没有及时更新  解决办法:如果这个数据是需要{{}}在行内渲染的,不要存储在data的一个变量中进行使用,应该这么写<dt>{{this.$store.state.homedataStore.cityinfo.name}}·初中 <i>基...

vue 项目获取QQ音乐歌单数据【代码】

1. 前端请求(recommend.js);import axios from ‘axios‘export function getDiscList() {const url = ‘/api/getDiscList‘const data = Object.assign({}, commonParams, {platform: ‘yqq‘,hostUin: 0,sin: 0,ein: 29,sortId: 5,needNewCode: 0,categoryId: 10000000,rnd: Math.random(),format: ‘json‘})return axios.get(url, {params: data}).then((res) => {return Promise.resolve(res.data)}) } 2. 手动代理请求(...

安装(c)npm及搭建Vue项目详解【代码】【图】

【安装步骤】一、安装node.js(node-v12.16.1-x64.msi)1.前往node.js官网下载并安装工具,这里安装路径选到D盘,D:\Program Files\nodejs 安装完毕后在命令行输入以下命令测试是否安装成功,正确会出现版本号npm -v2.改变原有的环境变量, (1)配置npm的全局模块的存放路径以及cache的路径,例如两个文件夹放在NodeJS的主目录下,便在NodeJs下建立"node_global"及"node_cache"两个文件夹,输入以下命令改变npm配置npm config set ...

解决vue项目中使用/deep/报错

方法:降低sass-loader版本1.卸载当前项目中的sass-loadernpm uninstall sass-loader2.安装低版本sass-loadernpm install sass-loader@7.0.03.安装node-sassnpm install node-sass安装node-sass是因为安装低版本sass-loader需要引入node-sass依赖来支持,不然会报错 原文:https://www.cnblogs.com/xiaobaibubai/p/14776828.html

vue 项目碰到的问题

易车三期的项目,碰到的vue问题,暂时记录一下。  1、跨vue组件的方法调用  2、路由的跳转,带参数的(例如ID)跳转不到其他的页面  3、js文件的导出和引入,在一个vue文件中调用js文件的方法,此行为可以抽取公共的函数。  4、provide、inject 方法调用跨vue组件的methods中的方法  5、组件部分的引入,使用原文:https://www.cnblogs.com/smile-fanyin/p/12347998.html

vue项目中实现手势密码【代码】【图】

本来是写在一个页面中的,但后来一想创建和登录的时候都得用,干脆就写成组件吧。自知写的很差,还望各位大佬指教一二父组件中不传值的话就默认是创建手势密码(创建时密码长度不能小于4),需要输入两次,两次密码必须一致如果是登录,父组件就把密码传给子组件,子组件就会根据密码判断当前输入是否正确,具体执行时请看控制台演示:父组件未传值,此时是创建手势密码 登录时,父组件穿的值为<gestureUnlock :fatherPassword=...

react和vue项目快速搭建

react项目快速搭建  1.安装node环境:    下载地址:https://nodejs.org/zh-cn/download/  2.打开终端  3.安装yarn或者cnpm, 这里以cnpm 为例,输入命令行:    npm install cnpm -g --registry=http://registry.npm.taobao.org  4.安装create-react-app,输入命令行:    cnpm install -g create-react-app    说明:这里安装在全局中,安装一次就可以了。  5.创建react项目,输入命令行:    create...

vue项目目录介绍【代码】

尽管vue-cli已经优化了好多配置和目录机构,但是下面的介绍还是有用的。buildwebpack 配置相关configwebpack 配置相关src源码static第三方静态资源.gitkeepgit默认不提交空目录 放在空目录中,可以使git提交的时候,提交该目录。.babelrcbabel的配置,es6代码通过babel编译成es5. presets预设,表示预先要安装哪些插件; plugins,表示要安装的插件,这些插件很有可能互相依赖.editorconfig编辑器的配置相关.eslintignore忽略语法检...

Vue项目中的跨域问题(开发环境、生产环境)【代码】【图】

刚工作两个月,公司项目的代码还没接触明白,今天偶然看到了前端项目中vue.config.js对于后台接口的配置 devServer: {port: port,open: false,overlay: {warnings: false,errors: true},proxy: {[process.env.VUE_APP_BASE_API]: {target: `http://localhost:8080/ShaoxingBackend/`,changeOrigin: true,pathRewrite: {[‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘}}}// after: require(‘./mock/mock-server.js‘)},proxy应该是...

使用vue-cli搭建vue项目问题解决方案【图】

工欲善其事必先利其器,安装所需环境node和npm的安装 首先需要安装node环境,直接到官网下载安装包 https://nodejs.org/zh-cn/ 安装node默认安装npm, 不需要重复安装npm。安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。下载dev-tool工具 为了以后调式做准备 https://github.com/vuejs/vue-devtools#vue-devtools安装全局vue-cli脚手架 npm install -g vue-cli 出现如下问题: npm ins...

基于Idea从零搭建一个最简单的vue项目【图】

一、需要了解的基本知识node.jsNode.js是一个Javascript运行环境(runtime),发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化,提供替代的API,使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快,性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O模型...

Vue项目中自动将px转换为rem【代码】【图】

一、配置与安装步骤: 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2、在 config 文件夹中创建 rem.js: 3、将以下代码复制到 rem.js 中:(function(){function a(){var b=document.documentElement.clientWidth;b=b>750?750:b;var c=b/750*100;document.getElementsByTagName("html")[0].style.fontSize=c+"px"}a();window.onresize=a})(); 4、在 src 文件夹下的 main.js 中引入:import ‘./config/rem‘ 5、在 Vue ...

阐述vue项目中package.json与package-lock.json作用及区别【图】

我们每次新建一个项目的时候会发现在项目中会有这么俩个相似的文件,并且一个里边东西很多一个里边的东西很简洁,那么他们到底有什么区别与联系。  npm5之前的版本,是不会生成package-lock.json这个文件的。npm5版本及以后,才会生成package-lock.json文件;当使用npm安装包的时候,npm都会生成或者更新package-lock.json文件,npm5版本及以后的版本,在安装包的时候,不需要加 --save(-s) 参数,也会自动在package.json中保存...