前言
最近在看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