vue-cli: 渲染过程理解（vue create demo01方式创建）

最新推荐文章于 2024-04-27 08:24:56 发布

转载最新推荐文章于 2024-04-27 08:24:56 发布 · 254 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qq254980080/p/10321353.html

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用vue.config.js配置Vue项目，包括设置入口文件、模板文件及页面标题。同时，深入讲解了index.js中Vue实例化的具体过程，以及APP.vue组件的结构与内容引用方式。

1、根目录配置 vue.config.js, 设置入口文件: index.js

module.exports = {
    pages:{
        index: {
            entry: 'src/pages/home/index.js',   //index.js为入口文件
            template: 'public/index.html',   //html页面文件
            title: 'Home Page',
        }
    }
}

2、index.js

import Vue from 'vue'       　//直接引入vue
import App from './App.vue'   //引入APP.vue, template文件

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

new Vue({             //实例化Vue
  render: h => h(App),   //将template(APP)代码写入到 html页面文件(vue的作用域中:'#app')
}).$mount('#app')    //vue的作用域'#app'

//上面的代码相当于
new Vue({
　　el: '#app',
　　components:{HelloWorld}
})
//实例化了Vue, 确定vue的作用域'#app', 并且将template文件写入到'#app'作用域中, vue可解析template代码, 并注册了一个组件:Helloworld

3、APP.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./../../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>          //组件: HelloWord, 通过msg父子传值
  </div>
</template>

<script>
import HelloWorld from './../../components/HelloWorld.vue'   //引用组件: HelloWord, 因为index.js中仅注册了组件名称, 还需要引入组件内容

export default {      //export default, 向外暴露一个对象
  name: 'app',　　　　//给组件起的名字, 暂时未用到
  components: {       //将局部组件components也暴露给index.js
    HelloWorld
  }
}
</script>