此内容被密码保护

2017/04/09
default
暂无评论

vuejs

2016/12/22
front-end
1 条评论

Vue数据绑定原理

官网：https://vuejs.org 要是网络差可以打开中文
 V3
GitHub：https://github.com/vuejs/vue
http://weibo.com/arttechdesign 尤雨溪
比较详细的采访 Vue 作者尤雨溪
 Vue 2.0——渐进式前端解决方案
 Vue CLI Vue.js 开发的标准
Vue的 Object.defineProperty和未来3.0的proxy观察者机制
 集 Vue3+ & Vue-CLI3+ 开发生态圈和填坑姿态

Vue3.0中文文档（Vue3 + TS学习资源路线）

vue3

第三届VueConf
关于 Vue3 的文章，我不明白为啥用 TS

使用 React Hooks 重构你的小程序
https://aotu.io/notes/2019/07/10/taro-hooks/

Vue Function API
https://github.com/vuejs/vue-function-api/blob/master/README.zh-CN.md

来自 Vue 3.0 的 Composition API 尝鲜
vue3 源码的利器 - mini-vue & B站

教程

Vue作者：新手向：Vue 2.0 的建议学习顺序
 从0到1手写一个vuejs
Vue.js 2.3 知识清单
 2018 我所了解的 Vue 知识大全（一）
2018 我所了解的 Vue 知识大全（二）
Vue2.0 新手入门 — 从环境搭建到发布
 Vue.js学习教程_专题
 JTaro-Tutorial
Vuex 是什么
 技术胖-胜洪宇
 easy-mock
蓝狐博客

入门看看

1.Vue.js——60分钟快速入门
2.Vue.js——60分钟组件快速入门（上篇）
3.Vue.js——60分钟组件快速入门（下篇）
4.Vue.js——基于$.ajax实现数据的跨域增删查改
5.Vue.js——vue-resource全攻略
6.Vue.js——使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
7.Vue.js——60分钟browserify项目模板快速入门
8.Vue.js——60分钟webpack项目模板快速入门
9.Vue.js——vue-router 60分钟快速入门
上面源码https://github.com/keepfool/vue-tutorials
在Vue中有条件地使用CSS类

搭建过vue开发环境

vue学习
 Vue 源码解析：深入响应式原理
 剖析Vue原理&实现双向绑定MVVM
Vue技术内幕
 VUE.JS组件化开发实践
 vue开发看这篇文章就够了
 vue.js关于Object.defineProperty的利用原理

vue 248个知识点（面试题）为你保驾护航
 https://alligator.io/vuejs/
https://vuedose.tips/tips/

Vuex

vuex的demo实现
 到底vuex是什么？
使用Vue.js和Vuex实现购物车场景
 正确理解Vuex：懂人生，就懂了Vuex
Vuex 的简单使用

state的，store还有getter、Mutations、Actions以及Modules。
在vuex文档中都有非常详细的说明：http://vuex.vuejs.org/zh-cn/state.html
笼统的说：

组件获取 state 用 vuex 的 getter
组件触发动作用 vuex 的 action
修改 state 用 vuex 的 mutation

SSR

追求极致的用户体验ssr(基于vue的服务端渲染)
实现基于 Nuxt.js 的 SSR 应用

项目

Element 2.0
vux github 移动框架
饿了么前端
 Vue相关开源项目库汇总
 Let you insight into the Vue.js

https://github.com/yaoyao1987/vue-cli-multipage

Vue组件库

https://nutui.jd.com/demo.html#/index

多页面

https://github.com/luchanan/vue2.0-multi-page
基于 Vue-cli 构建多页面应用（Multi-pages Application）脚手架
 基于vue-cli搭建一个多页面应用(六)--移动端适配方案

基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
 改用nodejs构建的后台系统接口
 对应的后台管理系统
 Vue 全家桶 + Electron 开发的一个跨三端的应用
 vue.js - 收藏集
 vue相关收集
 https://github.com/lichenbuliren/vuex-notes-app
微豆 - Vue 2.0 实现豆瓣 Web App 教程
 Awesome douban DEMO created with Vue2.x + Vuex + Vue-router + Superagent
vue-element-admin && 文档 && 手摸手，带你用vue撸后台
 Vue.js实践：一个Node.js+mongoDB+Vue.js的博客内容管理系统
 开源中国微信版 vue+vux的2.x版本 github
使用vue.js + laravel开发单页面应用
 利用WordPress REST API 开发微信小程序从入门到放弃

vue2.0 admin / a management system templateelement-ui
Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3 https://admin.vuebulma.com
vue2 + vue-router + vuex 入门项目

框架

vonic && vonic-documents
iview
基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用。

插件(库)

Nicescroll滚动条插件
bcrypt.js && npm && 使用
 手摸手，带你封装一个vue component
[译]如何在 Vue.js 中使用第三方库

https://zhuanlan.zhihu.com/p/25042521
详解 Vue & Vuex 实践

插件

Vue 插件编写与实战

Vue生命周

http://www.cnblogs.com/gagag/p/6246493.html
生命周期

vue 钩子函数

Vue2.0 探索之路——生命周期和钩子函数的一些理解
https://segmentfault.com/a/1190000008010666\

https://crazy0x.github.io/frontend/2017/01/23/vue-nga.html
使用Vue框架实现NGA客户端

Vue.js：a (re)introduction（作者中文）
https://zhuanlan.zhihu.com/p/20302927
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/ (作者英文原文)
https://github.com/vuejs/awesome-vue

sublime中有没有*.vue文件格式化插件？
https://segmentfault.com/q/1010000004221470

HTML/CSS/JS Prettify 这个插件就行，安装后 tools->HTML/CSS/JS Prettify->set prettify preference 在"allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg","vue"] 加上vue就好了

PostCSS(px2rem)
除了Sass这样的CSS处理器这外，我们团队的@颂奇同学还开发了一款npm的工具px2rem 。安装好px2rem之后，可以在项目中直接使用。也可以使用PostCSS 。使用PostCSS插件postcss-px2rem：

wordpress with vue

https://deliciousbrains.com/creating-a-wordpress-theme-using-the-rest-api-and-vue-js/
https://github.com/bstavroulakis/vue-wordpress-pwa
https://www.npmjs.com/package/vue-wordpress
https://segmentfault.com/a/1190000008715104

优化

关于 webpack 打包后文件过大的那些事……
基于 Webpack 的应用包体尺寸优化
 Vue路由开启keep-alive时的注意点
 vue-cli 构建的项目 webpack 如何配置不 build 出 .map 文件？
如何降低Vue.js项目中Webpack打包文件的大小？
路由懒加载 Webpack 的代码分割功能
 vue 组件按需引用，vue-router懒加载，vue打包优化，加载动画
 在vue 中使用 Clipboard.js复制粘贴官网
 Clipboard is not a function?
使用clipboard.js实现页面内容复制到剪贴板

组件通信

vue中8种组件通信方式
 vue-router 项目中$route.params和$route.query的区别是什么，踩坑事件进行总结

?id=123456&uid=1 这样传参的方式，获取值为this.$route.query.id(uid) ，这样的不用改路由
/create/12345/1  这样的传参获取值为this.$route.params.id，需要改路由path: '/create/:id/:uid

部署

node-vue前后端分离记录
 利用scp2部署Vue项目到测试环境
 vue.js（SCP2）打包后自动上传到服务器
 vue2 前后端分离项目ajax跨域session问题解决
 vuejs怎么在服务器部署？

总结

大型Vuex应用程序的目录结构
 你不知道的Vuejs
curated list(awesome-vue)
从1万篇文章中挑出的40篇最棒的 Vue 学习指南（2018版）
如何在Vue项目中使用vw实现移动端适配
 Vue折腾记
 Vuejs的一些总结
 Vue2技术栈归纳与精粹
 Vue-Layout : vue可视化布局、自动生成代码
 Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
Vue-Layout : vue可视化布局、自动生成代码
基于 Vue.js 的 PWA 解决方案帮助开发者快速搭建 PWA 应用，解决接入 PWA 的各种问题

其他

npm uninstall xxx --save
为什么 npm 要为每个项目单独安装一遍 node_modules？
关于Webstorm webpack经常不能自动热更新问题
webstrom settings的system settings默认勾选safewrite,勾选去掉就可以了
SCSS 与 Sass 异同

在线编辑器

https://codesandbox.io/s/

挖坑

https://www.jianshu.com/p/31ad32e7ec13

vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程
done()方法的解释

引用本地数据

因为不能直接引用或以请求的方式获取项目本地.json后缀的json文件，
可以把json数据转换js文件格式在index.html中引入

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    ...
    <script src="./datas.js"></script>
    ...
  </body>
</html>

datas.js

// 在本地开发时 ESLint 报错，添加下面代码即可，build 时打包不受影响
// eslint-disable-next-line no-undef
datas = {
  'identifier': '20190714',
  'name': '我的好友',
  'version': '0.0.1',
  'build': 0,
  'releaseNote': '我的好友',
  'hidden': true,
  'dependencies': {
    'piece': '0.0.1',
    'com.csair.base': '0.0.1',
    'butterfly': '0.0.1',
    'ratchet': '0.0.1'
  },
  'code': 200
}

在页面上 xx.vue 中调用

created: function () {
  ...
  // 下面是打包时的引用；
  // 本地开发时这样写会报错，datas为未定义，开发时正常用请求的方式(axios,get)获取本地json即可
  this.data = datas  
  ...
},

或者看这个
vue项目怎么在打包后再引入一些数据文件？

在Vue-cli3.0项目的vue.config.js或vue-cli3.0之前版本的build/dev-server.js中配置：


const express = require('express')
const app = express()
var singer = require('./src/db/data/singer.json')  //本地 json文件数据，打包会打包到 js 文件中

module.exports = {
   devServer:{      
     before(app) {
       app.get('/api/singer', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: singer
            })
        })
        app.get('/api/recommend', (req, res) => {
            res.json({              
                errno: 0,   // 这里是你的json内容
                data: recommend
            })
        })
    },

再组件内使用axios调用本地json文件数据：


import axios from 'axios'
axios.get("/api/singer").then((data)=>{
    console.log(data)
})

vue.config.js 配置如下：

const goods = require('./mock/goods.json')
module.exports = {
  devServer: {
    before: (app) => {
      app.post('/goods', function (req, res, next) {
        res.json(goods)
      })
    }
  }
}
src/views/Home.vue
<script>
import axios from 'axios'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  created () {
    axios.post('/goods')
  }
}
</script>

注意：vue cli3.0 public 文件夹才是静态资源文件,修改了vue.config.js需要重启项目。

https://www.v2ex.com/t/619038#reply23