第一个Vue3.0程序

用户6688599847662026-05-07 9:54

先在VS Code终端中输入启动命令：

arduino 复制代码 
npm run serve

启动成功后，输入http://localhost:8080/ 看看。

下面说明该项目的详细执行过程。

App挂载文件------index.html

在项目的public文件夹中包含有index.index文件，index.html文件的内容非常简单，主要是将一个div标签提供给Vue创建的App进行挂载。index.html文件的内容如下。

xml 复制代码 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <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>
    <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"><!-- Vue创建的App挂载点 --></div>
    <!-- built files will be auto injected -->
  </body>
</html>

另外，整个项目页面的标题也在此文件的标签内进行设置。

创建App主文件------main.js

项目的src文件夹中的main.js创建Vue的App并引入所需要的插件，将程序员编写的内容渲染到主页面（index.html）上，是Vue3.0项目的入口文件，在执行main.js时是从上到下进行执行的。

javascript 复制代码 
import { createApp } from 'vue' //从vue核心库中引入createApp方法
import App from './App.vue'//引入一个当前目录下的名字为App.vue的组件
import router from './router'//引入路由
import store from './store'

//创建App，使用路由将其挂载到index.html文件上的<div id='app'></div>
createApp(App).use(store).use(router).mount('#app')

Vue通过webpack实现模块化，因此可以使用import引入模块。上面的main.js文件引入App.vue作为根组件来启动，可以使用以下语句实现：

javascript 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

此处的引入方式采用的是相对地址。

根组件------App.vue

main.js文件把App.vue组件引入并作为根节点挂载到index.html文件的<div id="app"></div>上，然后渲染到浏览器页面。App.vue组件的文件内容如下：

xml 复制代码 
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

首先说明组件的文件结构分为三个部分：模板（template）、脚本（script）和样式（style）。其代码结构如下。

xml 复制代码 
<template>
    <!--模板部分-->
</teplate>

<script>
    //脚本部分
</script>

<style>
    /*CSS样式部分，scoped表示所有样式仅在此组件内容有效，不影响其他组件*/
</style>

另外两个<router-link to="/"></router-link>表示路由链接导航，单击这两个导航则会把符合路由结果的组件导入并渲染到<router-view>处，<router-view>相当于一个占位符，会显示符合路由结果的组件。

路由设置文件------router/index.js

在src/router/index.js文件中定义了用户输入的路由锁对应的地址，其文件内容和对应的相关说明如下：

javascript 复制代码 
//从vue-router中导入createRouter、createWebHistory方法
import { createRouter, createWebHashHistory } from 'vue-router'
//引入views目录下的Home.vue组件,取别名为Home
import HomeView from '../views/HomeView.vue'

const routes = [                     //配置路由，这里是个数组
  {                                  //每一个路由链接都是一个对象
    path: '/',                       //链接路径：根路径，即第一条路由
    name: 'home',                    //路由名称Home
    component: HomeView              //对应的组件模板，此处是../views/Hone.vue
  },
  {
    path: '/about',
    name: 'about',
    //路由懒加载，即路由被使用时才加载
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({         //创建路由实例
  history: createWebHashHistory(),    //创建history模式的路由
  routes                              //上面定义配置路由的数组
})

export default router                 //暴露路由

用户在浏览器的地址栏中输入：

arduino 复制代码 
http://localhost:8080/

相当于访问本地主机端口号为8080的Web服务器根目录，也就是router/index.js的第一条路由，表示符合规则的路由锁代开的组件文件是../views/Home.vue,也就是说，会用../views/Home.vue组件代替App.vue组件内的路由占位符<router-view/>。

views/Home.vue

Home.vue组件的文件内容如下：

xml 复制代码 
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
//@是一个别名，相当于/scr文件夹
//导入/src/components/HellowWorld.vue组件,取名为HelloWorld
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld       //定义子组件名称HelloWorld
  }
}
</script>

使用以下语句把导入的子组件HellWorld.vue渲染到网页中：

<HelloWorld msg="Welcome to Your Vue.js App"/>

在导入子组件HeoowWorld.Vue的过程中，向子组件HellWorld.Vue传递信息"Welcome to Your Vue.js App"，msg是所传信息的属性，在子组件中接收这个msg并将其渲染到网页中。

HeoowWOrld.vue组件的文件内容如下：

xml 复制代码 
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String              //接收父组件传递过来的属性
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--增加scoped属性用于限定CSS属性仅能在本组件内使用-->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

自定义Hello World程序

1.自定义index.html内容

xml 复制代码 
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <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>
    <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>

2.修改App.vue

xml 复制代码 
<template>
  <nav>
    <router-link to="/">主页</router-link> |
    <router-link to="/about">关于</router-link>
  </nav>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

3.views/Home.vue

xml 复制代码 
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="欢迎您，Vue.js App!"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

4.components/HelloWorld.vue

xml 复制代码 
<!--下面<template></template>标记之间是Vue的模板区域，即MVVM中的View层-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ message }}</h2>
  </div>
</template>

<!--下面的<script></script>标记之间，是View Model层-->
<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup () {
    const message = ref('Vue 3.0的欢迎信息!')
    return {
      message
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to only this component -->
<!--下面<style></style>之间是定义模板区域的CSS样式，即View层-->
<style scoped lang="scss">
h2 {
  margin: 40px 0 0;
  color: orangered;
}
</style>

效果展示

相关推荐
Cobyte3 小时前
10.响应式系统演进：通过位运算优化动态依赖收集（Vue3.2）
前端·javascript·vue.js
普修罗双战士3 小时前
项目设计-文章系统发布文章完整前后端设计
java·数据库·vue.js·spring boot·git·intellij-idea
Csvn3 小时前
Vue 3 Composition API 深度解析
前端·vue.js
旷世奇才李先生4 小时前
Vue 3\+Vite\+Pinia实战：前端工程化与组件化开发全指南
前端·vue.js
周bro4 小时前
vue2+element ui 中的el-table表格 选中当前行当前行变色，单选/多选--------续集：表格样式修改整合
vue.js·ui·elementui
不会敲代码118 小时前
从零到一：用 Vue3 + Kimi 大模型打造「拍照记单词」AI 应用
vue.js·typescript·aigc
隔壁的大叔18 小时前
Markdown 渲染如何穿插自定义组件
前端·javascript·vue.js
RONIN18 小时前
脚手架搭建项目框架（create-vite、vue-cli、create-vue、quasar-cli）
vue.js
愚者Pro19 小时前
Flutter基础学习
前端·javascript·vue.js
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03Codex 接入 DeepSeek API 完整配置文档04零基础教你claude code 接入 deepseek V405Linux 核弹级高危漏洞 CVE-2026-31431 完整修复指南06CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录07【AI】2026 年具身智能模型和世界模型总结08裂开！ChatGPT 居然开始要手机号验证，附详细解决方法09CC-Switch & Claude 基于 Linux 服务器安装使用指南102026 年 AI 辅助编程工具全景对比：Copilot、Cursor、Claude Code 与 Codex 深度解析