目前一直使用vue去搭建项目,我个人习惯用Visual Studio Code编辑工具,所以下面的所有操作都是在这个编辑器中 在安装的时候,为了避免安装过程中出错,你最好安装了淘宝镜像(官网:https://npm.taobao.org/) npm install -g cnpm --registry=https://registry.npm.taobao.org 1,安装vue-cli cnpm install vue-cli -g        //    通过vue -V查看vue版本号…
今天做zymh比赛的一个管理后台,用的技术是vue+element-ui+vue-router+axios,其他浏览器运行的很好,但是在IE(从IE11到IE9,vue支持IE9以上)都报错 点进去就是定位到了markUp这个函数,经查询是element-ui报错,element-UI在使用MessageBox,Message等组件时,只需要用import导入,而不需要继续Vue.component(Message.name,Message) . 将各个组件中的Vue.component(Mes…
官方文档地址: ​ ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479 ​ ElemetUI: https://element.eleme.cn/#/zh-CN ​ axios: https://www.kancloud.cn/yunye/axios/234845 ​ Vue: https://cn.vuejs.org/v2/guide 创建码云仓库 克隆到本地 git clone 你自己的仓库地址 0608 创建数据库…
一.利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项…
vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.router.js中导入组件,配置组件 import Course from './views/Course.vue' export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '…
一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue_learn\leeoo>cnpm i element-ui -S √ Installed packages √ Linked latest versions √ Run scripts √ All packages installed ( packages installed from npm r…
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就会纠结自己到底该不该留下来继续等待呢. 所以,这时候,loading动画就是一种缓解等待情绪的方式,当然还有更高端的,比如:骨架屏.有兴趣的朋友可以自行研究,我后续也会找机会分享一下. 下面,开始本文的主要内容,目前我在用的是Vue 2.x版本,ajax请求用的是axios,UI框架用的是eleme…
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1.安装Node 开发框架和环境都是需要 Node.js ,所以需要先安装 node.js 环境, vue的运行是要依赖于 node 的 npm 管理工具来实现,Node官网下载地址: https://nodejs.org/en/download/. 安装过程一路Next就可以,安装完成之后,便可以打开…
目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习https://cn.vuejs.org/v2/guide/ 1.搭建vue工程 使用vue一般有直接引入vue.js方式,或者使用node.js进行构建,因为大部分的教程都是围绕node.js来展开的,所以这儿也使用node. 步骤1.下载node.js并安装,一般安装完成后会环境变量已经配置好,网…
1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 1.2 npm安装elementUI cd pro01 #进入新建项目的根目录 npm install element-ui -S #安装element-ui模块 ## 重要的事情说三遍:在指定位置!!!在指定位置!!!在指定位置!!!~~~添加三行代码 1.3 在项目中src目录下找到main.js,并在指定位置添加三行代码(main.j…
 前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的. Electron于2013年作为构建Github上可编程的文本编辑器Atom的框架而被开发出来.这两个项目在2014春季开源. 目前它已成为开源开发者.初创企业和老牌公司常用的开发工具. 看看谁在使用Electron…
 一.IDE开发工具 常用的开发工具有webstorm和sublime. 我个人喜好用Atom+插件的形式 打开Atom,在file --> settings --> packages中收入vue开发相关的插件 beautify:代码格式 atom-html-preview:html代码提示 language-vue.language-vue-component:vue语言 lint-sass-vue:vue的sass语言 vue-autocomplete:vue语法提示 文件结构如下: 二.…
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在运用npm install axios的时候就会默认安装qs,因此我们就得将qs引入到axios中,然后需要再通过实例化一个新的axios,并且设置他的消息头为'content-type': ‘application/x-www-form-urlencoded' let qs = require('…
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做:看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板,配置非常简单:本文将从初始化项目开始一直到打包上线做一个详细的介绍,看完本文章,绝对会对其中的一…
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做:看过一个不错的后台配置模板(vue-element-admin),页面也挺美的,但是还是碍于不想看太多关于这个模板的配置说明,于是又拉出来之前我搭建的简易版的模板,决定重构下,使用自己搭建的后台系统模板,配置非常简单:本文将从初始化项目开始一直到打包上线做一个详细的介绍,看完本文章,绝对会对其中的一…
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官网 Vuex官网 https://vuex.vuejs.org/zh/installation.html    Vue单向数据流   (2)安装 VueX安装:https://vuex.vuejs.org/zh/installation.html 3.Vuex的使用 data在store中state…
安装配置node.js安装vue并搭建前台项目前台项目引入elementUI前台项目引入axios本篇主要记录前台项目搭建之前的环境准备,首先要安装node.js(node官网),进行相关配置等. 安装配置node.js 进入node.js 官网下载你电脑对应的安装包,下载完双击运行下载的软件一直next安装,安装完后,你可以在命令行中查看是否安装成功.windows键加R打开运行窗口,输入cmd,打开命令行,再输入node -v,回车,就可以看到node的版本 node.js自带npm(包管理…
前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步使用说明 1.安装 cnpm install axios --save-dev 2.引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把axios挂载到vue上 3.…
1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue.prototype.$ajax = axios 3.在组件中使用(方法一) // .then .catch拥有各自独立的作用域,在后面添加.bind(this)可以使this指向组件实例 this.$ajax.post('/dnalims/svc/loaddict', data).then(fun…
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import axios from 'axios' import VueAxios from 'vue-axios 在vue中使用axios和vue-axios Vue.use(VueAxios,axios); 配置axios基础地址 axios.defaults.baseURL = '地址' 配置axios基础请…
1.安装ElementUI模块 cnpm install element-ui -S 2.在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 3.全局安装 Vue.use(ElementUI) 4.当我们安装完记得重新运行,cnpm run dev ,现在就可以直接使用elementUI了. vue + element-ui导入导出功能 1.前段后台管理系统中…
一.axios [应用]进行请求和传表单 [axios中文档]:https://www.kancloud.cn/yunye/axios/234845 [vue-axios]:https://cn.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html [参考]:https://blog.csdn.net/u010132177/article/details/103116767 1.1 安装axios 进入项目目录,运行cmd,运行如下代码:…
项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一共包含3个部分: 1.左侧栏部分 2.头部部分 3.内容部分. 说明 在整个后台管理系统中,左侧栏和头部部分是应该一直在页面中展示的,所以对于每个页面这两个组件都应该存在,而 内容部分 才是通过router的跳转而跳到不同的组件. 下面先把整个项目搭建一下,然后再来讲解上面三个部分 一.项目搭建 …
相关 (1) 相关博文地址: SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p/12930895.html SpringBoot + Vue + ElementUI 实现后台管理系统模板 -- 前端篇(二):引入 element-ui 定义基本页面显示:https://www.cnblogs.com/l-y-h/p/12935300.html SpringBoot +…
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开发,测试,线上), run自动调用对应的接口(proxy多代理配置) vue+element-ui JYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程. 该项目不仅是一个持续完善.高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案,致力于打造一个 与时俱进.高效易懂.高复用…
1.官网下载node,安装node.js环境 安装完成后进入cmd,输入node -v和npm -v查看node和npm是否安装成功及对应的版本 2.全局安装vue-cli:cnpm install -g vue-cli,此命令运行一次即可,以后就不用安装了 执行vue -V查看vue的版本 3.创建项目:vue init  webpack hellovue 4.安装路由:npm install vue-router --save-dev 5.安装elementUi组件:npm install…
最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue-element-admin 官网介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产…
第一步:安装Node 1.打开NodeJS的官网,下载和自己系统相配的NodeJS的安装程序,包括32位还是64位一定要选择好,否则会出现安装问题. 下载地址:https://nodejs.org/en/download/   我选择的是Window版本64位的安装程序,也有MAC平台的安装程序. 下载完成,如图:   2.接下来就是安装了,安装很简单,直接下一步下一步就可以,但是我也把流程记录下来,给第一次看本教程的人有一个大概的了解. 双击安装文件,如图:   3.点击下一步,选择同意协议,…
本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vux 1.laravel5.5安装,详情请参考: https://laravelacademy.org/post/7620.html 2.vue的安装: 直接进入项目的根目录,执行npm install ,建议如果可以的话使用 cnpm install cnpm安装 使用命令执行  npm install -g cnpm --registry=https://registry.npm.taobao.org…
版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 前言:本文简洁的描述VUE + ElementUI 从搭建到运行,可以根据本文先搭建出可运行的项目,然后再详细回顾每个步骤所做的事:也可在第二次搭建的时候作为步骤回顾与参考. 一.在node.js官网下载node.js并安装 //官网下载地址 https://nodejs.org/en/download/ 二.安装镜像 //如果公司有搭建私服,使用公司私服镜像 npm set registry http://127.0.0.1:…