Vue2教程详解六（脚手架、配置项prop、配置项mixin、插件）

迷糊的小小淘

已于 2022-03-17 18:39:05 修改

阅读量795

点赞数

分类专栏：前端知识文章标签： vue.js javascript 前端

于 2022-02-22 19:23:01 首次发布

本文链接：https://blog.csdn.net/ks795820/article/details/123010735

版权

前端知识专栏收录该内容

51 篇文章 5 订阅

订阅专栏

vue脚手架即@vue/cli，Cli是command line interface是一个基于Vue.js进行快速开发的完整系统，Vue CLI致力于将Vue生态中的工具基础标准化，它确保了各种构件工具能够基于智能的默认配置即可平稳衔接，这样就可以专注在撰写应用上，而不必花好几天就纠结配置的问题。

脚手架

安装脚手架

npm install -g @vue/cli // 安装的是@vue/cli
或者
yarn global add @vue/cli



npm install -g vue-cli   // 安装的是vue-cli

安装后可通过vue --version来检查其版本是否正确；

创建项目

切换到你要创建项目的目录，然后使用命令创建项目：

vue create 项目名称  // 用脚手架@vue/cli创建

vue init webpack 项目名称   // 用脚手架vue-cli创建

启动项目

npm run serve   // 用脚手架@vue/cli

npm run dev  // 用脚手架vue-cli

备注：

若出现下载缓慢请配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org

vue工程中，main.js是入口文件;当项目启动后，就会立马去找到该入口文件；

关于不同版本的vue：

1、vue.js与vue.runtime.xxx.js的区别

vue.js是完整版的Vue，包含：核心功能+模板解析器

vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器；

2、一般引入的都是vue.runtime.xxx.js，但因为它是运行版的Vue，没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容；

 render: h => h(App),

prop配置项

prop配置项可以让组件接收外部传过来的数据

prop的基本用法很简单，主要有三种方式：

法一：以数组形式

<script>
    export default {
        name: 'HelloWorld',
        props: [
            'name', 'age', 'sex'
        ]
    }
</script>

 <student name="yung" age="19" sex="男"></student>

法二：以对象形式限制类型

如果希望每个prop都有指定的值类型，则可用该方法：

 props: {
            name: String,
            age: Number,
            sex: Boolean,
        }

法三：以对象形式限制属性、必要性、默认值

props: {
    name: {
        type: String, // 类型
        required: true, // 必要性
        default: "小红" // 默认值
    },
    school: {
        type: String, // 类型
        required: true, // 必要性
        default: "红星小学" // 默认值
    }
}

如果prop中有一个限制没得到满足，则就会在浏览器控制窗口中警告用户；

动态prop

刚才三种方式皆是传递的静态值，prop也可以通过v-bind进行动态赋值；

传入一个数字

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

传入一个布尔值

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个数组

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

传入一个对象的所有property

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的v-bind (取代v-bind：prop-name)。例如，对于一个给定的对象post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

单向数据流

所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行，这样可以防止从子组件意外变更父级组件的状态，从而导致应用的数据流向难以理解；

另外，每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值，这意味着不应该在一个子组件内部改变prop，若这样做了，则Vue会在浏览器的控制台中发出警告；

这里有两种常见的试图变更一个prop的情形：

1、这个prop用来传递一个初始值；这个子组件接下来希望将其作为一个本地的prop数据来使用；

这种情况下，最好定义一个本地的data property并将这个prop用作其初始值；

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2、这个prop以一种原始的值传入且需要进行转换。这种情况下，最好使用这个prop的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

综上：prop是是只读的，Vue底层会监测对props的修改，若进行了修改，则会发出警告，若业务需求确实需要修改，则需要复制props的内容到相应位置，然后再去修改复制的数据；

若data配置项中属性与props配置项中的属性重复，则优先使用props的属性值；

混入（mixins）

它提供了一种非常灵活的方式，来分发Vue组件中的可复用功能（即多个组件共享一个配置），一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项；

首先定义混入：

{
    data() {...},
    methods: {...}
    ...
}

第二步：使用混入

Vue.mixin(xxx)   // 全局混入
mixins:['xxx']   // 局部混入

谨慎使用全局混入，一旦使用全局混入，它将影响每一个之后创建的Vue实例。

插件

插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制---一般有下面几种：

1、添加全局方法或者property，如vue-custom-element

2、添加全局资源：指令/过滤器/过渡等。如vue-touch

3、通过全局混入来添加一些组件选项。如vue-router

4、添加Vue实例方法，通过把它们添加到Vue.prototype上实现。

5、一个库，提供自己的API，同时提供上面提到的一个或多多个功能，如vue-router

所以，插件的本质是包含install方法的一个对象，install的第一个参数是Vue，第二个参数是插件使用者传递的数据；

使用插件

通过全局方法Vue.use()使用插件，它需要在你调用new Vue()启动应用之前完成，即：

// 调用 `MyPlugin.install(Vue)` 全局使用插件
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

Vue.use会自动组织多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Vue.js官方提供的一些插件（如vue-router）在检测到Vue是可访问的全局变量时会自动调用Vue.use()、但在像CommonJS这样的模块环境中，应该始终显示的调用Vue.use();

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')

// 不要忘了调用此方法
Vue.use(VueRouter)

定义插件

对象.install = function(Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(...)

    // 2. 添加全局指令
    Vue.directive(...)

    // 3. 配置全局混入
    Vue.mixin(...)

    // 4.添加实例方法
    Vue.prototype.$myMethod = function() {...}
    Vue.prototype.$myProperty = xxxx
}