Vue3 教程：英雄指南（一）

最新推荐文章于 2024-05-02 21:24:31 发布

朱nw

最新推荐文章于 2024-05-02 21:24:31 发布

阅读量556

点赞数 6

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/sinat_39013092/article/details/110205545

版权

前言

最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8

Vite创建项目

Vite. 是一个基于 Vue3 单文件组件的非打包开发服务器。使用Vite与使用Vue-CLI创建的Vue项目相比，Vite是使用原生的ES模块导入，能提供更轻量的代码服务(lightning fast serving of code)。
可以使用npm或yarn来创建项目，笔者这里使用的是npm。在命令行中输入以下的命令：

	$ npm init vite-app <project-name>
	$ cd <project-name>
	$ npm install
	$ npm run dev

将<project-name>替换成我们自己的项目名，模仿起名vue-tour-of-heros，在命令行运行完成之后，我们可以看到命令行中输出

  Dev server running at:
  > Network:  http://192.168.1.101:3000/
  > Local:    http://localhost:3000/

我们打开浏览器，访问输出的网址，就可以看到我们刚刚创建的Vue3的项目效果。在这里插入图片描述
现在我们来看一下，我们刚才那些命令都创建了些什么
输入网址之后访问的是目录下的index.html文件

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

查看上述代码，我们可以看到页面很简单，值得注意的就是那个id="app"的div元素以及作为module引入的js文件，既然如此我们在打开main.js文件看看。

// src\main.js
import {
    createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

main.js 的行数就更少了，我们可以看到，它从vue中导入了createApp函数，从App.vue中导入了App变量，还引入的index.css样式表。
主要看代码createApp(App).mount('#app') 这行代码意味着，根据App选项创建了一个Vue应用实例，然后挂载在id=app的HTML元素上。
那我们再打开App.vue，这是Vue单文件组件的写法，我们在main.js中引用的app便是该文件中导出的。

// src\App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

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

而在这个单文件组件中又引入了另一个单文件组件，HelloWorld.vue

// src\components\HelloWorld.vue

<template>
  <h1>{
  { msg }}</h1>
  <button @click="count++">count is: {
  { count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
    
  name: 'HelloWorld',
  props: {
    
    msg: String
  },
  data() {
    
    return

最低0.47元/天解锁文章

朱nw

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue3 教程：英雄指南（一）

前言最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。Vite创建项目Vite. 是一个基于 Vue3 单文件组件的非打包开发服务器。使用Vite与使用Vue-CLI创建的Vue项目相比，Vite是使用原生的ES模块导入，能提
复制链接

扫一扫

专栏目录