├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── address │ │ ├── 公众号.png │ │ ├── 新的朋友.png │ │ ├── 标签.png │ │ └── 群聊.png │ ├── find │ │ ├── bg-1.png │ │ ├── bg.png │ │ ├── 小程序.png │ │ ├── 扫一扫.png │ │ ├── 摇一摇.png │ │ ├── 朋友圈.png │ │ ├── 漂流瓶.png │ │ ├── 购物.png │ │ └── 附近的人.png │ ├── lazy.png │ ├── logo.png │ ├── me │ │ ├── minion.png │ │ ├── 二维码.png │ │ ├── 卡包.png │ │ ├── 收藏.png │ │ ├── 相册.png │ │ ├── 表情.png │ │ ├── 设置.png │ │ └── 钱包.png │ ├── moren.png │ ├── tab │ │ ├── 发现.png │ │ ├── 发现1.png │ │ ├── 微信.png │ │ ├── 微信1.png │ │ ├── 我.png │ │ ├── 我1.png │ │ ├── 通讯录.png │ │ └── 通讯录1.png │ ├── userimg.png │ ├── 加号.png │ ├── 我.png │ ├── 搜索.png │ ├── 赞.png │ └── 返回.png ├── base │ ├── loading │ │ ├── loading.gif │ │ └── loading.vue │ └── scroll │ │ └── scroll.vue ├── common │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ └── style.css ├── components │ ├── address │ │ ├── address-detail │ │ │ ├── address-detail.vue │ │ │ └── address-more │ │ │ │ └── address-more.vue │ │ └── address.vue │ ├── chat │ │ └── chat.vue │ ├── chatroom │ │ ├── chatroom-user │ │ │ └── chatroom-user.vue │ │ └── chatroom.vue │ ├── find │ │ ├── find.vue │ │ ├── friend-circle │ │ │ └── friend-circle.vue │ │ ├── scan │ │ │ ├── scan.vue │ │ │ └── 扫一扫.png │ │ └── shake │ │ │ ├── shake.vue │ │ │ └── 摇一摇.png │ ├── me │ │ ├── album │ │ │ └── album.vue │ │ ├── card │ │ │ └── card.vue │ │ ├── collection │ │ │ └── collection.vue │ │ ├── me.vue │ │ ├── money │ │ │ ├── money.vue │ │ │ ├── 收付款.png │ │ │ ├── 银行卡.png │ │ │ └── 零钱.png │ │ └── set │ │ │ └── set.vue │ ├── plus │ │ ├── plus.vue │ │ ├── 发起群聊.png │ │ ├── 帮助.png │ │ ├── 扫一扫.png │ │ ├── 收付款.png │ │ └── 添加朋友.png │ └── search │ │ └── search.vue ├── main.js ├── router │ └── index.js └── store │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutation-types.js │ ├── mutations.js │ └── state.js └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // http://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 13 | extends: 'standard', 14 | // required to lint *.vue files 15 | plugins: [ 16 | 'html' 17 | ], 18 | // add your custom rules here 19 | 'rules': { 20 | // allow paren-less arrow functions 21 | 'arrow-parens': 0, 22 | // allow async-await 23 | 'generator-star-spacing': 0, 24 | // allow debugger during development 25 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Vue.js 2.0 实战项目 2 | 3 | 基于 Vue + Vuex + Vue-router + Webpack 2.0 4 | 打造微信界面，实现了微信聊天、搜索、点赞、通讯录（快速导航）、个人中心、模拟对话、朋友圈、设置等功能。 5 | 6 | ### 技术栈 7 | 8 | 9 | - [x] MVVM框架：Vue.js 2.0 10 | - [x] 状态管理：Vuex 11 | - [x] 移动端组件库：Mint-ui 12 | - [x] 前端路由：Vue-router 13 | - [x] 数据交互：Vue-resource 14 | - [x] 打包工具：webpack 2.0 15 | - [x] 环境配置：node + npm 16 | - [x] 语言：es6 17 | 18 | 19 | ### 项目运行 20 | 21 | ``` 22 | git clone https://github.com/caochangkui/wechat-by-vue.git 23 | 24 | cd wechat-by-vue 25 | 26 | npm install 27 | 28 | npm run dev //服务端运行，运行后访问 http://localhost:6868) 29 | 30 | npm run build //项目打包 31 | 32 | ``` 33 | 34 | ### 项目预览 35 | 36 | [点击这里预览项目](https://caochangkui.github.io/MyItems/wechat-by-cck/index.html#/chat) （在chrome手机模式下预览） 37 | 38 | 39 | ### 移动端扫描下方二维码可直接打开 40 | 41 | ![](https://www.cnblogs.com/images/cnblogs_com/cckui/1071419/o_1560499484.png) 42 | 43 | 44 | 45 | # 页面部分截图 46 | 47 | ### 微信聊天 48 | 49 | 50 | 51 | 52 | ### 朋友圈、点赞 53 | 54 | 55 | 56 | ### 个人中心、相册、钱包、卡包、设置 57 | 58 | 59 | 60 | 61 | 62 | # 项目树 63 | ``` 64 | . 65 | ├── README.md 66 | ├── build // 项目打包路径 67 | │   ├── build.js 68 | │   ├── check-versions.js 69 | │   ├── dev-client.js 70 | │   ├── dev-server.js 71 | │   ├── utils.js 72 | │   ├── vue-loader.conf.js 73 | │   ├── webpack.base.conf.js 74 | │   ├── webpack.dev.conf.js 75 | │   └── webpack.prod.conf.js 76 | ├── config // 上线项目文件 77 | │   ├── dev.env.js 78 | │   ├── index.js 79 | │   └── prod.env.js 80 | ├── index.html 81 | ├── package.json // 配置信息 82 | └── src // 源码目录 83 |    ├── App.vue // 输出文件 84 |    ├── main.js // 入口文件 85 |    ├── assets // 公用图片 86 |    ├── base // 存放通用组件的组件库 87 |    │   ├── loading // 栏加载组件 88 |    │   └── scroll // 滑屏文件 89 |    ├── components // 应用组件的组件库 90 |    │   ├── chat 91 |    │   │   └── chat.vue // 微信组件 92 |    │   ├── address 93 |    │   │   └── address.vue // 通讯录组件 94 |    │   │   └── address-detail 95 |    │   │   └── address-detail.vue // 通讯录详情组件 96 |    │   │   └── address-more 97 |    │   │   └── address-more.vue // 通讯录更多详情组件 98 |    │   ├── find 99 |    │   │   ├── find.vue // 发现组件 100 |    │   │   ├── find-circle 101 |    │   │   │ └── find-circle.vue // 朋友圈组件 102 |    │   │   ├── scan 103 |    │   │   │ └── scan.vue // 扫一扫组件 104 |    │   │   └── shake 105 |    │   │ └── shake.vue // 摇一摇组件 106 |    │   ├── me 107 |    │   │   ├── me.vue // 个人中心组件 108 |    │   │   ├── card 109 |    │   │   │ └── card.vue // 卡包组件 110 |   │   │   ├── money 111 |    │   │   │ └── money.vue // 钱包组件 112 |    │   │   ├── collection 113 |    │   │   │ └── collection.vue // 收藏组件 114 |    │   │   ├── album 115 |    │   │ │ └── album.vue // 相册组件 116 |    │   │   └── set 117 |    │   │ └── set.vue // 设置组件 118 |    │   ├── chatroom 119 |    │   │   └── chatroom.vue // 聊天窗口组件 120 |    │   │   └── chatroom-user 121 |    │   │   └── chatroom-user.vue // 聊天者的个人信息组件 122 |    │   ├── search 123 |    │   │   └── search.vue // 搜索组件 124 |    │   ├── plus 125 |    │   │   └── plus.vue // 更多组件 126 |    ├── router 127 |    │   └── index.js // 路由控制中心 128 | └── store // 存放vuex相关代码 129 | ├── actions.js // 异步操作，或对mutation做一些封装 130 | ├── getters.js // 获取state，并对其做一些映射 131 | ├── index.js // vuex入口文件 132 | ├── mutation-types.js // 存放与mutatiom相关的常量 133 | ├── mutations.js // 处理数据逻辑方法的集合 134 | └── state.js // 管理所有状态 135 | 136 | 137 | ``` 138 | 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: false, 33 | heartbeat: 2000 34 | }) 35 | // force page reload when html-webpack-plugin template changes 36 | compiler.plugin('compilation', function (compilation) { 37 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 38 | hotMiddleware.publish({ action: 'reload' }) 39 | cb() 40 | }) 41 | }) 42 | 43 | // proxy api requests 44 | Object.keys(proxyTable).forEach(function (context) { 45 | var options = proxyTable[context] 46 | if (typeof options === 'string') { 47 | options = { target: options } 48 | } 49 | app.use(proxyMiddleware(options.filter || context, options)) 50 | }) 51 | 52 | // handle fallback for HTML5 history API 53 | app.use(require('connect-history-api-fallback')()) 54 | 55 | // serve webpack bundle output 56 | app.use(devMiddleware) 57 | 58 | // enable hot-reload and state-preserving 59 | // compilation error display 60 | app.use(hotMiddleware) 61 | 62 | // serve pure static assets 63 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 64 | app.use(staticPath, express.static('./static')) 65 | 66 | var uri = 'http://localhost:' + port 67 | 68 | var _resolve 69 | var readyPromise = new Promise(resolve => { 70 | _resolve = resolve 71 | }) 72 | 73 | console.log('> Starting dev server...') 74 | devMiddleware.waitUntilValid(() => { 75 | console.log('> Listening at ' + uri + '\n') 76 | // when env is testing, don't need open it 77 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 78 | opn(uri) 79 | } 80 | _resolve() 81 | }) 82 | 83 | var server = app.listen(port) 84 | 85 | module.exports = { 86 | ready: readyPromise, 87 | close: () => { 88 | server.close() 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | transformToRequire: { 13 | video: 'src', 14 | source: 'src', 15 | img: 'src', 16 | image: 'xlink:href' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | '@': resolve('src') 25 | } 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.(js|vue)$/, 31 | loader: 'eslint-loader', 32 | enforce: 'pre', 33 | include: [resolve('src'), resolve('test')], 34 | options: { 35 | formatter: require('eslint-friendly-formatter') 36 | } 37 | }, 38 | { 39 | test: /\.vue$/, 40 | loader: 'vue-loader', 41 | options: vueLoaderConfig 42 | }, 43 | { 44 | test: /\.js$/, 45 | loader: 'babel-loader', 46 | include: [resolve('src'), resolve('test')] 47 | }, 48 | { 49 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 10000, 53 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 54 | } 55 | }, 56 | { 57 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 58 | loader: 'url-loader', 59 | options: { 60 | limit: 10000, 61 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 62 | } 63 | }, 64 | { 65 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 66 | loader: 'url-loader', 67 | options: { 68 | limit: 10000, 69 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 70 | } 71 | } 72 | ] 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ 17 | sourceMap: config.build.productionSourceMap, 18 | extract: true 19 | }) 20 | }, 21 | devtool: config.build.productionSourceMap ? '#source-map' : false, 22 | output: { 23 | path: config.build.assetsRoot, 24 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | }, 36 | sourceMap: true 37 | }), 38 | // extract css into its own file 39 | new ExtractTextPlugin({ 40 | filename: utils.assetsPath('css/[name].[contenthash].css') 41 | }), 42 | // Compress extracted CSS. We are using this plugin so that possible 43 | // duplicated CSS from different components can be deduped. 44 | new OptimizeCSSPlugin({ 45 | cssProcessorOptions: { 46 | safe: true 47 | } 48 | }), 49 | // generate dist index.html with correct asset hash for caching. 50 | // you can customize output by editing /index.html 51 | // see https://github.com/ampedandwired/html-webpack-plugin 52 | new HtmlWebpackPlugin({ 53 | filename: config.build.index, 54 | template: 'index.html', 55 | inject: true, 56 | minify: { 57 | removeComments: true, 58 | collapseWhitespace: true, 59 | removeAttributeQuotes: true 60 | // more options: 61 | // https://github.com/kangax/html-minifier#options-quick-reference 62 | }, 63 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 64 | chunksSortMode: 'dependency' 65 | }), 66 | // split vendor js into its own file 67 | new webpack.optimize.CommonsChunkPlugin({ 68 | name: 'vendor', 69 | minChunks: function (module, count) { 70 | // any required modules inside node_modules are extracted to vendor 71 | return ( 72 | module.resource && 73 | /\.js$/.test(module.resource) && 74 | module.resource.indexOf( 75 | path.join(__dirname, '../node_modules') 76 | ) === 0 77 | ) 78 | } 79 | }), 80 | // extract webpack runtime and module manifest to its own file in order to 81 | // prevent vendor hash from being updated whenever app bundle is updated 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'manifest', 84 | chunks: ['vendor'] 85 | }), 86 | // copy custom static assets 87 | new CopyWebpackPlugin([ 88 | { 89 | from: path.resolve(__dirname, '../static'), 90 | to: config.build.assetsSubDirectory, 91 | ignore: ['.*'] 92 | } 93 | ]) 94 | ] 95 | }) 96 | 97 | if (config.build.productionGzip) { 98 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 99 | 100 | webpackConfig.plugins.push( 101 | new CompressionWebpackPlugin({ 102 | asset: '[path].gz[query]', 103 | algorithm: 'gzip', 104 | test: new RegExp( 105 | '\\.(' + 106 | config.build.productionGzipExtensions.join('|') + 107 | ')$' 108 | ), 109 | threshold: 10240, 110 | minRatio: 0.8 111 | }) 112 | ) 113 | } 114 | 115 | if (config.build.bundleAnalyzerReport) { 116 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 117 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 118 | } 119 | 120 | module.exports = webpackConfig 121 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: './', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 6868, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue--wechat--cck 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue--wechat--cck", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "caochangkui", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node build/dev-server.js", 10 | "build": "node build/build.js", 11 | "lint": "eslint --ext .js,.vue src" 12 | }, 13 | "dependencies": { 14 | "better-scroll": "^0.4.0", 15 | "mint-ui": "^2.2.9", 16 | "vue": "^2.3.3", 17 | "vue-lazyload": "^1.0.6", 18 | "vue-resource": "^1.3.4", 19 | "vue-router": "^2.6.0", 20 | "vuex": "^2.3.1" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^7.1.2", 24 | "babel-core": "^6.22.1", 25 | "babel-eslint": "^7.1.1", 26 | "babel-loader": "^7.1.1", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-preset-env": "^1.3.2", 29 | "babel-preset-stage-2": "^6.22.0", 30 | "babel-register": "^6.22.0", 31 | "chalk": "^2.0.1", 32 | "connect-history-api-fallback": "^1.3.0", 33 | "copy-webpack-plugin": "^4.0.1", 34 | "css-loader": "^0.28.0", 35 | "cssnano": "^3.10.0", 36 | "eslint": "^3.19.0", 37 | "eslint-config-standard": "^6.2.1", 38 | "eslint-friendly-formatter": "^3.0.0", 39 | "eslint-loader": "^1.7.1", 40 | "eslint-plugin-html": "^3.0.0", 41 | "eslint-plugin-promise": "^3.4.0", 42 | "eslint-plugin-standard": "^2.0.1", 43 | "eventsource-polyfill": "^0.9.6", 44 | "express": "^4.14.1", 45 | "extract-text-webpack-plugin": "^2.0.0", 46 | "file-loader": "^0.11.1", 47 | "friendly-errors-webpack-plugin": "^1.1.3", 48 | "html-webpack-plugin": "^2.28.0", 49 | "http-proxy-middleware": "^0.17.3", 50 | "opn": "^5.1.0", 51 | "optimize-css-assets-webpack-plugin": "^2.0.0", 52 | "ora": "^1.2.0", 53 | "rimraf": "^2.6.0", 54 | "semver": "^5.3.0", 55 | "shelljs": "^0.7.6", 56 | "url-loader": "^0.5.8", 57 | "vconsole": "^2.5.2", 58 | "vue-loader": "^12.1.0", 59 | "vue-style-loader": "^3.0.1", 60 | "vue-template-compiler": "^2.3.3", 61 | "webpack": "^2.6.1", 62 | "webpack-bundle-analyzer": "^2.2.1", 63 | "webpack-dev-middleware": "^1.10.0", 64 | "webpack-hot-middleware": "^2.18.0", 65 | "webpack-merge": "^4.1.0" 66 | }, 67 | "engines": { 68 | "node": ">= 4.0.0", 69 | "npm": ">= 3.0.0" 70 | }, 71 | "browserslist": [ 72 | "> 1%", 73 | "last 2 versions", 74 | "not ie <= 8" 75 | ] 76 | } 77 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 66 | 67 | -------------------------------------------------------------------------------- /src/assets/address/公众号.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/address/公众号.png -------------------------------------------------------------------------------- /src/assets/address/新的朋友.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/address/新的朋友.png -------------------------------------------------------------------------------- /src/assets/address/标签.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/address/标签.png -------------------------------------------------------------------------------- /src/assets/address/群聊.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/address/群聊.png -------------------------------------------------------------------------------- /src/assets/find/bg-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/bg-1.png -------------------------------------------------------------------------------- /src/assets/find/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/bg.png -------------------------------------------------------------------------------- /src/assets/find/小程序.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/小程序.png -------------------------------------------------------------------------------- /src/assets/find/扫一扫.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/扫一扫.png -------------------------------------------------------------------------------- /src/assets/find/摇一摇.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/摇一摇.png -------------------------------------------------------------------------------- /src/assets/find/朋友圈.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/朋友圈.png -------------------------------------------------------------------------------- /src/assets/find/漂流瓶.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/漂流瓶.png -------------------------------------------------------------------------------- /src/assets/find/购物.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/购物.png -------------------------------------------------------------------------------- /src/assets/find/附近的人.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/find/附近的人.png -------------------------------------------------------------------------------- /src/assets/lazy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/lazy.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/me/minion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/minion.png -------------------------------------------------------------------------------- /src/assets/me/二维码.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/二维码.png -------------------------------------------------------------------------------- /src/assets/me/卡包.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/卡包.png -------------------------------------------------------------------------------- /src/assets/me/收藏.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/收藏.png -------------------------------------------------------------------------------- /src/assets/me/相册.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/相册.png -------------------------------------------------------------------------------- /src/assets/me/表情.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/表情.png -------------------------------------------------------------------------------- /src/assets/me/设置.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/设置.png -------------------------------------------------------------------------------- /src/assets/me/钱包.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/me/钱包.png -------------------------------------------------------------------------------- /src/assets/moren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/moren.png -------------------------------------------------------------------------------- /src/assets/tab/发现.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/发现.png -------------------------------------------------------------------------------- /src/assets/tab/发现1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/发现1.png -------------------------------------------------------------------------------- /src/assets/tab/微信.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/微信.png -------------------------------------------------------------------------------- /src/assets/tab/微信1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/微信1.png -------------------------------------------------------------------------------- /src/assets/tab/我.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/我.png -------------------------------------------------------------------------------- /src/assets/tab/我1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/我1.png -------------------------------------------------------------------------------- /src/assets/tab/通讯录.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/通讯录.png -------------------------------------------------------------------------------- /src/assets/tab/通讯录1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/tab/通讯录1.png -------------------------------------------------------------------------------- /src/assets/userimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/userimg.png -------------------------------------------------------------------------------- /src/assets/加号.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/加号.png -------------------------------------------------------------------------------- /src/assets/我.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/我.png -------------------------------------------------------------------------------- /src/assets/搜索.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/搜索.png -------------------------------------------------------------------------------- /src/assets/赞.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/赞.png -------------------------------------------------------------------------------- /src/assets/返回.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/assets/返回.png -------------------------------------------------------------------------------- /src/base/loading/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/base/loading/loading.gif -------------------------------------------------------------------------------- /src/base/loading/loading.vue: -------------------------------------------------------------------------------- 1 | 7 | 17 | 28 | -------------------------------------------------------------------------------- /src/base/scroll/scroll.vue: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 70 | 71 | 74 | -------------------------------------------------------------------------------- /src/common/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/common/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/common/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/common/fonts/icomoon.ttf -------------------------------------------------------------------------------- /src/common/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/common/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/common/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('fonts/icomoon.eot?nqr0b2'); 4 | src: url('fonts/icomoon.eot?nqr0b2#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?nqr0b2') format('truetype'), 6 | url('fonts/icomoon.woff?nqr0b2') format('woff'), 7 | url('fonts/icomoon.svg?nqr0b2#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon-home:before { 28 | content: "\e900"; 29 | } 30 | .icon-home2:before { 31 | content: "\e901"; 32 | } 33 | .icon-home3:before { 34 | content: "\e902"; 35 | } 36 | .icon-office:before { 37 | content: "\e903"; 38 | } 39 | .icon-newspaper:before { 40 | content: "\e904"; 41 | } 42 | .icon-pencil:before { 43 | content: "\e905"; 44 | } 45 | .icon-pencil2:before { 46 | content: "\e906"; 47 | } 48 | .icon-quill:before { 49 | content: "\e907"; 50 | } 51 | .icon-pen:before { 52 | content: "\e908"; 53 | } 54 | .icon-blog:before { 55 | content: "\e909"; 56 | } 57 | .icon-eyedropper:before { 58 | content: "\e90a"; 59 | } 60 | .icon-droplet:before { 61 | content: "\e90b"; 62 | } 63 | .icon-paint-format:before { 64 | content: "\e90c"; 65 | } 66 | .icon-image:before { 67 | content: "\e90d"; 68 | } 69 | .icon-images:before { 70 | content: "\e90e"; 71 | } 72 | .icon-camera:before { 73 | content: "\e90f"; 74 | } 75 | .icon-headphones:before { 76 | content: "\e910"; 77 | } 78 | .icon-music:before { 79 | content: "\e911"; 80 | } 81 | .icon-play:before { 82 | content: "\e912"; 83 | } 84 | .icon-film:before { 85 | content: "\e913"; 86 | } 87 | .icon-video-camera:before { 88 | content: "\e914"; 89 | } 90 | .icon-dice:before { 91 | content: "\e915"; 92 | } 93 | .icon-pacman:before { 94 | content: "\e916"; 95 | } 96 | .icon-spades:before { 97 | content: "\e917"; 98 | } 99 | .icon-clubs:before { 100 | content: "\e918"; 101 | } 102 | .icon-diamonds:before { 103 | content: "\e919"; 104 | } 105 | .icon-bullhorn:before { 106 | content: "\e91a"; 107 | } 108 | .icon-connection:before { 109 | content: "\e91b"; 110 | } 111 | .icon-podcast:before { 112 | content: "\e91c"; 113 | } 114 | .icon-feed:before { 115 | content: "\e91d"; 116 | } 117 | .icon-mic:before { 118 | content: "\e91e"; 119 | } 120 | .icon-book:before { 121 | content: "\e91f"; 122 | } 123 | .icon-books:before { 124 | content: "\e920"; 125 | } 126 | .icon-library:before { 127 | content: "\e921"; 128 | } 129 | .icon-file-text:before { 130 | content: "\e922"; 131 | } 132 | .icon-profile:before { 133 | content: "\e923"; 134 | } 135 | .icon-file-empty:before { 136 | content: "\e924"; 137 | } 138 | .icon-files-empty:before { 139 | content: "\e925"; 140 | } 141 | .icon-file-text2:before { 142 | content: "\e926"; 143 | } 144 | .icon-file-picture:before { 145 | content: "\e927"; 146 | } 147 | .icon-file-music:before { 148 | content: "\e928"; 149 | } 150 | .icon-file-play:before { 151 | content: "\e929"; 152 | } 153 | .icon-file-video:before { 154 | content: "\e92a"; 155 | } 156 | .icon-file-zip:before { 157 | content: "\e92b"; 158 | } 159 | .icon-copy:before { 160 | content: "\e92c"; 161 | } 162 | .icon-paste:before { 163 | content: "\e92d"; 164 | } 165 | .icon-stack:before { 166 | content: "\e92e"; 167 | } 168 | .icon-folder:before { 169 | content: "\e92f"; 170 | } 171 | .icon-folder-open:before { 172 | content: "\e930"; 173 | } 174 | .icon-folder-plus:before { 175 | content: "\e931"; 176 | } 177 | .icon-folder-minus:before { 178 | content: "\e932"; 179 | } 180 | .icon-folder-download:before { 181 | content: "\e933"; 182 | } 183 | .icon-folder-upload:before { 184 | content: "\e934"; 185 | } 186 | .icon-price-tag:before { 187 | content: "\e935"; 188 | } 189 | .icon-price-tags:before { 190 | content: "\e936"; 191 | } 192 | .icon-barcode:before { 193 | content: "\e937"; 194 | } 195 | .icon-qrcode:before { 196 | content: "\e938"; 197 | } 198 | .icon-ticket:before { 199 | content: "\e939"; 200 | } 201 | .icon-cart:before { 202 | content: "\e93a"; 203 | } 204 | .icon-coin-dollar:before { 205 | content: "\e93b"; 206 | } 207 | .icon-coin-euro:before { 208 | content: "\e93c"; 209 | } 210 | .icon-coin-pound:before { 211 | content: "\e93d"; 212 | } 213 | .icon-coin-yen:before { 214 | content: "\e93e"; 215 | } 216 | .icon-credit-card:before { 217 | content: "\e93f"; 218 | } 219 | .icon-calculator:before { 220 | content: "\e940"; 221 | } 222 | .icon-lifebuoy:before { 223 | content: "\e941"; 224 | } 225 | .icon-phone:before { 226 | content: "\e942"; 227 | } 228 | .icon-phone-hang-up:before { 229 | content: "\e943"; 230 | } 231 | .icon-address-book:before { 232 | content: "\e944"; 233 | } 234 | .icon-envelop:before { 235 | content: "\e945"; 236 | } 237 | .icon-pushpin:before { 238 | content: "\e946"; 239 | } 240 | .icon-location:before { 241 | content: "\e947"; 242 | } 243 | .icon-location2:before { 244 | content: "\e948"; 245 | } 246 | .icon-compass:before { 247 | content: "\e949"; 248 | } 249 | .icon-compass2:before { 250 | content: "\e94a"; 251 | } 252 | .icon-map:before { 253 | content: "\e94b"; 254 | } 255 | .icon-map2:before { 256 | content: "\e94c"; 257 | } 258 | .icon-history:before { 259 | content: "\e94d"; 260 | } 261 | .icon-clock:before { 262 | content: "\e94e"; 263 | } 264 | .icon-clock2:before { 265 | content: "\e94f"; 266 | } 267 | .icon-alarm:before { 268 | content: "\e950"; 269 | } 270 | .icon-bell:before { 271 | content: "\e951"; 272 | } 273 | .icon-stopwatch:before { 274 | content: "\e952"; 275 | } 276 | .icon-calendar:before { 277 | content: "\e953"; 278 | } 279 | .icon-printer:before { 280 | content: "\e954"; 281 | } 282 | .icon-keyboard:before { 283 | content: "\e955"; 284 | } 285 | .icon-display:before { 286 | content: "\e956"; 287 | } 288 | .icon-laptop:before { 289 | content: "\e957"; 290 | } 291 | .icon-mobile:before { 292 | content: "\e958"; 293 | } 294 | .icon-mobile2:before { 295 | content: "\e959"; 296 | } 297 | .icon-tablet:before { 298 | content: "\e95a"; 299 | } 300 | .icon-tv:before { 301 | content: "\e95b"; 302 | } 303 | .icon-drawer:before { 304 | content: "\e95c"; 305 | } 306 | .icon-drawer2:before { 307 | content: "\e95d"; 308 | } 309 | .icon-box-add:before { 310 | content: "\e95e"; 311 | } 312 | .icon-box-remove:before { 313 | content: "\e95f"; 314 | } 315 | .icon-download:before { 316 | content: "\e960"; 317 | } 318 | .icon-upload:before { 319 | content: "\e961"; 320 | } 321 | .icon-floppy-disk:before { 322 | content: "\e962"; 323 | } 324 | .icon-drive:before { 325 | content: "\e963"; 326 | } 327 | .icon-database:before { 328 | content: "\e964"; 329 | } 330 | .icon-undo:before { 331 | content: "\e965"; 332 | } 333 | .icon-redo:before { 334 | content: "\e966"; 335 | } 336 | .icon-undo2:before { 337 | content: "\e967"; 338 | } 339 | .icon-redo2:before { 340 | content: "\e968"; 341 | } 342 | .icon-forward:before { 343 | content: "\e969"; 344 | } 345 | .icon-reply:before { 346 | content: "\e96a"; 347 | } 348 | .icon-bubble:before { 349 | content: "\e96b"; 350 | } 351 | .icon-bubbles:before { 352 | content: "\e96c"; 353 | } 354 | .icon-bubbles2:before { 355 | content: "\e96d"; 356 | } 357 | .icon-bubble2:before { 358 | content: "\e96e"; 359 | } 360 | .icon-bubbles3:before { 361 | content: "\e96f"; 362 | } 363 | .icon-bubbles4:before { 364 | content: "\e970"; 365 | } 366 | .icon-user:before { 367 | content: "\e971"; 368 | } 369 | .icon-users:before { 370 | content: "\e972"; 371 | } 372 | .icon-user-plus:before { 373 | content: "\e973"; 374 | } 375 | .icon-user-minus:before { 376 | content: "\e974"; 377 | } 378 | .icon-user-check:before { 379 | content: "\e975"; 380 | } 381 | .icon-user-tie:before { 382 | content: "\e976"; 383 | } 384 | .icon-quotes-left:before { 385 | content: "\e977"; 386 | } 387 | .icon-quotes-right:before { 388 | content: "\e978"; 389 | } 390 | .icon-hour-glass:before { 391 | content: "\e979"; 392 | } 393 | .icon-spinner:before { 394 | content: "\e97a"; 395 | } 396 | .icon-spinner2:before { 397 | content: "\e97b"; 398 | } 399 | .icon-spinner3:before { 400 | content: "\e97c"; 401 | } 402 | .icon-spinner4:before { 403 | content: "\e97d"; 404 | } 405 | .icon-spinner5:before { 406 | content: "\e97e"; 407 | } 408 | .icon-spinner6:before { 409 | content: "\e97f"; 410 | } 411 | .icon-spinner7:before { 412 | content: "\e980"; 413 | } 414 | .icon-spinner8:before { 415 | content: "\e981"; 416 | } 417 | .icon-spinner9:before { 418 | content: "\e982"; 419 | } 420 | .icon-spinner10:before { 421 | content: "\e983"; 422 | } 423 | .icon-spinner11:before { 424 | content: "\e984"; 425 | } 426 | .icon-binoculars:before { 427 | content: "\e985"; 428 | } 429 | .icon-search:before { 430 | content: "\e986"; 431 | } 432 | .icon-zoom-in:before { 433 | content: "\e987"; 434 | } 435 | .icon-zoom-out:before { 436 | content: "\e988"; 437 | } 438 | .icon-enlarge:before { 439 | content: "\e989"; 440 | } 441 | .icon-shrink:before { 442 | content: "\e98a"; 443 | } 444 | .icon-enlarge2:before { 445 | content: "\e98b"; 446 | } 447 | .icon-shrink2:before { 448 | content: "\e98c"; 449 | } 450 | .icon-key:before { 451 | content: "\e98d"; 452 | } 453 | .icon-key2:before { 454 | content: "\e98e"; 455 | } 456 | .icon-lock:before { 457 | content: "\e98f"; 458 | } 459 | .icon-unlocked:before { 460 | content: "\e990"; 461 | } 462 | .icon-wrench:before { 463 | content: "\e991"; 464 | } 465 | .icon-equalizer:before { 466 | content: "\e992"; 467 | } 468 | .icon-equalizer2:before { 469 | content: "\e993"; 470 | } 471 | .icon-cog:before { 472 | content: "\e994"; 473 | } 474 | .icon-cogs:before { 475 | content: "\e995"; 476 | } 477 | .icon-hammer:before { 478 | content: "\e996"; 479 | } 480 | .icon-magic-wand:before { 481 | content: "\e997"; 482 | } 483 | .icon-aid-kit:before { 484 | content: "\e998"; 485 | } 486 | .icon-bug:before { 487 | content: "\e999"; 488 | } 489 | .icon-pie-chart:before { 490 | content: "\e99a"; 491 | } 492 | .icon-stats-dots:before { 493 | content: "\e99b"; 494 | } 495 | .icon-stats-bars:before { 496 | content: "\e99c"; 497 | } 498 | .icon-stats-bars2:before { 499 | content: "\e99d"; 500 | } 501 | .icon-trophy:before { 502 | content: "\e99e"; 503 | } 504 | .icon-gift:before { 505 | content: "\e99f"; 506 | } 507 | .icon-glass:before { 508 | content: "\e9a0"; 509 | } 510 | .icon-glass2:before { 511 | content: "\e9a1"; 512 | } 513 | .icon-mug:before { 514 | content: "\e9a2"; 515 | } 516 | .icon-spoon-knife:before { 517 | content: "\e9a3"; 518 | } 519 | .icon-leaf:before { 520 | content: "\e9a4"; 521 | } 522 | .icon-rocket:before { 523 | content: "\e9a5"; 524 | } 525 | .icon-meter:before { 526 | content: "\e9a6"; 527 | } 528 | .icon-meter2:before { 529 | content: "\e9a7"; 530 | } 531 | .icon-hammer2:before { 532 | content: "\e9a8"; 533 | } 534 | .icon-fire:before { 535 | content: "\e9a9"; 536 | } 537 | .icon-lab:before { 538 | content: "\e9aa"; 539 | } 540 | .icon-magnet:before { 541 | content: "\e9ab"; 542 | } 543 | .icon-bin:before { 544 | content: "\e9ac"; 545 | } 546 | .icon-bin2:before { 547 | content: "\e9ad"; 548 | } 549 | .icon-briefcase:before { 550 | content: "\e9ae"; 551 | } 552 | .icon-airplane:before { 553 | content: "\e9af"; 554 | } 555 | .icon-truck:before { 556 | content: "\e9b0"; 557 | } 558 | .icon-road:before { 559 | content: "\e9b1"; 560 | } 561 | .icon-accessibility:before { 562 | content: "\e9b2"; 563 | } 564 | .icon-target:before { 565 | content: "\e9b3"; 566 | } 567 | .icon-shield:before { 568 | content: "\e9b4"; 569 | } 570 | .icon-power:before { 571 | content: "\e9b5"; 572 | } 573 | .icon-switch:before { 574 | content: "\e9b6"; 575 | } 576 | .icon-power-cord:before { 577 | content: "\e9b7"; 578 | } 579 | .icon-clipboard:before { 580 | content: "\e9b8"; 581 | } 582 | .icon-list-numbered:before { 583 | content: "\e9b9"; 584 | } 585 | .icon-list:before { 586 | content: "\e9ba"; 587 | } 588 | .icon-list2:before { 589 | content: "\e9bb"; 590 | } 591 | .icon-tree:before { 592 | content: "\e9bc"; 593 | } 594 | .icon-menu:before { 595 | content: "\e9bd"; 596 | } 597 | .icon-menu2:before { 598 | content: "\e9be"; 599 | } 600 | .icon-menu3:before { 601 | content: "\e9bf"; 602 | } 603 | .icon-menu4:before { 604 | content: "\e9c0"; 605 | } 606 | .icon-cloud:before { 607 | content: "\e9c1"; 608 | } 609 | .icon-cloud-download:before { 610 | content: "\e9c2"; 611 | } 612 | .icon-cloud-upload:before { 613 | content: "\e9c3"; 614 | } 615 | .icon-cloud-check:before { 616 | content: "\e9c4"; 617 | } 618 | .icon-download2:before { 619 | content: "\e9c5"; 620 | } 621 | .icon-upload2:before { 622 | content: "\e9c6"; 623 | } 624 | .icon-download3:before { 625 | content: "\e9c7"; 626 | } 627 | .icon-upload3:before { 628 | content: "\e9c8"; 629 | } 630 | .icon-sphere:before { 631 | content: "\e9c9"; 632 | } 633 | .icon-earth:before { 634 | content: "\e9ca"; 635 | } 636 | .icon-link:before { 637 | content: "\e9cb"; 638 | } 639 | .icon-flag:before { 640 | content: "\e9cc"; 641 | } 642 | .icon-attachment:before { 643 | content: "\e9cd"; 644 | } 645 | .icon-eye:before { 646 | content: "\e9ce"; 647 | } 648 | .icon-eye-plus:before { 649 | content: "\e9cf"; 650 | } 651 | .icon-eye-minus:before { 652 | content: "\e9d0"; 653 | } 654 | .icon-eye-blocked:before { 655 | content: "\e9d1"; 656 | } 657 | .icon-bookmark:before { 658 | content: "\e9d2"; 659 | } 660 | .icon-bookmarks:before { 661 | content: "\e9d3"; 662 | } 663 | .icon-sun:before { 664 | content: "\e9d4"; 665 | } 666 | .icon-contrast:before { 667 | content: "\e9d5"; 668 | } 669 | .icon-brightness-contrast:before { 670 | content: "\e9d6"; 671 | } 672 | .icon-star-empty:before { 673 | content: "\e9d7"; 674 | } 675 | .icon-star-half:before { 676 | content: "\e9d8"; 677 | } 678 | .icon-star-full:before { 679 | content: "\e9d9"; 680 | } 681 | .icon-heart:before { 682 | content: "\e9da"; 683 | } 684 | .icon-heart-broken:before { 685 | content: "\e9db"; 686 | } 687 | .icon-man:before { 688 | content: "\e9dc"; 689 | } 690 | .icon-woman:before { 691 | content: "\e9dd"; 692 | } 693 | .icon-man-woman:before { 694 | content: "\e9de"; 695 | } 696 | .icon-happy:before { 697 | content: "\e9df"; 698 | } 699 | .icon-happy2:before { 700 | content: "\e9e0"; 701 | } 702 | .icon-smile:before { 703 | content: "\e9e1"; 704 | } 705 | .icon-smile2:before { 706 | content: "\e9e2"; 707 | } 708 | .icon-tongue:before { 709 | content: "\e9e3"; 710 | } 711 | .icon-tongue2:before { 712 | content: "\e9e4"; 713 | } 714 | .icon-sad:before { 715 | content: "\e9e5"; 716 | } 717 | .icon-sad2:before { 718 | content: "\e9e6"; 719 | } 720 | .icon-wink:before { 721 | content: "\e9e7"; 722 | } 723 | .icon-wink2:before { 724 | content: "\e9e8"; 725 | } 726 | .icon-grin:before { 727 | content: "\e9e9"; 728 | } 729 | .icon-grin2:before { 730 | content: "\e9ea"; 731 | } 732 | .icon-cool:before { 733 | content: "\e9eb"; 734 | } 735 | .icon-cool2:before { 736 | content: "\e9ec"; 737 | } 738 | .icon-angry:before { 739 | content: "\e9ed"; 740 | } 741 | .icon-angry2:before { 742 | content: "\e9ee"; 743 | } 744 | .icon-evil:before { 745 | content: "\e9ef"; 746 | } 747 | .icon-evil2:before { 748 | content: "\e9f0"; 749 | } 750 | .icon-shocked:before { 751 | content: "\e9f1"; 752 | } 753 | .icon-shocked2:before { 754 | content: "\e9f2"; 755 | } 756 | .icon-baffled:before { 757 | content: "\e9f3"; 758 | } 759 | .icon-baffled2:before { 760 | content: "\e9f4"; 761 | } 762 | .icon-confused:before { 763 | content: "\e9f5"; 764 | } 765 | .icon-confused2:before { 766 | content: "\e9f6"; 767 | } 768 | .icon-neutral:before { 769 | content: "\e9f7"; 770 | } 771 | .icon-neutral2:before { 772 | content: "\e9f8"; 773 | } 774 | .icon-hipster:before { 775 | content: "\e9f9"; 776 | } 777 | .icon-hipster2:before { 778 | content: "\e9fa"; 779 | } 780 | .icon-wondering:before { 781 | content: "\e9fb"; 782 | } 783 | .icon-wondering2:before { 784 | content: "\e9fc"; 785 | } 786 | .icon-sleepy:before { 787 | content: "\e9fd"; 788 | } 789 | .icon-sleepy2:before { 790 | content: "\e9fe"; 791 | } 792 | .icon-frustrated:before { 793 | content: "\e9ff"; 794 | } 795 | .icon-frustrated2:before { 796 | content: "\ea00"; 797 | } 798 | .icon-crying:before { 799 | content: "\ea01"; 800 | } 801 | .icon-crying2:before { 802 | content: "\ea02"; 803 | } 804 | .icon-point-up:before { 805 | content: "\ea03"; 806 | } 807 | .icon-point-right:before { 808 | content: "\ea04"; 809 | } 810 | .icon-point-down:before { 811 | content: "\ea05"; 812 | } 813 | .icon-point-left:before { 814 | content: "\ea06"; 815 | } 816 | .icon-warning:before { 817 | content: "\ea07"; 818 | } 819 | .icon-notification:before { 820 | content: "\ea08"; 821 | } 822 | .icon-question:before { 823 | content: "\ea09"; 824 | } 825 | .icon-plus:before { 826 | content: "\ea0a"; 827 | } 828 | .icon-minus:before { 829 | content: "\ea0b"; 830 | } 831 | .icon-info:before { 832 | content: "\ea0c"; 833 | } 834 | .icon-cancel-circle:before { 835 | content: "\ea0d"; 836 | } 837 | .icon-blocked:before { 838 | content: "\ea0e"; 839 | } 840 | .icon-cross:before { 841 | content: "\ea0f"; 842 | } 843 | .icon-checkmark:before { 844 | content: "\ea10"; 845 | } 846 | .icon-checkmark2:before { 847 | content: "\ea11"; 848 | } 849 | .icon-spell-check:before { 850 | content: "\ea12"; 851 | } 852 | .icon-enter:before { 853 | content: "\ea13"; 854 | } 855 | .icon-exit:before { 856 | content: "\ea14"; 857 | } 858 | .icon-play2:before { 859 | content: "\ea15"; 860 | } 861 | .icon-pause:before { 862 | content: "\ea16"; 863 | } 864 | .icon-stop:before { 865 | content: "\ea17"; 866 | } 867 | .icon-previous:before { 868 | content: "\ea18"; 869 | } 870 | .icon-next:before { 871 | content: "\ea19"; 872 | } 873 | .icon-backward:before { 874 | content: "\ea1a"; 875 | } 876 | .icon-forward2:before { 877 | content: "\ea1b"; 878 | } 879 | .icon-play3:before { 880 | content: "\ea1c"; 881 | } 882 | .icon-pause2:before { 883 | content: "\ea1d"; 884 | } 885 | .icon-stop2:before { 886 | content: "\ea1e"; 887 | } 888 | .icon-backward2:before { 889 | content: "\ea1f"; 890 | } 891 | .icon-forward3:before { 892 | content: "\ea20"; 893 | } 894 | .icon-first:before { 895 | content: "\ea21"; 896 | } 897 | .icon-last:before { 898 | content: "\ea22"; 899 | } 900 | .icon-previous2:before { 901 | content: "\ea23"; 902 | } 903 | .icon-next2:before { 904 | content: "\ea24"; 905 | } 906 | .icon-eject:before { 907 | content: "\ea25"; 908 | } 909 | .icon-volume-high:before { 910 | content: "\ea26"; 911 | } 912 | .icon-volume-medium:before { 913 | content: "\ea27"; 914 | } 915 | .icon-volume-low:before { 916 | content: "\ea28"; 917 | } 918 | .icon-volume-mute:before { 919 | content: "\ea29"; 920 | } 921 | .icon-volume-mute2:before { 922 | content: "\ea2a"; 923 | } 924 | .icon-volume-increase:before { 925 | content: "\ea2b"; 926 | } 927 | .icon-volume-decrease:before { 928 | content: "\ea2c"; 929 | } 930 | .icon-loop:before { 931 | content: "\ea2d"; 932 | } 933 | .icon-loop2:before { 934 | content: "\ea2e"; 935 | } 936 | .icon-infinite:before { 937 | content: "\ea2f"; 938 | } 939 | .icon-shuffle:before { 940 | content: "\ea30"; 941 | } 942 | .icon-arrow-up-left:before { 943 | content: "\ea31"; 944 | } 945 | .icon-arrow-up:before { 946 | content: "\ea32"; 947 | } 948 | .icon-arrow-up-right:before { 949 | content: "\ea33"; 950 | } 951 | .icon-arrow-right:before { 952 | content: "\ea34"; 953 | } 954 | .icon-arrow-down-right:before { 955 | content: "\ea35"; 956 | } 957 | .icon-arrow-down:before { 958 | content: "\ea36"; 959 | } 960 | .icon-arrow-down-left:before { 961 | content: "\ea37"; 962 | } 963 | .icon-arrow-left:before { 964 | content: "\ea38"; 965 | } 966 | .icon-arrow-up-left2:before { 967 | content: "\ea39"; 968 | } 969 | .icon-arrow-up2:before { 970 | content: "\ea3a"; 971 | } 972 | .icon-arrow-up-right2:before { 973 | content: "\ea3b"; 974 | } 975 | .icon-arrow-right2:before { 976 | content: "\ea3c"; 977 | } 978 | .icon-arrow-down-right2:before { 979 | content: "\ea3d"; 980 | } 981 | .icon-arrow-down2:before { 982 | content: "\ea3e"; 983 | } 984 | .icon-arrow-down-left2:before { 985 | content: "\ea3f"; 986 | } 987 | .icon-arrow-left2:before { 988 | content: "\ea40"; 989 | } 990 | .icon-circle-up:before { 991 | content: "\ea41"; 992 | } 993 | .icon-circle-right:before { 994 | content: "\ea42"; 995 | } 996 | .icon-circle-down:before { 997 | content: "\ea43"; 998 | } 999 | .icon-circle-left:before { 1000 | content: "\ea44"; 1001 | } 1002 | .icon-tab:before { 1003 | content: "\ea45"; 1004 | } 1005 | .icon-move-up:before { 1006 | content: "\ea46"; 1007 | } 1008 | .icon-move-down:before { 1009 | content: "\ea47"; 1010 | } 1011 | .icon-sort-alpha-asc:before { 1012 | content: "\ea48"; 1013 | } 1014 | .icon-sort-alpha-desc:before { 1015 | content: "\ea49"; 1016 | } 1017 | .icon-sort-numeric-asc:before { 1018 | content: "\ea4a"; 1019 | } 1020 | .icon-sort-numberic-desc:before { 1021 | content: "\ea4b"; 1022 | } 1023 | .icon-sort-amount-asc:before { 1024 | content: "\ea4c"; 1025 | } 1026 | .icon-sort-amount-desc:before { 1027 | content: "\ea4d"; 1028 | } 1029 | .icon-command:before { 1030 | content: "\ea4e"; 1031 | } 1032 | .icon-shift:before { 1033 | content: "\ea4f"; 1034 | } 1035 | .icon-ctrl:before { 1036 | content: "\ea50"; 1037 | } 1038 | .icon-opt:before { 1039 | content: "\ea51"; 1040 | } 1041 | .icon-checkbox-checked:before { 1042 | content: "\ea52"; 1043 | } 1044 | .icon-checkbox-unchecked:before { 1045 | content: "\ea53"; 1046 | } 1047 | .icon-radio-checked:before { 1048 | content: "\ea54"; 1049 | } 1050 | .icon-radio-checked2:before { 1051 | content: "\ea55"; 1052 | } 1053 | .icon-radio-unchecked:before { 1054 | content: "\ea56"; 1055 | } 1056 | .icon-crop:before { 1057 | content: "\ea57"; 1058 | } 1059 | .icon-make-group:before { 1060 | content: "\ea58"; 1061 | } 1062 | .icon-ungroup:before { 1063 | content: "\ea59"; 1064 | } 1065 | .icon-scissors:before { 1066 | content: "\ea5a"; 1067 | } 1068 | .icon-filter:before { 1069 | content: "\ea5b"; 1070 | } 1071 | .icon-font:before { 1072 | content: "\ea5c"; 1073 | } 1074 | .icon-ligature:before { 1075 | content: "\ea5d"; 1076 | } 1077 | .icon-ligature2:before { 1078 | content: "\ea5e"; 1079 | } 1080 | .icon-text-height:before { 1081 | content: "\ea5f"; 1082 | } 1083 | .icon-text-width:before { 1084 | content: "\ea60"; 1085 | } 1086 | .icon-font-size:before { 1087 | content: "\ea61"; 1088 | } 1089 | .icon-bold:before { 1090 | content: "\ea62"; 1091 | } 1092 | .icon-underline:before { 1093 | content: "\ea63"; 1094 | } 1095 | .icon-italic:before { 1096 | content: "\ea64"; 1097 | } 1098 | .icon-strikethrough:before { 1099 | content: "\ea65"; 1100 | } 1101 | .icon-omega:before { 1102 | content: "\ea66"; 1103 | } 1104 | .icon-sigma:before { 1105 | content: "\ea67"; 1106 | } 1107 | .icon-page-break:before { 1108 | content: "\ea68"; 1109 | } 1110 | .icon-superscript:before { 1111 | content: "\ea69"; 1112 | } 1113 | .icon-subscript:before { 1114 | content: "\ea6a"; 1115 | } 1116 | .icon-superscript2:before { 1117 | content: "\ea6b"; 1118 | } 1119 | .icon-subscript2:before { 1120 | content: "\ea6c"; 1121 | } 1122 | .icon-text-color:before { 1123 | content: "\ea6d"; 1124 | } 1125 | .icon-pagebreak:before { 1126 | content: "\ea6e"; 1127 | } 1128 | .icon-clear-formatting:before { 1129 | content: "\ea6f"; 1130 | } 1131 | .icon-table:before { 1132 | content: "\ea70"; 1133 | } 1134 | .icon-table2:before { 1135 | content: "\ea71"; 1136 | } 1137 | .icon-insert-template:before { 1138 | content: "\ea72"; 1139 | } 1140 | .icon-pilcrow:before { 1141 | content: "\ea73"; 1142 | } 1143 | .icon-ltr:before { 1144 | content: "\ea74"; 1145 | } 1146 | .icon-rtl:before { 1147 | content: "\ea75"; 1148 | } 1149 | .icon-section:before { 1150 | content: "\ea76"; 1151 | } 1152 | .icon-paragraph-left:before { 1153 | content: "\ea77"; 1154 | } 1155 | .icon-paragraph-center:before { 1156 | content: "\ea78"; 1157 | } 1158 | .icon-paragraph-right:before { 1159 | content: "\ea79"; 1160 | } 1161 | .icon-paragraph-justify:before { 1162 | content: "\ea7a"; 1163 | } 1164 | .icon-indent-increase:before { 1165 | content: "\ea7b"; 1166 | } 1167 | .icon-indent-decrease:before { 1168 | content: "\ea7c"; 1169 | } 1170 | .icon-share:before { 1171 | content: "\ea7d"; 1172 | } 1173 | .icon-new-tab:before { 1174 | content: "\ea7e"; 1175 | } 1176 | .icon-embed:before { 1177 | content: "\ea7f"; 1178 | } 1179 | .icon-embed2:before { 1180 | content: "\ea80"; 1181 | } 1182 | .icon-terminal:before { 1183 | content: "\ea81"; 1184 | } 1185 | .icon-share2:before { 1186 | content: "\ea82"; 1187 | } 1188 | .icon-mail:before { 1189 | content: "\ea83"; 1190 | } 1191 | .icon-mail2:before { 1192 | content: "\ea84"; 1193 | } 1194 | .icon-mail3:before { 1195 | content: "\ea85"; 1196 | } 1197 | .icon-mail4:before { 1198 | content: "\ea86"; 1199 | } 1200 | .icon-amazon:before { 1201 | content: "\ea87"; 1202 | } 1203 | .icon-google:before { 1204 | content: "\ea88"; 1205 | } 1206 | .icon-google2:before { 1207 | content: "\ea89"; 1208 | } 1209 | .icon-google3:before { 1210 | content: "\ea8a"; 1211 | } 1212 | .icon-google-plus:before { 1213 | content: "\ea8b"; 1214 | } 1215 | .icon-google-plus2:before { 1216 | content: "\ea8c"; 1217 | } 1218 | .icon-google-plus3:before { 1219 | content: "\ea8d"; 1220 | } 1221 | .icon-hangouts:before { 1222 | content: "\ea8e"; 1223 | } 1224 | .icon-google-drive:before { 1225 | content: "\ea8f"; 1226 | } 1227 | .icon-facebook:before { 1228 | content: "\ea90"; 1229 | } 1230 | .icon-facebook2:before { 1231 | content: "\ea91"; 1232 | } 1233 | .icon-instagram:before { 1234 | content: "\ea92"; 1235 | } 1236 | .icon-whatsapp:before { 1237 | content: "\ea93"; 1238 | } 1239 | .icon-spotify:before { 1240 | content: "\ea94"; 1241 | } 1242 | .icon-telegram:before { 1243 | content: "\ea95"; 1244 | } 1245 | .icon-twitter:before { 1246 | content: "\ea96"; 1247 | } 1248 | .icon-vine:before { 1249 | content: "\ea97"; 1250 | } 1251 | .icon-vk:before { 1252 | content: "\ea98"; 1253 | } 1254 | .icon-renren:before { 1255 | content: "\ea99"; 1256 | } 1257 | .icon-sina-weibo:before { 1258 | content: "\ea9a"; 1259 | } 1260 | .icon-rss:before { 1261 | content: "\ea9b"; 1262 | } 1263 | .icon-rss2:before { 1264 | content: "\ea9c"; 1265 | } 1266 | .icon-youtube:before { 1267 | content: "\ea9d"; 1268 | } 1269 | .icon-youtube2:before { 1270 | content: "\ea9e"; 1271 | } 1272 | .icon-twitch:before { 1273 | content: "\ea9f"; 1274 | } 1275 | .icon-vimeo:before { 1276 | content: "\eaa0"; 1277 | } 1278 | .icon-vimeo2:before { 1279 | content: "\eaa1"; 1280 | } 1281 | .icon-lanyrd:before { 1282 | content: "\eaa2"; 1283 | } 1284 | .icon-flickr:before { 1285 | content: "\eaa3"; 1286 | } 1287 | .icon-flickr2:before { 1288 | content: "\eaa4"; 1289 | } 1290 | .icon-flickr3:before { 1291 | content: "\eaa5"; 1292 | } 1293 | .icon-flickr4:before { 1294 | content: "\eaa6"; 1295 | } 1296 | .icon-dribbble:before { 1297 | content: "\eaa7"; 1298 | } 1299 | .icon-behance:before { 1300 | content: "\eaa8"; 1301 | } 1302 | .icon-behance2:before { 1303 | content: "\eaa9"; 1304 | } 1305 | .icon-deviantart:before { 1306 | content: "\eaaa"; 1307 | } 1308 | .icon-500px:before { 1309 | content: "\eaab"; 1310 | } 1311 | .icon-steam:before { 1312 | content: "\eaac"; 1313 | } 1314 | .icon-steam2:before { 1315 | content: "\eaad"; 1316 | } 1317 | .icon-dropbox:before { 1318 | content: "\eaae"; 1319 | } 1320 | .icon-onedrive:before { 1321 | content: "\eaaf"; 1322 | } 1323 | .icon-github:before { 1324 | content: "\eab0"; 1325 | } 1326 | .icon-npm:before { 1327 | content: "\eab1"; 1328 | } 1329 | .icon-basecamp:before { 1330 | content: "\eab2"; 1331 | } 1332 | .icon-trello:before { 1333 | content: "\eab3"; 1334 | } 1335 | .icon-wordpress:before { 1336 | content: "\eab4"; 1337 | } 1338 | .icon-joomla:before { 1339 | content: "\eab5"; 1340 | } 1341 | .icon-ello:before { 1342 | content: "\eab6"; 1343 | } 1344 | .icon-blogger:before { 1345 | content: "\eab7"; 1346 | } 1347 | .icon-blogger2:before { 1348 | content: "\eab8"; 1349 | } 1350 | .icon-tumblr:before { 1351 | content: "\eab9"; 1352 | } 1353 | .icon-tumblr2:before { 1354 | content: "\eaba"; 1355 | } 1356 | .icon-yahoo:before { 1357 | content: "\eabb"; 1358 | } 1359 | .icon-yahoo2:before { 1360 | content: "\eabc"; 1361 | } 1362 | .icon-tux:before { 1363 | content: "\eabd"; 1364 | } 1365 | .icon-appleinc:before { 1366 | content: "\eabe"; 1367 | } 1368 | .icon-finder:before { 1369 | content: "\eabf"; 1370 | } 1371 | .icon-android:before { 1372 | content: "\eac0"; 1373 | } 1374 | .icon-windows:before { 1375 | content: "\eac1"; 1376 | } 1377 | .icon-windows8:before { 1378 | content: "\eac2"; 1379 | } 1380 | .icon-soundcloud:before { 1381 | content: "\eac3"; 1382 | } 1383 | .icon-soundcloud2:before { 1384 | content: "\eac4"; 1385 | } 1386 | .icon-skype:before { 1387 | content: "\eac5"; 1388 | } 1389 | .icon-reddit:before { 1390 | content: "\eac6"; 1391 | } 1392 | .icon-hackernews:before { 1393 | content: "\eac7"; 1394 | } 1395 | .icon-wikipedia:before { 1396 | content: "\eac8"; 1397 | } 1398 | .icon-linkedin:before { 1399 | content: "\eac9"; 1400 | } 1401 | .icon-linkedin2:before { 1402 | content: "\eaca"; 1403 | } 1404 | .icon-lastfm:before { 1405 | content: "\eacb"; 1406 | } 1407 | .icon-lastfm2:before { 1408 | content: "\eacc"; 1409 | } 1410 | .icon-delicious:before { 1411 | content: "\eacd"; 1412 | } 1413 | .icon-stumbleupon:before { 1414 | content: "\eace"; 1415 | } 1416 | .icon-stumbleupon2:before { 1417 | content: "\eacf"; 1418 | } 1419 | .icon-stackoverflow:before { 1420 | content: "\ead0"; 1421 | } 1422 | .icon-pinterest:before { 1423 | content: "\ead1"; 1424 | } 1425 | .icon-pinterest2:before { 1426 | content: "\ead2"; 1427 | } 1428 | .icon-xing:before { 1429 | content: "\ead3"; 1430 | } 1431 | .icon-xing2:before { 1432 | content: "\ead4"; 1433 | } 1434 | .icon-flattr:before { 1435 | content: "\ead5"; 1436 | } 1437 | .icon-foursquare:before { 1438 | content: "\ead6"; 1439 | } 1440 | .icon-yelp:before { 1441 | content: "\ead7"; 1442 | } 1443 | .icon-paypal:before { 1444 | content: "\ead8"; 1445 | } 1446 | .icon-chrome:before { 1447 | content: "\ead9"; 1448 | } 1449 | .icon-firefox:before { 1450 | content: "\eada"; 1451 | } 1452 | .icon-IE:before { 1453 | content: "\eadb"; 1454 | } 1455 | .icon-edge:before { 1456 | content: "\eadc"; 1457 | } 1458 | .icon-safari:before { 1459 | content: "\eadd"; 1460 | } 1461 | .icon-opera:before { 1462 | content: "\eade"; 1463 | } 1464 | .icon-file-pdf:before { 1465 | content: "\eadf"; 1466 | } 1467 | .icon-file-openoffice:before { 1468 | content: "\eae0"; 1469 | } 1470 | .icon-file-word:before { 1471 | content: "\eae1"; 1472 | } 1473 | .icon-file-excel:before { 1474 | content: "\eae2"; 1475 | } 1476 | .icon-libreoffice:before { 1477 | content: "\eae3"; 1478 | } 1479 | .icon-html-five:before { 1480 | content: "\eae4"; 1481 | } 1482 | .icon-html-five2:before { 1483 | content: "\eae5"; 1484 | } 1485 | .icon-css3:before { 1486 | content: "\eae6"; 1487 | } 1488 | .icon-git:before { 1489 | content: "\eae7"; 1490 | } 1491 | .icon-codepen:before { 1492 | content: "\eae8"; 1493 | } 1494 | .icon-svg:before { 1495 | content: "\eae9"; 1496 | } 1497 | .icon-IcoMoon:before { 1498 | content: "\eaea"; 1499 | } 1500 | -------------------------------------------------------------------------------- /src/components/address/address-detail/address-detail.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 121 | 122 | 244 | -------------------------------------------------------------------------------- /src/components/address/address-detail/address-more/address-more.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 38 | 39 | -------------------------------------------------------------------------------- /src/components/address/address.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 538 | 539 | 593 | -------------------------------------------------------------------------------- /src/components/chat/chat.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 133 | 134 | -------------------------------------------------------------------------------- /src/components/chatroom/chatroom-user/chatroom-user.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 89 | 90 | 184 | -------------------------------------------------------------------------------- /src/components/chatroom/chatroom.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 151 | 152 | -------------------------------------------------------------------------------- /src/components/find/find.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 75 | 76 | 109 | -------------------------------------------------------------------------------- /src/components/find/friend-circle/friend-circle.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 149 | 150 | 272 | -------------------------------------------------------------------------------- /src/components/find/scan/scan.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 54 | 55 | 141 | -------------------------------------------------------------------------------- /src/components/find/scan/扫一扫.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/find/scan/扫一扫.png -------------------------------------------------------------------------------- /src/components/find/shake/shake.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 54 | 55 | 141 | -------------------------------------------------------------------------------- /src/components/find/shake/摇一摇.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/find/shake/摇一摇.png -------------------------------------------------------------------------------- /src/components/me/album/album.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 154 | 155 | 277 | -------------------------------------------------------------------------------- /src/components/me/card/card.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 92 | 93 | 215 | -------------------------------------------------------------------------------- /src/components/me/collection/collection.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 140 | 141 | 263 | -------------------------------------------------------------------------------- /src/components/me/me.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 117 | 118 | 216 | -------------------------------------------------------------------------------- /src/components/me/money/money.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 118 | 119 | 241 | -------------------------------------------------------------------------------- /src/components/me/money/收付款.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/me/money/收付款.png -------------------------------------------------------------------------------- /src/components/me/money/银行卡.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/me/money/银行卡.png -------------------------------------------------------------------------------- /src/components/me/money/零钱.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/me/money/零钱.png -------------------------------------------------------------------------------- /src/components/me/set/set.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 123 | 124 | 232 | -------------------------------------------------------------------------------- /src/components/plus/plus.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 62 | 63 | 112 | -------------------------------------------------------------------------------- /src/components/plus/发起群聊.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/plus/发起群聊.png -------------------------------------------------------------------------------- /src/components/plus/帮助.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/plus/帮助.png -------------------------------------------------------------------------------- /src/components/plus/扫一扫.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/plus/扫一扫.png -------------------------------------------------------------------------------- /src/components/plus/收付款.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/plus/收付款.png -------------------------------------------------------------------------------- /src/components/plus/添加朋友.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/components/plus/添加朋友.png -------------------------------------------------------------------------------- /src/components/search/search.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 85 | 86 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import MintUI from 'mint-ui' 3 | import 'mint-ui/lib/style.css' 4 | import App from './App' 5 | import router from './router' 6 | import store from './store' 7 | import VueLazyLoad from 'vue-lazyload' 8 | import VueResource from 'vue-resource' 9 | 10 | import './common/style.css' // 这里需要引入基本的样式 11 | 12 | // /* eslint-disable no-unused-vars */ // 这一句必须写，用来规避ES6的语法检测 13 | // import vConsole from 'vconsole' // 针对手机网页的前端 console 调试面板 14 | // console.log('test') 15 | 16 | Vue.use(MintUI) 17 | 18 | Vue.use(VueLazyLoad, { 19 | loading: require('./assets/lazy.png') 20 | }) 21 | 22 | Vue.use(VueResource) 23 | 24 | Vue.config.productionTip = false 25 | 26 | /* eslint-disable no-new */ 27 | new Vue({ 28 | el: '#app', 29 | router, 30 | store, 31 | render: h => h(App) 32 | }) 33 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import Chat from '../components/chat/chat' 4 | import Address from '../components/address/address' 5 | import Find from '../components/find/find' 6 | import Me from '../components/me/me' 7 | import Chatroom from '../components/chatroom/chatroom' 8 | import Search from '../components/search/search' 9 | import AddressDetail from '../components/address/address-detail/address-detail' 10 | import FriendCircle from '../components/find/friend-circle/friend-circle' 11 | import Scan from '../components/find/scan/scan' 12 | import Shake from '../components/find/shake/shake' 13 | import ChatroomUser from '../components/chatroom/chatroom-user/chatroom-user' 14 | import AddressMore from '../components/address/address-detail/address-more/address-more' 15 | import Money from '../components/me/money/money' 16 | import Collection from '../components/me/collection/collection' 17 | import Album from '../components/me/album/album' 18 | import Card from '../components/me/card/card' 19 | import Set from '../components/me/set/set' 20 | 21 | Vue.use(Router) 22 | 23 | export default new Router({ 24 | routes: [ 25 | { 26 | path: '/', 27 | redirect: '/chat' 28 | }, 29 | { 30 | path: '/search', 31 | component: Search 32 | }, 33 | { 34 | path: '/chatroom', // 聊天打字界面 35 | component: Chatroom, 36 | children: [ 37 | { 38 | path: 'user', 39 | component: ChatroomUser 40 | } 41 | ] 42 | }, 43 | { 44 | path: '/chat', // 第一栏：微信 45 | component: Chat 46 | }, 47 | { 48 | path: '/address', // 第二栏：通讯录 49 | component: Address, 50 | children: [ 51 | { 52 | path: ':id', // 传入不同的id,就可以跳转到不同的子路由 53 | component: AddressDetail, 54 | children: [ 55 | { 56 | path: 'more', 57 | component: AddressMore 58 | } 59 | ] 60 | } 61 | ] 62 | }, 63 | { 64 | path: '/find', // 第三栏：发现 65 | component: Find, 66 | children: [ 67 | { 68 | path: 'friendcircle', 69 | component: FriendCircle 70 | }, 71 | { 72 | path: 'scan', 73 | component: Scan 74 | }, 75 | { 76 | path: 'shake', 77 | component: Shake 78 | } 79 | ] 80 | }, 81 | { 82 | path: '/me', // 第四栏：我 83 | component: Me, 84 | children: [ 85 | { 86 | path: 'money', 87 | component: Money 88 | }, 89 | { 90 | path: 'collection', 91 | component: Collection 92 | }, 93 | { 94 | path: 'album', 95 | component: Album 96 | }, 97 | { 98 | path: 'card', 99 | component: Card 100 | }, 101 | { 102 | path: 'set', 103 | component: Set 104 | } 105 | ] 106 | } 107 | ] 108 | }) 109 | -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/src/store/actions.js -------------------------------------------------------------------------------- /src/store/getters.js: -------------------------------------------------------------------------------- 1 | export const info = state => state.info 2 | 3 | export const addList = state => state.addList 4 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | // 把store下的所有文件全部import进来“import * as”是一种特殊语法 5 | import * as actions from './actions' 6 | import * as getters from './getters' 7 | import state from './state' 8 | import mutations from './mutations' 9 | import createLogger from 'vuex/dist/logger' // vuex的插件，可在控制台打印一个log日志，显示state做了哪些修改 10 | 11 | Vue.use(Vuex) // 注册插件vuex 12 | 13 | const debug = process.env.NODE_ENV !== 'production' // 开发时使用的模式，上线时就不用了 14 | 15 | export default new Vuex.Store({ 16 | actions, 17 | getters, 18 | state, 19 | mutations, 20 | strict: debug, 21 | plugins: debug ? [createLogger()] : [] 22 | }) 23 | -------------------------------------------------------------------------------- /src/store/mutation-types.js: -------------------------------------------------------------------------------- 1 | export const SET_INFO = 'SET_INFO' 2 | export const SET_ADDLIST = 'SET_ADDLIST' 3 | -------------------------------------------------------------------------------- /src/store/mutations.js: -------------------------------------------------------------------------------- 1 | import * as types from './mutation-types' // 从mutation-types中拿到定义的常量 2 | 3 | // mutations可以看做一个对象，里面有一些方法 4 | // 通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。 5 | // 里面这些方法的名字为：types.SET_SINGER等。。。 6 | const mutations = { 7 | // 下面是types.SET_SINGER方法，有两个参数，一个参数state是当前的状态，第二个是提交mutations时传的参数 8 | [types.SET_INFO] (state, info) { 9 | state.info = info 10 | }, 11 | [types.SET_ADDLIST] (state, addList) { 12 | state.addList.unshift(addList) // 将点击的联系人添加到首页的开始部位 13 | } 14 | } 15 | 16 | export default mutations 17 | -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | const state = { // 定义state, 其中info为每个联系人的信息；addList为每向一个联系人发消息后，都在首页增加一个联系人 2 | info: {}, 3 | addList: [] 4 | } 5 | 6 | export default state // 传出state 7 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caochangkui/wechat-by-vue/4b43d4c9c710f0e986412a7bbca6865cc3e9f6f2/static/.gitkeep --------------------------------------------------------------------------------