vue 仿QQ 开发流程
2024-10-19 14:44:08
技术客栈:
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
最新文章
- 常用C#关键字详解教程
- Java_Swing程序设计_尝试开发一个登陆窗体,包括用户名、密码以及提交按钮和重置按钮,当用户输入用户名my,密码love时,弹出登陆成功提示对话框。
- 《C++primer》v5 第6章 函数 读书笔记 习题答案
- SpringMVC框架的工作原理
- 解决(空密码的root)提示修改phpmyadmin用户密码
- Deep Learning 13_深度学习UFLDL教程:Independent Component Analysis_Exercise(斯坦福大学深度学习教程)
- Redis的主从同步复制
- C和指针笔记 3.6链接属性
- 【POJ3294】 Life Forms (后缀数组+二分)
- laravel4通过控制视图模板路劲来动态切换主题
- js中实现继承的几种方式
- APP网络测试要点和弱网模拟
- HUST 1555 A Math Homework
- 配置ubuntu网络
- laravel框架基础知识点
- May 26. 2018 Week 21st Saturday
- React Native之微信分享(iOS Android)
- 在 CentOS 上编写 init.d service script [转]
- JAVA框架 Spring 注解注入
- 并发批量管理500台以上服务器脚本分享(shell版)