Vue—Vue的项目结构,怎样用Vue3进行开发,如何起步Vue3

举报
中杯可乐多加冰 发表于 2022/11/28 17:00:49 2022/11/28
【摘要】 @TOC上一章学习了Vue是什么,怎样配置安装和运行Vue3,这篇将着重介绍Vue的项目结构以及如何使用VSCode对Vue来进行开发。 IDE的准备 下载VSCode首先我们需要使用前端开发 IDE 利器:Visual Studio Code进官网下载:https://code.visualstudio.com并进行安装 插件安装打开VSCode后,点击扩展按钮,搜索需要的插件名称,点击安...

@TOC

上一章学习了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
在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。