vue-cli创建项目

vue学习资料

Vue.js官网（https://vuejs.org.cn/）

Vue-cli (https://github.com/vuejs/vue-cli)

Vue-rescource (https//github.com/vuejs/vue-rescource)

Vue-router (https://github.com/vuejs/vue-router)

better-scroll (https://github.com/ustbhuangyi/

webpack官网(http://webpack.github.io/

Stylus中文文档(http://www.zhangxinxu.com/

es6入门学习 (http://es6.ruanyifeng.com/

eslint规则 （http://eslint.org/docs/rules/）

设备像素比(http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/）

flex布局（阮一峰）

贝塞尔曲线测试（http://cubic-bezier.com）

1.node.js安装

http://nodejs.cn/进去该网站下载最新版本的node

检查node是否安装成功

node -v

2.node安装完成，自带npm，可以检查npm是否已经安装

npm -v

3.安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.安装webpack

cnpm install webpack -g

查看npm是否安装完成

cnpm webpack -v

5.安装vue-cli脚手架

npm install vue-cli -g

查看vue-cli是否安装成功

npm vue-cli -v

6.创建项目

vue init webpack 项目名

7.安装依赖

第一步：进入项目文件夹  cd  项目名

第二步：cnpm i

8.安装vue路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

9.运行项目

cnpm run dev

 

实例功能简述：

1.创建首页

因为是web端的，所以首先在index.html中加入meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

1.1新建目录

方便管理，我们在src文件夹下新建一个views文件夹，用于存放所有的模块组件

在views文件夹下新建index文件夹，在index文件夹下新建index.vue作为项目的首页

                                        

1.2编辑首页index.vue

<template><div>欢迎来到人员管理系统</div>
</template>

接着路由配置文件index.js引入首页index.vue，并更改路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
//导入模块
import Index from '../views/index/index'Vue.use(Router)//配置路由
export default new Router({routes: [{path: '/',name: 'Index',component: Index}]
})

2.添加底部导航组件

因为底部导航组件是公共组件，所以在components文件夹下建一个footer.vue文件

<template><div class="footer fixed"><ul><li><router-link to='/'>首页</router-link></li><li><router-link to='/manage'>人员管理</router-link></li></ul></div>
</template><style scoped>li a{display:inline-block;width:100%;height:100%;}.footer{width:100%;height:50px;bottom:0;}ul{display:flex;height:100%;line-height:50px;}ul li{flex:1;background-color:#f1f1f1}.isIndex li:first-child{background-color:#d3d3d3;}.isIndex li:first-child a{color:#41b883;}.isManage li:last-child{background-color:#d3d3d3;}.isManage li:last-child a{color:#41b883;}
</style>

div的fixed样式写在了公共样式public.css里面，并在App.vue中引入

                                 

*{padding:0;margin:0;}
ul li{list-style:none;}
a{text-decoration: none;color: #000;}
.fixed{position:fixed;}
.tc{text-align:center;}

在app.vue文件的style里面引入@import './assets/css/public.css';

（1）<router-link>

可以看到footer.vue使用了<router-link>标签，该标签主要实现跳转链接功能，属性to='/'即是跳转到path为'/'的路径

（2）scoped

在<style>标签上添加scoped，声明作用域，样式效果只在该页面内生效，不污染全局

3.在首页中引入底部导航组件

<template><div>欢迎来到人员管理系统<footer-nav></footer-nav></div>
</template><script>import FooterNav from '../../components/footer.vue'export default{components: {FooterNav}}
</script>

使用组件步骤：

（1）引入组件  import FooterNav from '../../components/footer.vue'

（2）局部注册  注意写在export default内部，components:{FooterNav}

（3）使用组件  <footer-nav></footer-nav> 注意命名，驼峰法定义的组件FooterNav需在使用时用短横线连接<footer-nav>

4.创建人员管理页面

同样的，因为人员管理可以算另外一个模块，所以我们在src/views/新建一个文件夹manage，再在manage文件夹下新建index.vue

同样在页面引入底部导航组件footer.vue

<template><div class="manage tc"><button class="add">新增</button><div class="input-area"><input type="text" placeholder="请输入人员姓名" class="input"><button class="sure">确定</button></div><table><tr><th>姓名</th><th>操作</th></tr><tr><td>张三</td><td v-bind:id="index"><span>编辑</span><span>删除</span></td></tr></table><footer-nav></footer-nav></div>
</template>

4.2为底部导航绑定class

为底部切换时绑定class，使切换状态更加明显

在首页使用<foot-nav>时绑定class类名isIndex

<template>
<div>
欢迎来到人员管理系统
<footer-nav v-bind:class="{'isIndex':isNowPage}"></footer-nav>
</div>
</template><script>
import FooterNav from '../../components/footer.vue'
export default{components: {FooterNav},data(){return{isNowPage:true}　　}
}
</script>

这里使用v-bind指令来绑定class，第一个属性为class名字，第二个属性为布尔值，为true，则表示该组件有这个class，为false则没有。所以，当访问首页模块时，底部导航有一个类名isIndex，我们可以在底部导航内部为isIndex设置样式。

同样的，也在管理页面manage.vue为底部导航绑定class isManage。

 vue项目中常用技巧

1.keep-alive

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

<keep-alive><router-view :seller="seller"></router-view>
</keep-alive>

2. Object.assign() 合并对象，给一个对象添加属性

 

 this.seller = Object.assign({},this.seller,res.data)