目录 luffy前台配置 axios前后台交互 cookies操作 element-ui页面组件框架 bootstrap页面组件框架 luffy前台配置 axios前后台交互 安装:前端项目目录下的终端 >: cnpm install axios 配置:main.js import axios from 'axios' Vue.prototype.$axios = axios; cookies操作 安装:前端项目目录下的终端 >: cnpm install vue-cookies 配置:mai…

安装 vetur { // 自动补全触发范围---双引号内的字符串也可以触发补全 "editor.quickSuggestions": { "other": true, "comments": true, "strings": true }, // vue 格式化配置 "vetur.format.defaultFormatterOptions": { "prettier": { &quo…

笔者在做一个个人博客项目的时候需要一个富文本框输入组件与后台进行交互,但是官方配置里面没有关于nodejs的,于是自己查阅资料研究了一下,最后终于应用到了系统中. 一.后台配置 首先是找到了这个项目:https://github.com/netpi/ueditor,可以通过他开源的代码将ueditor应用的node上面,大概方法如下: 1.先安装依赖: npm install ueditor --save 2. 配置Node设置 //引入接口文件 const api = require('./a…

目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) vue请求生命周期 vue组件的生命周期钩子 关于路由 1.路由配置 2.路由跳转 3.路由传参 Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以…

vue项目的创建 方法1: cmd中执行 vue ui vue会创建一个socket,方便快捷 方法2: 命令行建立 vue create v-proj //创建项目名为v-proj的项目文件 >>>default (bable,eslint) //默认 manually select features //自定义 (*)bable //把es6语法解析为es5语法(防止沙雕浏览器无法解析es6) TypeScript //js编程还是ts编程 Progressive Web App(P…

前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.config.js: 同样的生成两个webpack配置文件,webpack.dev.config.js,webpack.prod.config.js,配置跟webpack.config.js一模一样 package.json: 组件化开发终于到了重头戏了 webpack引入vue 有几种方法导入 1.第一…

webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack(1)  讲解中,相信已经对webpack有一定了解了,想必很多朋友已经跃跃欲试了,准备要搞一个自己的小网站出来了,写上css,调整好代码,准备说干就干: 同样的,因为以后的开发中,肯定会有很多个css文件,可能一个vue组件就需要一个css文件,然后你又跟前面的js文件引入一样,在html文件里用l…

1.安装插件 1 npm install vue-video-player -S 2.配置插件 在main.js里添加 1 import VideoPlayer from 'vue-video-player' 2 require('video.js/dist/video-js.css') 3 require('vue-video-player/src/custom-theme.css') 4 Vue.use(VideoPlayer) 3.使用插件 在vue的组件页面里 1 <template>…

开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. 业务场景是千变万化的,而不变的是 Vue.js 组件开发的核心思想和使用技巧,掌握了 Vue.js 组件的各种开发模式,再复杂的业务场景也可以轻松化解.本小册则着重介绍笔者在 3 年的 Vue.js 开发及两年的 iView 开源中积累和沉淀的对 Vue.js 组件的见解和经验. 本小册不会介绍 V…

安装npm install sweetalert2@7.15.1 --save 封装 sweetalertimport swal from 'sweetalert2' export default { install: (Vue) => { // sweetalert2 的设置默认配置的方法 swal.setDefaults({ type: 'warning', showCancelButton: true, confirmButtonColor: 'rgb(140,212,245)', can…

为什么会有 Vuex 这个东西 ? 一个应用内部运行的机制,事件 -> 状态 -> UI,我们的前端常常会因为这两个过程而产生大量代码,从而变得难以维护. vue的声明式渲染,解决了从 状态 和 UI 的同步问题,从而使我们不需要由于状态发生改变去写大量的命令式改变 dom 的代码. 而类似于 vuex 这类状态管理的库,则解决了 事件 -> 状态 这个过程的维护问题.这类库所做的事情就是管理从 事件源映射到状态变化 这个过程(将这个映射过程从视图组件中剥离出来,组织好这一部分的代码,在…

目录 补充: 流式布局样式 Django国际化配置 Django的TODO注释 Vue的ajax插件:axios 安装 配置 如何使用? Vue的cookies插件:cookies 安装: main.js配置 使用 跨域问题(同源策略) 后台处理跨域问题 element-ui插件安装 补充:bootscript导入 配置jQuery 配置BootSript 补充: 流式布局样式 .xxx{ width: 90vh; /* 屏幕宽度 */ height: 100vh; /* 屏幕高度 */ } D…

相信大家用过很多jquery的分页插件,那这次就用一用基于vue的分页插件. 这里的环境用的是springboot 首先要引入pagehelper的jar文件,版本是1.2.3,配置文件也需要配置一下 核心代码: DAO层 接口: List<Article> selectAll(); mapper文件: 只需要写一个简单的查询即可. <select id="selectAll" resultMap="ResultMapWithBLOBs">…

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 4. 项目组件中的小知识点 (1)组件样式 (2)vue前端项目和django后端 四.…

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. # 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次new Vue({-})的代码,而且Vue初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作用,我们就详细讲解一下他们的使用情况.更详…

Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源cnpm vue ~~ django:vue是用来搭建vue前端项目的 1) 安装node 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm install -g cnpm --registry=https://registry.np…

基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文两种语言为例 安装 安装国际化插件vue-i18n npm i vue-i18n --save 添加locales文件 在根目录下(src/)下新建目录 i18n/ 在src/i18n/目录下新建en.json文件,对应英文 { "lang": { "login": &…

引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时,webpack默认会到node_modules/vue/dist目录找到package.json文件里的配置,这个文件的mian属性指向了node_modules/vue/dist/vue.runtime.common.js//这个路径指向的vue文件就是import Vue from "vue&…

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone…

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩…

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知识都是基于vue.js 2.0版本 一.组件编译作用域 <child-component> {{ message }}</child-component> message 应该绑定到父组件的数据,组件作用域简单地说是: 父组件模板的内容在父组件作用域内编译:子组件模板的内容在子组件作用…

今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)----取消Vue的所有的日志与警告 :用法:Vue.config.silent = true optionMergeStrategies:{[key:string]:Function}(默认是空对象{}) vue.config.optionMergeStrategies._my_option = fun…

1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1. 添加全局方法或属性   Vue.myGlobalMethod = function () {     // 逻辑...   }     // 2. 添加全局资源   Vue.directive('my-directive', {     bind (el, binding, vnode, old…

做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库可以结合起来使用,因为不管是vux,Mint-ui,Muse-ui等等各有各有的优势,今天就只分享下vue项目中如何配置vux. 1.项目里安装vux npm install vux --save 2.安装vux-loader(vux2必须结合vux-loader使用,本文也只是介绍vux2的配置)…

内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vue和WeUI的组件库 mint-ui ★4870 - Vue 2的移动UI元素 iview ★4782 - 基于 Vuejs 的开源 UI 组件库 Keen-UI ★2401 - 轻量级的基本UI组件合集 vue-material ★2294 - 通过Vue Material和Vue 2建立精美的a…

今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装 npm install rightmenu --save-dev 开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu); 例…

前言 目前有比较成熟的方案(vue-i18n)了解了下,并且实用了一下感觉对于我在使用的项目来说略显臃肿,功能比较多,所以压缩的会比较大,在移动端不太适合所以自己花一天时间撸了一个vue多语言插件,压缩后大小不超过2kb 使用方法 通过Vue.js公开方法install安装,参数 lang 为初始化默认语言,参数 messages 为初始语言库,也可以在组件中新增多语言,语言库格式参照其他开源的国际化项目 安装 github地址: smart-vue-i18n yarn add smart-vu…

上一篇关于vue环境配置已经写好了!按照操作就行了! 现在一个项目已经部署完成,接下来我们从路由开始! 还记得在初始化项目的时候,有提示是否需要安装vue-router,对没错,vue中路由全靠它! 首先找到路由配置文件 router>index.js,是整个项目路由配置文件 首先看最上面的,这个模块引入,ES2015中的import...from...将你需要配置的组件先引入进来 export输出路由实例,路由配置都在routes对象当中． / 斜杆表示的是路由默认第一路径,也就是第一次加载的…

本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知识都是基于vue.js 2.0版本 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 一…

vue之slot,组件标签嵌套 插槽(Slot),在各种vue的ui插件中,经常见到的多个组件标签相互嵌套(如下)就是以此为基础的. <el-col > <el-checkbox > </el-col> 而我们也经常会用到这种场景,例如封装一个边框样式的组件,组件中的内容,可以通过这种方式制作,或者将子组件提取到父组件中进行操作等等. slot分为两种情况,匿名和具名. 1.匿名 例子: 子组件: <div> <h2>我是子组件的标题</h…