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