本章节主要使用于新手了解vue,快速的用vue-cli进行搭建项目,实例涉及以下部分内容。学习就是日积月累的过程，做好笔记，每一天都在进步，给自己加油。
content.png
nodejs环境安装
官网地址:https://nodejs.org/en/
安装好nodejs后，自动安装好了npm包管理工具
利用vue-cli来初始化我们的项目
//全局安装webpack
npm install -g webpack
//安装vue-cli
npm install -g vue-cli
//使用vue-cli初始化项目
vue init webpack my-project
//进入到目录
cd my-project
//安装依赖
npm install
//运行
npm run dev
vue-cli目录结构:
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
页面入口文件App.vue
<template>
<div id="app">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
新建header.vue
<template>
<header>
<div class="active">互动区</div>
<div>列表</div>
<div>简介</div>
</header>
</template>
<script>
export default {
data () {
return {
}
},
components: {
}
}
</script>
<style scoped>
header{display: flex;height: .48rem;line-height: .48rem;border-bottom: .01rem solid #eee;position: absolute;top: 0;left: 0;z-index: 1;width: 100%;background: #c60000;color: #fff;}
header div{flex: 2;display: block;width: 100%;font-weight: bold;}
header div.active{font-size: .2rem}
</style>
新建footer.vue
<template>
<footer>
<input type="text">
<span>发送</span>
</footer>
</template>
<script>
export default {
data () {
return {
}
},
components: {
}
}
</script>
<style scoped="">
footer{position: absolute;bottom: 0;left: 0;width: 100%;z-index: 1;background: #eaeaea;text-align: left;padding: 0 .1rem;padding: .08rem .8rem .08rem .1rem;}
footer span{background: #c60000;color: #fff;height: .32rem;line-height: .32rem;display: block;width: .6rem;border-radius: .04rem;text-align: center;position: absolute;right: .1rem;top: .08rem;}
footer input{height: .32rem;border: .01rem solid #acacac;border-radius: .04rem;padding: 0 .1rem;width:100%;}
</style>
使用vue-awesome-swiper导航切换
vue-aswsome-swiper github地址：https://github.com/surmon-china/vue-awesome-swiper
html5原生websocket
var url = "ws:nio.smartlifein.com:80";
//建立websocket连接
var io = new WebSocket(url);
io.onopen = function(){
console.log("连接成功");
};
//连接错误
io.onerror = function(e){
console.log(e);
};
//推送消息
io.onmessage = function(data){
console.log(data);
};
//关闭连接
io.onclose = function(){
}
