vue 仿QQ 开发流程

技术客栈:

?

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

1.安装脚手架

?

1	npm install -g vue-cli

2.开始项目

?

1	vue init webpack qq

3.安装插件

?

1	npm install axios muse-ui vue vue-router vuex --save

 

?

1	npm install keycode stylus stylus-loader webpack-bundle-analyzer --save-dev

 

?

1	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 请求的模块：

?

1	npm install superagent --save-dev

 

?

1	const superagent = require('superagent')

 

引入聊天机器人：

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

 

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

?

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

14.引入 muse-ui

?

1	npm install muse-ui --save

 

?

1	npm install less less-loader --save-dev

 

build/webpack.base.conf.js

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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