认识Vue

配置:

首先要下载 node,没有 node 就无法使用 vue.

在安装好 node 后就可以使用 vue 了。

第一步,使用官方推荐的 vite 方式安装 vue,这里使用 npm create vue@latest

然后会出现命令行,按照命令行一步一步选择就好。

接下来我们需要安装依赖,打开项目文件夹所在位置,使用 npm i 安装依赖,接下来就可以使用了。

文件结构:

首先是 node\_modules,这个文件夹下就是使用 npm i 安装的相关依赖

其次就是 public,这个文件夹存放一些公共资源,比如 favicon.ico

src 就是我们主要写代码的地方,这下面会放一些组件,样式文件等,最重要的比如 app.vue 组件和 main.ts

index.html 是入口文件,vite.config.ts 写的一些 vue 的配置文件,比如我们启动项目要使用的 npm run dev 就是在这个文件里写的

tsconfig.json 下面放的一些 ts 相关文件,这里选择不动。

创建 vue:

首先创建 vue 需要打开 main.ts,这里我们先写 import {createApp} from 'vue',这串代码的意思是从 vue 引入 createApp 方法,接下来我们要写 import App from './app.vue',这串代码的意思是我们从同一级目录下引入根组件 app.vue。

接下来我们就需要创建应用实例并挂载到 Dom 中,我们接下来写 createApp(App).mount('#app'),这里的意思是我们创建了应用实例并且挂载到 DOM 中 id 为 app 的元素上。

这样我们就创建好了一个 vue 项目,并且可以正常运行。

觉得内容不错?我要

评论 暂无评论
暂无评论,快来抢沙发吧~