(四)新建一个简单的vue程序

1：在main.js里面添加自定义的Test.vue页面,Test.vue建在components下面

import { createApp } from 'vue' //import App from './App.vue' import App from './components/Test' createApp(App).mount('#app1')    2：Test.vue的内容(页面路径:src/components/Test.vue) (1):定义了一个组件,组件如果加了 - 这样的符号拼接的，下面的import SayHi，components: {SayHi；不能出现 - 这种符号, - 后面的字符串必须是大写，-去掉，不然会报错，例如是组件，后面js就是SayHi才能和组件名称对应上 (2):下面主要做了3件事情，一个是引用组件：import sayAhi from './SayHi.vue'; 一个是挂载组件components: { sayAhi }；一个是调用组件； 就是(引用，挂载，调用) (3):传一个msgs的值到SayHi.vue的页面里面去       3：SayHi.vue页面内容(页面路径:src/components/SayHi.vue) (1):{{ msgs }}接受传过来的msgs值 (2):在data里面给message，my_value 的value变量赋值 (3):在methods里面定义show_my_value函数，@click="show_my_value()"调用函数 (4):在props指定组件传过来的msgs的值的的类型String为字符串类型     int 注意点: Test.vue页面 如果文件是只包含一个大写字母的（如:Test.vue）,ESLint生成可能会报错，Component name "Test" should always be multi-word.eslintvue/multi-word-component-names 解决办法如下面代码：就是在export default {里面加 name:  'TestNamesys' 给他一个名称,呢个名称必须包含两个或者两个以上的大写字母,呢样就不会报错了