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: , title: 'Vue实战开发', price: ,active:true,count:},
                    {id: , title: 'python实战开发', price: ,active:true,count:}          # 构造假的数据
                ]

            }
        },
        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组件检验方法完结