vue 仿QQ 开发流程
技术客栈:
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 开发流程的更多相关文章
- vue 仿ele 开发流程
技术栈: vue2 vuex vue-router axios webpack eslint better-scroll 1.安装插件 npm install vue-resource babel-r ...
- Vue 实战项目开发流程
一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...
- vue 项目的开发流程
1.$ node -v (检测node版本,node版本需要在 V4 以上) 2.全局安装vue $ npm install -g vue 3.安装脚手架 $ npm install -g vue-c ...
- Vue项目的开发流程
我先安装的node.js 1.确认已安装了node.js,可在cmd中输入( node -v和npm -v),如显示出版号,说明安装成功 2.安装webpack 和webpack-cli 在全局下安装 ...
- Vue 仿QQ左滑删除功能(非原创)
非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...
- 高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理 这一篇详细说下拉框的实现原理 先上最终效果图 一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
- 高仿QQ即时聊天软件开发系列之二登录窗口界面
继上一篇高仿QQ即时聊天软件开发系列之一开端之后,开始做登录窗口 废话不多说,先看效果,只有界面 可能还有一些细节地方没有做,例如那个LOGO嘛,不要在意这些细节 GIF虽短,可是这做起来真难,好吧因 ...
- Vue.js的复用组件开发流程
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...
- Vue 框架-12-Vue 项目的详细开发流程
Vue 框架-12-Vue 项目的详细开发流程 首先,如果你还不了解 Vue 脚手架怎么搭建? 默认的环境中有哪些文件? 文件大概是什么作用? 那么,您要先查看之前的文章才有助于你理解本篇文章: Vu ...
随机推荐
- webpack配置点记录
jsx语法需要用到babel-preset-react: 通用babel-loader相关如下: 以上配置还只能针对ES6情况,static defaultProps是ES7的特性,需要引入新的配置:
- CSS页面排版的一点笔记
CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...
- 设计模式-命令模式(Command Pattern)
本文由@呆代待殆原创,转载请注明出处:http://www.cnblogs.com/coffeeSS/ 命令模式简述 命令模式的主要作用是将“行为请求者”和“行为实现者”解耦.举个例子,假如我们现在要 ...
- css总结——position
CSS(Cascading Style Sheet),中文翻译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.在css控制页面中,主要有四种样式:行内样式(style ...
- 【UOJ #34】多项式乘法
http://uoj.ac/problem/34 看了好长时间的FFT和NTT啊qwq在原根那块磨蹭了好久_(:з」∠)_ 首先设答案多项式的长度拓展到2的幂次后为n,我们只要求出一个g(不是原根)满 ...
- CSS 笔记——定位尺寸
3. 定位尺寸 -> 尺寸 (1)height 基本语法 height : auto | length 语法取值 auto : 默认值.无特殊定位,根据HTML定位规则分配 length : 由 ...
- luogu P1060 开心的金明
题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间他自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今天 ...
- 【Trie】【kd-tree】计蒜客17122 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 I. Barty's Computer
题意:2种操作:①往集合里添加一个串 ②给你四个小串a b c d,问你集合里有几个串S满足S=a+S1+b+c+S2+d的形式.S1 S2可以为空,并且a+S1+b=c+S2+d. 就搞四颗Trie ...
- 【OpenJudge9277】【递推】Logs Stacking堆木头
Logs Stacking堆木头 总时间限制: 1000ms 内存限制: 131072kB [描述] Daxinganling produces a lot of timber. Before loa ...
- Ubuntu 16.04安装RedisDesktopManager
说明:0.9版本的安装补上,只能安装0.8版本的. 官网: https://github.com/uglide/RedisDesktopManager 下载: https://github.com/u ...