26-Vue脚手架-分析脚手架

将 24-Vue组件化编程-单文件组件 放到使用Vue脚手架创建的vue_test项目中

 

脚手架文件结构

复制代码
    ├── node_modules 
    ├── public
    │   ├── favicon.ico: 页签图标
    │   └── index.html: 主页面
    ├── src
    │   ├── assets: 存放静态资源
    │   │   └── logo.png
    │   │── component: 存放组件
    │   │   └── HelloWorld.vue
    │   │── App.vue: 汇总所有组件
    │   │── main.js: 入口文件
    ├── .gitignore: git版本管制忽略的配置
    ├── babel.config.js: babel的配置文件
    ├── package.json: 应用包配置文件 
    ├── README.md: 应用描述文件
    ├── package-lock.json：包版本控制文件
复制代码

 

src/components/School.vue

复制代码
<template>
  <!--组件的结构-->
  <div class="demo" style="background-color:orange;">
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点击提示学校信息</button>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",

    data(){
      return{
        schoolName:"东华理工大学",
        address:"江西南昌"
      }
    },
    methods:{
      showName(){
        alert(this.schoolName)
      }
    }
  }

</script>

<style>
 //组件的样式
  .demo {
    //background-color: orange;
  }
</style>
复制代码

src/components/Student.vue

复制代码
<template>
  <!--组件的结构-->
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",

    data(){
      return{
        name:"马铃薯",
        age:26
      }
    }
  }
</script>

<style>
</style>
复制代码

src/App.vue

复制代码
<template>
  <div>
    <img src="./assets/logo.png">
    <!--使用组件标签-->
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name:"App",
  // 注册组件
  components:{
    School:School,
    Student:Student
  }
}
</script>

<style>
</style>
复制代码

src/main.js

复制代码
// 该文件是整个项目的入口文件

// 引入Vue（残缺版）
import Vue from 'vue'
// 引入Vue（完整版）
// import Vue from 'vue/dist/vue'

// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

// 创建Vue实例对象 vm
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

new Vue({
  el:"#app",
  // 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),

  // 引入Vue（残缺版）写法
  // render(createElement){
  //   console.log(666)
  //   return createElement("h1","你好啊")
  // }

  // 引入Vue（完整版）写法
  // template:"<h1>你好啊</h1>",
  // components:{App:App}

})
复制代码

public/index.html

复制代码
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是仍IE浏览器以最高的渲染级别渲染页面 -->
    <!-- Vue不支持IE8及以下的版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器 -->
    <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（残缺版）
import Vue from 'vue'
// 引入Vue（完整版）
// import Vue from 'vue/dist/vue'

// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

// 创建Vue实例对象 vm
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

new Vue({
  el:"#app",
  // 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),

  // 引入Vue（残缺版）写法
  // render(createElement){
  //   console.log(666)
  //   return createElement("h1","你好啊")
  // }

  // 引入Vue（完整版）写法
  // template:"<h1>你好啊</h1>",
  // components:{App:App}

})
复制代码

关于不同版本的函数

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

  • vue.js 是完整版的 Vue，包含：核心功能 + 模板解析器
  • vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器。esm 就是 ES6 module

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

vue.config.js 配置文件

vue inspect > output.js 可以查看到Vue脚手架的默认配置

使用 vue.config.js 可以对脚手架进行个性化定制，和 package.json 同级目录，详见 ：配置参考 | Vue CLI (vuejs.org)

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
    },
  }
}

 

posted @   马铃薯1  阅读(8)  评论(0)  编辑  收藏  举报
相关博文：
· 32-Vue脚手架-Todo-list 案例
· 25-Vue脚手架-初始化脚手架
· vue的脚手架分析
· Vue分析脚手架
· Vue脚手架文件结构
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示