目录
上一章学习了Vue是什么，怎样配置安装和运行Vue3，这篇将着重介绍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项目的项目结构，其中:
| 目录/文件 | 说明 |
|---|---|
| node_modules | npm 加载的项目依赖模块 |
| public | 存放静态资源(一般不会变动的)，其中 index.html 是项目主页 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 存放静态资源如logo等,可能会变动的。components: 存放组件(一般是可复用的) router：路由管理，在index.js中配置路由 store：状态管理(一般不用)views：视图组件(不可复用的页面组件)index.css: 样式文件。 |
| App.vue | 根组件(主要是页面导航，路由加载） |
| main.js | 项目的入口文件(加载插件、CSS、存储全局变量、实例化Vue等 |
| package.json | 项目配置文件 |
| README.md | 项目的说明文档，markdown 格式 |
| dist | 使用 npm run build 命令打包后会生成该目录。 |
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
