技术客栈:

vue-cli vue2 vue-router vuex axios stylus webpack2 muse-ui

1.安装脚手架

npm install -g vue-cli

2.开始项目

vue init webpack qq

3.安装插件

npm install axios muse-ui vue vue-router vuex --save
npm install keycode stylus stylus-loader webpack-bundle-analyzer --save-dev
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

4.配置meta,引入reset.css

5.引入字体样式

https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic

https://fonts.googleapis.com/icon?family=Material+Icons

6.创建 base.styl

设置全局字体 和 清除浮动

7.创建 mixin.styl

设置 border-b-1px 和 border-t-1px , 解决1px问题

8.main.js – 引入主要组件

9.router/index.js – 设置路由配置

10. vuex – actions.js   getters.js  mutations  store.js

11.build/dev-server.js 设置apiRoutes

12.build/dev-server.js

设置 http 请求的模块:

npm install superagent --save-dev
const superagent = require('superagent')

引入聊天机器人:

http://www.tuling123.com/openapi/api

13.安装滚动 和 懒加载插件

npm install better-scroll vue-lazyload --save-dev

14.引入 muse-ui

npm install muse-ui --save
npm install less less-loader --save-dev

build/webpack.base.conf.js

resolve: {
extensions: ['.js','.vue','.json'],
alias: {
'muse-components': 'muse-ui/src',
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src')
}
},
module: {
rules: [
{
test: /muse-ui.src.*?js$/,
loader: 'babel-loader'
}
]
}

src/muse-ui.config.js

vue 仿QQ 开发流程的更多相关文章

  1. vue 仿ele 开发流程

    技术栈: vue2 vuex vue-router axios webpack eslint better-scroll 1.安装插件 npm install vue-resource babel-r ...

  2. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

  3. vue 项目的开发流程

    1.$ node -v (检测node版本,node版本需要在 V4 以上) 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-c ...

  4. Vue项目的开发流程

    我先安装的node.js 1.确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功 2.安装webpack 和webpack-cli 在全局下安装 ...

  5. Vue 仿QQ左滑删除功能(非原创)

    非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...

  6. 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框

    上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...

  7. 高仿QQ即时聊天软件开发系列之二登录窗口界面

    继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...

  8. Vue.js的复用组件开发流程

    本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...

  9. Vue 框架-12-Vue 项目的详细开发流程

    Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...

随机推荐

  1. jdbc 回顾

    JDBC实现基本的CRUD示例 private static void insertTest() throws SQLException { String dbURL = "jdbc:mys ...

  2. 2016.4.3 动态规划NOI专练 王老师讲课整理

    1.6049:买书 总时间限制:  1000ms 内存限制:  65536kB 描述 小明手里有n元钱全部用来买书,书的价格为10元,20元,50元,100元. 问小明有多少种买书方案?(每种书可购买 ...

  3. [转]115个Java面试题和答案——终极列表(上)

    本文我们将要讨论Java面试中的各种不同类型的面试题,它们可以让雇主测试应聘者的Java和通用的面向对象编程的能力.下面的章节分为上下两篇,第一篇将要讨论面向对象编程和它的特点,关于Java和它的功能 ...

  4. [转] hibernate Mysql 自增长 注解配置,表无关联的注解方式关联查询

    不同数据库 自增长ID配置 正对不同的数据库可以同时使用         @Id         @GeneratedValue(strategy = GenerationType.AUTO) 2 针 ...

  5. 你可能从未听过的 Linux 发行版

    Hanthana Linux 官方主页:http://www.hanthana.org Hanthana Linux 基于 Fedora,主要面向 IT 教育,默认包含额外的编/解码器及多媒体播放器. ...

  6. 以下内容为Stackoverflow上整理以作纪录

    PRO 用IMG标签 Use IMG plus alt attribute if the image is part of the content such as a logo or diagram ...

  7. mongo 误操作恢复数据

    场景:我往同一个集合里面插入 三条数据  aa:aa  bb:bb  cc:cc .后来我后悔了,不想插入 bb:bb,通过oplog重放过滤好 bb:bb这条数据. 原理: 1.通过 oplog.r ...

  8. SQLAlchemy中filter()和filter_by()的区别

    1.filter引用列名时,使用“类名.属性名”的方式,比较使用两个等号“==” 2.filter_by引用列名时,使用“属性名”,比较使用一个等号“=” 3.在使用多条件匹配的时候,filter需要 ...

  9. Google Python 命名规范

    Google Python命名规范 module_name,  模块 package_name,  包 ClassName,  类 method_name,  方法 ExceptionName,    ...

  10. windows 服务器不能使用剪贴板解决办法

    您可以在系统资源中先结束rdpclip.exe进程,然后重新打开c:\windows\system32\rdpclip.exe即可