Vue分析脚手架结构

最新推荐文章于 2024-09-13 14:34:15 发布

荭色海湾

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量292

点赞数 5

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

本文链接：https://blog.csdn.net/qq_53374893/article/details/140878801

版权

Vue2 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1.分析结构

<!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">
    <!-- 配置网页的标题 package.json name:'vue_test'当作网页的标题 -->
    <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>

2.Vue脚手架的默认配置

3.自定义配置

4.脚手架文件结构

5. 关于不同版本的vue

6.vue.config.js配置文件

7.属性配置

<template>
  <div class="school">
    <h1>{{msg}}</h1>
    <button @click="myAge++">年龄加1</button>
    <h2>展示学生的名称:{{ name }}</h2>
    <h2>展示学生的性别:{{ sex }}</h2>
    <h2>展示学生的年龄:{{ myAge+1 }}</h2>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "MyStudnet",
  data() {
    //这里存放数据
    return {
      msg:'我是一个人',
      myAge:this.age,
    };
  },
  // props:['name','age','sex'] //简单接收
  //接受的同时对数据进行类型限制
  // props:{
  //     name:String,
  //     age:Number,
  //     sex:String
  // }

  //接受的同时对数据进行类型限制,默认值的指定 和 必要性的限制
  props:{
    name:{
      type:String,//name类型是字符串
      required:true,//名字是必传的
    },
    sex:{
      type:String,//性别类型是字符串
      // required:true,//性别是必传的
      default:'男'
    },
    age:{
      type:Number,//年龄类型是 数字
      required:true,//年龄是必传的
    }
  }


};
</script>
<style>

    .school{
        background-color: gray;
    }


</style>

8.混合

export const mixin = {//分别暴露
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log('混合调用的mounted');

    }
}

// export default mixin //默认暴露

export const mixin1 = {//分别暴露
    methods: {
        showName() {
            alert(this.name)
        }
    },
    mounted() {
        console.log('混合调用的mounted');

    }
}

9.插件

10.scoped 样式作用域

原理:

就是加了个属性选择器

<template>
  <div class="demo">
    <h2>展示学生的名称:{{ name }}</h2>
    <h2>展示学生的性别:{{ sex }}</h2>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

//引入一个混合
export default {
  name: "MyStudnet",
  data() {
    //这里存放数据
    return {
      name: "我是一个人",
      sex: 12,
    };
  }
};

//npm view webpack versions 查看 webpack版本
//npm view less-loader versions 查看 less-loader版本
//npm i less-loader@7 指定版本


</script>

<style scoped>
/* 这个scoped 是把自己的作用域 隔绝了让别人看不到你这个 demo 也不看别人的 就近原则 但是自己没有 别人有的 还是会拿过来 */
  .demo{
    background-color: green;
  }
</style>