这篇将着重介绍Vue的项目结构以及如何使用VSCode对Vue来进行开发。

IDE的准备

下载VSCode

首先我们需要使用前端开发 IDE 利器:Visual Studio Code

进官网下载：https://code.visualstudio.com

并进行安装

插件安装

打开VSCode后，点击扩展按钮，搜索需要的插件名称，点击安装然后重启一下VSCode。

推荐安装的插件有：

◼ Chinese (Simplified) Language Pack(微软)：VSCode 中文插件

◼ Vetur(Pine Wu)：Vue开发插件，支持 .vue 文件语法高亮显示等

◼ Vue 3 Snippets(hollowtree)：Vue 代码片段以及提示插件

◼ Axios Snippets(Yggdrasill-7C9)：Axios 的代码提示

◼ Element UI Snippets(Snowffer Studio)：Element UI 的代码提示

◼ ESLint(Dirk Baeumer)：JS 代码检测工具

◼ Beautify(HookyQR)：格式化JS，JSON，CSS、HTML等

◼ HTML Snippets(Mohamed Abusaid)：Html代码片段以及提示

◼ HTML CSS Support(ecmel)：智能提示当前项目所支持的样式

在这里插入图片描述

打开工作区文件夹

在这里插入图片描述

Vue3项目结构

结构分析

加载工作区后可以看到demo项目的项目结构，其中:

Vue3起步（创建一个新页面）

创建页面组件

在 views 目录中右键新建 .vue 文件：如 Test.vue

在这里插入图片描述

在Test.vue中输入：

<template>
  <div id="test">
    <h1>test页面</h1>
  </div>
</template>

• 使用VSCode可使用alt+shift+f快捷键自动对齐代码

•.vue 组件的内容都放在 template 标签中

• 有且只能有一个 template 根标签

• template 根标签下只能有一个元素(如div)

配置路由

打开 router 目录中的 index.js，为刚刚创建的Test.vue添加新路由，即当用户访问/about时，服务器调用项目中/views/About.vue组件。

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    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/About.vue"),
  },
  {
    path: "/test",
    name: "Test",
    component: () => import("../views/Test.vue")
    },    
];
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
export default router;

参数含义为：

path：请求路径

name：路由名称

component：要显示的页面组件

在根组件中添加导航

打开 App.vue 文件，App.vue可以看成是一个根页面导航，我们现在需要在页面上添加一个链接，使其导航访问/test页面。

App.vue：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/test">测试</router-link>
  </div>
  <router-view />
</template>
<style lang="less">
#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>

用VSCode启动运行项目

点击Terminal——New Terminal 打开新的终端

在这里插入图片描述

输入命令行：

cd demo

npm run serve

在这里插入图片描述

成功运行！

在这里插入图片描述

至此我们成功创建了新页面，并为其配置了路由和导航链接。演示如下：

在这里插入图片描述

下一步我们将继续学习Vue的基本语法和常用组件。

可能遇见的问题：报错：[vue/no-multiple-template-root] The template root requires exactly one element

点击打开 ——文件——首选项——设置

在这里插入图片描述进入设置页搜索 eslint 把Vetur的验证模板，取消勾选Validate vue-html in using eslint-plugin-vue 在这里插入图片描述