vue工程学习（3）之第一个组件使用

vue工程学习（3）之第一个组件使用

1.目录介绍

• index.html：主界面，也是我们展示的html
• main.js：是js入口，是所有vue组件的入口，以后的业务处理入口都是从这里开始
  

2.新增配置文件：vue.config.js（和package.josn同级）

module.exports = {
  devServer: {
    port: 9002,
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: '你好 vue', // page title, index.html的title换成<title><%= webpackConfig.name %></title>
  },
};

3.main.js介绍

内容：

Vue.config.productionTip = false;（阻止启动生产消息，常用作指令）

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

//这个新写法
new Vue({
  render: (h) => h(App),
}).$mount('#app');

//以前cli2的写法，功能都是一样的，加载id，这个写法更加想单独使用vue.js，比较好理解
// new Vue({
//   el: '#app',
//   components: { App },
//   template: '<App/>'
// })

4.编写组件

1）新建组件

2）我的第一个组件，MyFirst.vue

<template>
  <div>
    <h1>MyFirst</h1>
  </div>
</template>

<script>
//暴露的名字
export default {
  name: 'MyFirst',
};
</script>

<style scoped>

</style>

3）使用

• 通过import引入组件
• 通过components注册组件
• 在html上使用组件
  

4）展示

5.完成使用