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)