抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

其实主要看官方文档就可以了,非常之详尽而且是中文.以后遇到问题,或者容易忘记的点再记录下吧 ##参考文档官方文档Vue 基于 NUXT 的 SSR

Vue 全家桶 + Electron 开发的一个跨三端的应用饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Vue相关网站参考:

  Vue中文帮助网站http://cn.vuejs.org/

  Vue github开源地址https://github.com/vuejs/vue

  Vue.js专业中文社区http://www.vue-js.com/

  前端开发Vue相关http://www.opendigg.com/tags/front-vue

  本文开源地址https://github.com/yonghu86/awesome-github-vue

  本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:

  UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

构建插件

名称 说明
vue-spa-template 构建vue全家桶,Github说明很详细.参考文档:基于 vue 全家桶的 spa 项目脚手架
electron-vue 构建electron时用的
cooking vue特别简单的构建工具,不过东西可能没有上面vue-spa-template那么全. 中文文档
Vue-Element-Starter vue启动页.这个已经有了个后台框架的样子了.基本的东西已经弄好,可以快速开发了
Vue Paper Dashboard 这个真的很漂亮 就是不能用作大型后台
Vue Admin Panel Framework vue和buluma的后台好像是重复两个啊
CoPilot 这个也不错 是AdminLTE模板做的
CoreUI-Free-Bootstrap-Admin-Template 这个也不错 是CoreUI模板做的
Vuestic Admin Dashboard 这个也不错 是 Bootstrap 4.模板做的

这里总结了一些开发前后端分离,对于开发API的管理.不仅可以在没有后端搭建成的时候mock数据.而且可以管理接口及版本,并生成文档.这为开发及后续整理提供很大的方便. 网站 具有的特色 DOClever 这个平台有很好的介绍用的都是视频真是太贴心了教程.而且可以管理团队,项目分配,模拟数据,测试接口,版本管理.真的是功能十分丰富,这个也可以导入Swagger,只要导出json文件...

简单用法 123456789101112/* 向具有指定ID的用户发出请求 *///其实和jq的ajax差不多 then 是成功返回执行其后任务,catch捕捉错误//其实就是 Promise 可以进行并发操作的 axios.all(iterable) 其实就是 promise.all()axios.get('/user?ID=12345') .then(functio...

聚焦一个焦点,判断键值这么写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el: '#box',
data: {},
methods: {
show: function (ev) {
if(ev.keyCode==13){
alert('你按了回车键!')
}
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup="show($event)"> <!-- 这里 @keydown 也是可行的-->
</div>
</body>
</html>

因为vue控制的是body部分,所以没法修改header里的title这个比较麻烦而且不美观. 现在新的 vue-router 可以解决这个问题了.用钩子方法来做. 12345//这是钩子进入页面之前,就修改titlerouter.beforeEach((to, from, next) => { document.title = to.meta.title //这 t...

模版里链接跳转 1<router-link to="/foo">Go to Foo</router-link> js跳转方法 1this.$router.push({ path: '/main' }) 子页面这么用 router 配置 123456789101112131415161718192021...

简单说明

想用js开发桌面现在有两个框架可以用 Electron 另外一个是 nwjs.
但感觉还是用 Electron比较好,因为现在一些流行的软件是那这个弄的,比如说我现在用的 Atom ,VSCode 这两个软件都非常好用,而且漂亮.
另外还有个原因是,他有中文文档.这样实在是方便太多了

编写

这里主要编写个 Electron 启动配置文件.是 package.json 里的 main 字段的文件.
注意:如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js。
剩下的就是编写自己的程序了就行了.

贴两个配置文件样本.
这是官方的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const { app, BrowserWindow } = require('electron')
const path = require('path');
const url = require('url')

// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let win

function createWindow() {
// 创建浏览器窗口。
win = new BrowserWindow({ width: 800, height: 600 })

// 加载应用的 index.html。
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index_prod.html'),
protocol: 'file:',
slashes: true
}))
//win.loadURL('http://localhost:8080')

// 打开开发者工具。
win.webContents.openDevTools();

// 当 window 被关闭,这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 与此同时,你应该删除相应的元素。
win = null
})
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// 在这文件,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。
if (win === null) {
createWindow()
}
})

// 在这文件,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入。

vue组件模版编写规则

main.vue 在组件里 所有的样式必须放在一个 <div></div> 标签里 否则会出错.
这个标签可以指定 默认为 class=index 这个看教程时已经知道,只是做的时候又给忘记了


vue组件开始之前执行组件方法的方法.呵呵

  1. Vue.nextTick(function () { })

    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。 因为有的插件需要操作DOM 但是DOM还没创建出来时 会出现问题 这个也是如此无法用this 我理解的关于Vue.nextTick()的正确使用

  2. created:function(){}

    这个也可以的 这是钩子程序 但是这个时期 DOM没有创建出来

  3. mounted: function (){}

    这个也是vue生命周期中一个钩子,这个就是加载完组件,生成了DOM的时候,所这个可以用,需要对DOM进行操作的程序可以放在这里执行

1
2
3
4
5
6
7
8
// 记性真是不好上一次还知道怎么用,下一次就又忘了 现在放在这
export default {
mounted: function () {
particlesJS('particles-js', particles_config)
},
methods: {
...
}

先记录下 还没仔细看完, 以后有新的心得,再补充. vuex官方文档vue+vuex构建单页应用vuex入门实例(1/3)

vue 和 vue2 在 props 使用上面有些不同,在 vue2 里,模版传递过去的值,必须在 html 标签里,否则不显示.而vue使用时没有这个限制.还有就是 <child message="hello!"></child> 必须用双引号,单引号可能会出现问题.再有就是 这个表示的是传递一个字符串,如果要传vue内data数据,必须绑定 &...

cooking 更易上手的前端构建工具 cooking可以简单的配置一个webpace,而且中文文档很详细,的确是比配置webpace更简单.呵呵,接触构建工具比较晚. 发现一个比一个容易,gulp,webpace,cooking.新东西就是好啊. 简单安装首先确保是在 NPM 3+, Node 4+, Python 2.7+ 环境下运行 第一步:安装 cooking 命令行工具 n...

一些经验自动刷新问题:用 vue-cli 建立的vue项目,配合 webpack 测试时, webpack 可以自动更新浏览器输出结果,但是 vue.js 的数据修改,是不会显示在浏览器中的,必须手动刷新才行.比如下面例子 12345678910111213141516171819<template> <div class="hello"> ...

原因就是chart.js需要Chart.bundle.js支持. 不过 vue-admin 把chart.js设置成不解析依赖的了,所以就会报错.这个配置就在 79 行. webpace.base.conf.js 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495...

Vue.js教程浅谈Vue.jsvue.js学习笔记1 – 搭建vue.js本地开发框架vuejs-learn

一些总结吧

  • 父组件和子组件之间通信用广播: vue可以用多种方法实现组件间沟通,比如用一个属性,
    不过这必须用上同步 :test.sync 要不然子组件的状态父组件不知道.
    但是这有个问题就是不利于解耦,捆绑太紧密了不能复用了,所以还是用广播.
    不过还是有个小小的疑问,如果两个同名事件怎么办呢?? 按文档里说是第一个,那可能是父组件加载子组件的顺序吧
    我想可能是这样的,如果存在同名的话,那就得手动调整顺序,我感觉最好不要同名.

  • v-bind:fields=”columns” 绑定解释: 有时用简写就比较懵,简单记忆下: 如果原有属性就是绑定属性到vue属性.如果不是自带属性,那就是组件自定义的.比如 :fields="columns" 这里就是一个. fields 子组件 : columns 父组件. 反正等号后面都是当前组件的.可以看下面例子.

仓库在这里 重要提示: 一定要完整版,因为精简版会把开发部分去掉,所以不支持这个. 只支持chrome,所以去chrome商店去下载吧 安装完成后,必须进入chrome扩展工具选项里,找到vue-devtools把下面的 允许访问文件网址 勾选上 这样用F12打开开发工具栏,最后一项就能看到 vue-devtools的身影了.