Vue—Vue的项目结构,怎样用Vue3进行开发,如何起步Vue3
@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
- 点赞
- 收藏
- 关注作者
评论(0)