一 单文件组件介绍

二 如何安装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 保证已经安装

vue学习(十一)vue-cli3开发单文件组件_微信

 

 

② 安装 淘宝镜像源

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学习(十一)vue-cli3开发单文件组件_微信_02

 

vue serve 的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

开始测试

1 npm init

vue学习(十一)vue-cli3开发单文件组件_微信_03

 

新建一个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 项目名

vue学习(十一)vue-cli3开发单文件组件_微信_04

 

 回车

vue学习(十一)vue-cli3开发单文件组件_微信_05

 

 

在回车

vue学习(十一)vue-cli3开发单文件组件_微信_06

 

 在回车

vue学习(十一)vue-cli3开发单文件组件_微信_07

 

 vue学习(十一)vue-cli3开发单文件组件_微信_08

 

 接下来就是考验网速的时候了  我们耐心等待 当出现下面的图 就ok啦

vue学习(十一)vue-cli3开发单文件组件_微信_09

 输入上面的命令

vue学习(十一)vue-cli3开发单文件组件_微信_10

点击网址 看效果

vue学习(十一)vue-cli3开发单文件组件_微信_11

 

 

 恭喜你第一个 vue项目启动

五 购物车项目搭建

组件化开发

vue学习(十一)vue-cli3开发单文件组件_微信_12

 

 

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>

vue学习(十一)vue-cli3开发单文件组件_微信_13

 代码详情

六 购物车项目操作

 vue学习(十一)vue-cli3开发单文件组件_微信_14

 

 上图 我们要做勾选一个课程 就能得到价钱  还有数量的加减

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中注销之前的数据

vue学习(十一)vue-cli3开发单文件组件_微信_15

 

 我们启动项目之后 访问  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 安装

vue学习(十一)vue-cli3开发单文件组件_微信_16

 

 

九 Element的表单组件分析

 

十 表单组件设计-Input实现双向数据绑定 十一 表单组件-设计FormItem组件 十二 表单组件设计-如何正确设计表单校验规则 十三 表单组件设计-Form组件检验方法完结