vue學習（十一）vue-cli3開發單文件組件

一 單文件組件介紹

二 如何安裝Vue-Cli3腳手架

三 快速原型開發

四 vue-cli3生成項目

五 購物車項目搭建

六 購物車項目操作

七 Mock模擬數據

八 Vue中使用第三方組件（element-ui）

九 Element的表單組件分析

十 表單組件設計-Input實現雙向數據綁定

十一 表單組件-設計FormItem組件

十二 表單組件設計-如何正確設計表單校驗規則

十三 表單組件設計-Form組件檢驗方法完結

一 單文件組件介紹

    /*
    * 在vue中 把.vue的文件稱為 單文件組件 webpack等構建工具
    *
    * 很多項目中使用
    * Vue.components('組件名'，{})
    * new Vue({})
    * 用在中小規模的項目中 會很好 但是大型的項目 就不友好了
    *
    * 有哪些缺點
    * 1. 全局定義 每個名字都不能重復
    * 2. 字符串模板【還好的是es6提供了模板字符串】遇見特殊的符號時 要用 反斜杠來轉義 很繁瑣
    * 3. 不支持css
    * 4. 沒有構建步驟
    *
    * 
    * 以后的模塊化開發 包括了 template style script
    * */

 

二 如何安裝Vue-Cli3腳手架

①  安裝node.js

　　https://nodejs.org/en/download/

　　保證Node.js 是8.9或者更高的版本

　　在終端 node -v 保證已經安裝

 

 

② 安裝 淘寶鏡像源

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

以后的npm可以使用cnpm來代替

③ 安裝Vue Cli3腳手架

cnpm install -g @vue/cli

④ 檢查版本是否正確

vue --version

 

三 快速原型開發

使用 vue serve 和 vue build命令對單個 *.vue 文件進行快速原型開發，不過這需要先額外安裝一個全局的擴展：

cnpm install -g @vue/cli-service-global

 

vue serve 的缺點就是它需要安裝全局依賴，這使得它在不同機器上的一致性不能得到保證。因此這只適用於快速原型開發。

開始測試

1 npm init

 

新建一個App.vue文件

<template>
    <div><h3>{{msg}}</h3></div>
</template>

<script>
    export default {
        data(){
            return{
                msg:'單文件測試'
            }
        }
    }
</script>

<style scoped>
    h3{
        color: red;
    }
</style>

然后在這個App.vue文件所在的目錄下運行

vue serve

四 vue-cli3生成項目

 創建一個項目

vue create 項目名

 

 回車

 

 

在回車

 

 在回車

 

 

 

 接下來就是考驗網速的時候了  我們耐心等待 當出現下面的圖 就ok啦

 輸入上面的命令

點擊網址 看效果

 

 

 恭喜你第一個 vue項目啟動

五 購物車項目搭建

組件化開發

 

 

1 我們首先在 components 建一個 car.vue 的文件

2.這個文件在主入口的文件 App.vue 的文件中導入 掛載和使用

 

<template>
　　 <div>
        <MyCart :cart="cartList" :title="title"></MyCart>             ❤ 使用 ❤
    </div>

</template>

<script>
    import MyCart from './components/car.vue'                         ❤ 導入 ❤

    export default {
        name: 'app',
        data() {
            return {
                title:'購物車',
                cartList: [
                    {id: 1, title: 'Vue實戰開發', price: 188,active:true,count:1},
                    {id: 2, title: 'python實戰開發', price: 189,active:true,count:1}          # 構造假的數據
                ]

            }
        },
        components: {
            MyCart　　　　　　　　　　　　　　　　　　　　❤ 掛載 ❤　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
        }
    }
</script>

<style>

</style>

3. car.vue 的操作

<template>
    <div>
        <h2>{{title}}</h2>
        <table border="1">
            <tr>
                <th>#</th>
                <th>課程</th>
                <th>單價</th>
                <th>數量</th>
                <th>總價</th>
            </tr>
            <tr v-for="c in cart" :key="c.id">
                <td><input type="checkbox" v-model="c.active"></td>
                <td>{{c.title}}</td>
                <td>{{c.price}}</td>
                <td>
                    <button>-</button>
                    {{c.count}}
                     <button>+</button>
                </td>
                <td>￥{{c.price*c.count}}</td>

            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: 'cart',
        props: ['title', 'cart']                     <!--1.props導入父組件的數據-->
    }
</script>

<style scoped>

</style>

 代碼詳情

六 購物車項目操作

 

 

 上圖 我們要做勾選一個課程 就能得到價錢  還有數量的加減

1. 先寫數量

<td>
      <button @click="substract(index)">-</button>
             {{c.count}}
      <button @click="add(index)">+</button>
</td>

methods: {
            remove(i){
                if(window.confirm('確定要刪除嗎')){
                    this.cart.splice(i)
                }
            },
            substract(i) {
                let count = this.cart[i].count;
                count > 1 ? this.cart[i].count -= 1 :this.remove(i);         # 三元運算
            },
            add(i) {
                this.cart[i].count++;
            },
        },

總代碼----在上面的代碼基礎上修改 car.vue

<template>
    <div>
        <h2>{{title}}</h2>
        <table border="1">
            <tr>
                <th>#</th>
                <th>課程</th>
                <th>單價</th>
                <th>數量</th>
                <th>總價</th>
            </tr>
            <tr v-for="(c,index) in cart" :key="c.id">

                <td><input type="checkbox" v-model="c.active"></td>
                <td>{{c.title}}</td>
                <td>{{c.price}}</td>
                <td>
                    <button @click="substract(index)">-</button>
                    {{c.count}}
                    <button @click="add(index)">+</button>
                </td>
                <td>￥{{c.price * c.count}}</td>
            </tr>
            <tr>
                <td></td>
                <!--<td colspan="2">{{ '1/2' }}</td>-->
                <!--用計算屬性得到-->
                <td colspan="2">{{activeCount}}/{{ count }}</td>
                <td colspan="2">總價￥{{ totalPrice }}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        name: 'cart',
        props: ['title', 'cart'],
        methods: {
            remove(i){
                if(window.confirm('確定要刪除嗎')){
                    this.cart.splice(i)
                }
            },
            substract(i) {
                let count = this.cart[i].count;
                count > 1 ? this.cart[i].count -= 1 :this.remove(i);
            },
            add(i) {
                this.cart[i].count++;
            },
        },
        computed: {
            count() {
                return this.cart.length
            },
            activeCount() {
                return this.cart.filter(v => v.active).length
            },
            totalPrice() {
                let sum = 0;
                this.cart.forEach(c => {
                    if (c.active) {
                        sum += c.price * c.count
                    }
                });
                return sum

            }


        }
    }
</script>

<style scoped>

</style>

七 Mock模擬數據

Mock有他自己的官方網站 但是我們不用 我們在vue里用一個配置文件 vue.config.js 

 

module.exports = {
    devServer: {
　　　　　// 后期因為報錯會加個配置
        // mock模擬數據
        before(app, server) {
            // 接口
            app.get('/api/carList', (req, res) => {
                res.json({
                    result: [
                        {id: 1, title: 'Vue實戰開發', price: 188, active: true, count: 1},
                        {id: 2, title: 'python實戰開發', price: 189, active: true, count: 1}        數據
                    ]
                })
            })
        }
    }
};

在 App.vue中注銷之前的數據

 

 我們啟動項目之后 訪問  http://localhost:8080/  是沒有任何反應的 但是我們的數據是有了的 http://localhost:8080/api/carList 來獲取

我們需要安裝一個東西

 

npm i axios -s

在main.js中需要配置 

import axios from 'axios'


Vue.prototype.$http = axios;

這樣我們就可以啟動啦

在回App.vue中

<script>
    import MyCart from './components/car.vue'

    export default {
        name: 'app',

        data() {
            return {
                cartList: [],　　　　　　　　　　　　　　之前的數據刪掉了  現在創建一個空的列表
                title: '購物車',
            }
        },
        created(){
            this.$http.get('/api/carList')　　　　　　兩種方式實現 模擬數據
            .then(res=>{
                this.cartList = res.data.result;
            }).catch(err=>{
                console.log(err)
            })
        },
//        async created() {
//
//            try {
//                const res = await this.$http.get('/api/carList');
//                this.cartList = res.data.result;
////                console.log('this.carList',this.carList)
//            } catch (error){
//                console.log(error)
//            }
//
//
//        },
        components: {
            MyCart
        }
    }
</script>

代碼下載

八 Vue中使用第三方組件（element-ui）

* 通用組件----基礎組件，大部分UI都是這種組件，比如表單 布局 彈窗等

* 業務組件----與需求掛鈎，會被復用，比如抽獎 搖一搖等

* 頁面組件----每個頁面都是一個組件，不會復用

使用第三方組件

比如 vue 最流行的element，就是典型的通用組件，執行 npm install element-ui 安裝 

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI);

new Vue({
  el:'#app',
  render: h => h(App),
});

在使用 vue-cli 中可以使用 vue add element 安裝

 

 

九 Element的表單組件分析

 

十 表單組件設計-Input實現雙向數據綁定

十一 表單組件-設計FormItem組件

十二 表單組件設計-如何正確設計表單校驗規則

十三 表單組件設計-Form組件檢驗方法完結