Vue笔记（三）Vue脚手架（Vue CLI）

Tmil

已于 2022-10-12 09:46:18 修改

阅读量860

点赞数

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

于 2022-10-05 16:43:57 首次发布

本文链接：https://blog.csdn.net/qq_46067727/article/details/127173162

版权

本文详细介绍了Vue CLI的使用，包括如何创建项目、配置vue.config.js和main.js。深入探讨了Vue的render函数、ref属性、props配置、mixin混入、插件安装和使用，以及scoped样式的应用。此外，还涵盖了组件化编码流程、WebStorage、自定义事件、全局事件总线、消息订阅与发布、Vue的nextTick和封装的过渡动画。通过具体的示例和实践，帮助开发者掌握Vue开发中的关键技巧。

摘要由CSDN通过智能技术生成

全局事件总线（GlobalEventBus）

消息的订阅与发布

nextTick

Vue封装的过渡与动画

Vue脚手架（Command Line Interface）是Vue官方提供的标准化开发工具（开发平台）。

使用脚手架：

一、全局安装

（切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org）

npm install -g @vue/cli

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

vue create xxx

三、启动项目

npm run serve

把之前写好的组件放入src/components文件夹，用之前写好的App.vue将脚手架生成的App.vue替换掉，在项目目录下的终端运行npm run serve命令就可以运行项目了。

vue.config.js配置文件：

运行vue inspect > output.js可以查看到Vue脚手架的默认配置；使用vue.config.js可以对脚手架进行个性化定制，详见https://cli.vuejs.org/zh

main.js

// 该文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
    el:'#app',
    // 将App组件放入容器中
    render:h=>h(App)
})

App.vue

<template>
  <div>
    <SchoolName></SchoolName>
  </div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
    name:'App',
    components:{
        SchoolName
    }
}
</script>
<style>
</style>

SchoolName.vue（注意使用双驼峰命名，只一个单词首字母大写会报错）

// 快捷生成主要结构：下载Vetur，键入“<v"
<template>
    <!-- 组件的结构 -->
    <div class="school">
        <h2>学校：{
  {schoolName}}</h2>
        <h2>地址：{
  {address}}</h2>
    </div>
</template>
<script>
    // 组件交互相关的代码
    // export const school=Vue.extend({ //分别暴露
    // export default Vue.extend({ //默认暴露也可以这样写
    // const school=Vue.extend({
    export default{
        name:'SchoolName', //最好与文件名保持一致
        data(){
            return {
                schoolName:'hzy',
                address:'LongZiHu',
            }
        },
    }
    // });
    // export{school}; //统一暴露
    // export default school; //通常采用默认暴露
</script>
<style>
/* 组件的样式 */
.school{
    background-color: aliceblue;
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE的特殊配置，让IE以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

render函数：

关于不同版本的Vue：

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

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

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

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

ref属性：

1.被用来给元素或子组件注册引用信息（id的替代者）。

2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象。

3.使用方式：标签体内：<h1 ref=”xxx”>...</h1>或<School ref=”xxx”’></School> 获取：this.$refs.xxx

<template>
  <div>
    <SchoolName ref="schoolname"></SchoolName>
    <h1 v-text="msg" ref="school"></h1>
    <button @click="showDom">输出上方DOM元素</button>
  </div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
    name:'App',
    data() {
      return {
        msg:'河南中医药大学'
      }
    },
    components:{
        SchoolName
    },
    methods: {
      showDom(){
        console.log(this.$refs.school);//真实DOM元素
        // <h1>河南中医药大学</h1>
        console.log(this.$refs.schoolname);//SchoolName组件的实例对象
        // VueComponent {_uid: 2, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…}, …}
      }
    },
}
</script>
<style>
</style>

配置项props：

用于让组件接收外部传过来的数据（父传子）;props是只读的，Vue底层会监测对props的修改，如果进行了修改，就会发出警告。

1.传递数据：<Demo name=”xx”/>

2.接收数据：

（1）只接收：props:[‘name’]

（2）限制类型：props:{name:Number}

（3）限制类型、限制必要性、指定默认值：props:{ name:{type:String, require:true, default:'tml'}

StudentName.vue

<template>
    <div class="student">
        <h2>姓名：{
  {name}}</h2>
        <h2>住址：{
  {address}}</h2>
        <h2>年龄：{
  {myAge+1}}</h2>
        <button @click="updateAge">修改接收到的年龄</button>
    </div>
</template>
<script>
    export default{
        name:'StudentName', 
        data(){
            return {
                myAge:this.age
            }
        },
        // props:['address','name','age'],//简单接收
        // props:{//接收的同时对数据进行类型限制
        //     name:String,
        //     address:String,
        //     age:Number
        // },
        props:{ //接收的同时可以对数据进行类型限制、指定默认值、限制必要性
            name:{
                type:String,
                require:true //必传
            },
            address:{
                type:Strin

最低0.47元/天解锁文章

Tmil

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记（三）Vue脚手架（Vue CLI）

使用脚手架、render函数、ref属性、配置项props、mixin混入、插件、scoped样式、组件化编码流程、WebStorage、组件的自定义事件、全局事件总线（GlobalEventBus）、消息的订阅与发布、nextTick（生命周期钩子）、Vue封装的过渡与动画
复制链接

扫一扫

专栏目录