vue ui 图形界面创建项目

在窗口输入 vue ui 即可

项目目录结构：

App.vue根组件

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
# 引入了helloworld组件
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js 

主要用于加载公共组件和项目需要用到的各种插件，并创建Vue根实例

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

新增一个组件MyMovie.vue

<template>
    <div>
        <img :src="imgUrl">
    </div>
</template>
<script>
export default{
    data:function(){
        return{
            imgUrl:'https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
            name:'向日葵'
        }
    }
}
</script>
<style scoped>

</style>

在默认情况下，单文件组件中的CSS样式是全局样式。

如果需要使CSS样式仅在当前组件中生效，需要设置<style>标签的scoped属性

App.vue 组件引入：

import HelloWorld from '@/components/MyMovie.vue'

import语句中的“@”表示src目录，该字符可以简化路径。

引入的MyMovie组件可以不写扩展名.vue，因为项目内置的webpack可以自动添加扩展名.vue