VUE框架 Cli目录结构

image-20210907100137864

（1）node_modules——[依赖包]

node_modules里面是项目依赖包，其中包括很多基础依赖，自己也可以根据需要安装其他依赖。安装方法为打开cmd，进入项目目录，输入npm install [依赖包名称],回车。

在两种情况下我们会自己去安装依赖：

<1> 项目运行缺少该依赖包：例如项目加载外部css会用到的css-loader，路由跳转vue-loader等（安装方法示例：npm install css-loader）

<2> 安装插件：如vux（基于WEUI的移动端组件库），vue-swiper（轮播插件）

注：有时会安装指定依赖版本，需在依赖包名称后加上版本号信息，如安装11.1.4版本的vue-loader，输入npm install vue-loader@11.1.4

（2）index.html——[主页]

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充。这是整个应用的 html 基础模板，也是打包编译后的项目入口。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

（3）src——[项目核心文件]

项目核心文件前面已经进行了简单的说明，接下来重点讲解main.js，App.vue,及router的index.js

image-20210907091506565

（4）main.js——[入口文件]

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，后期还可以引入插件，当然首先得安装插件。

1
2
3
4
5
6

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

main.js 只是引入了 App.vue 组件，并挂载到上面提到的 #app 节点下。这里的 createApp方法是 Vue 3 新增的全局 API，用来创建一个 Vue 应用，并挂载到某个 DOM 节点。

（5）App.vue——[根组件]

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<style>
#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;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如下图，父节点为#app的div，其没有兄弟节点）

是子路由视图，后面的路由页面都显示在此处

打一个比喻吧,类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档，在后面我也会通过例子来说明。

【style】

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，

（6）router——[路由配置]

router文件夹下，有一个index.js，即为路由配置文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

import { createRouter, createWebHistory } 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')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

这里定义了路径为'/‘的路由，该路由对应的页面是Home组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件

类似的，我们可以设置多个路由，‘/index’,'/list’之类的，当然首先得引入该组件，再为该组件设置路由。

8.4、单文件组件的使用

8.4.1、单文件组件模式流程

image-20220402170854296

整个项目是一个主文件index.html，index.html中会引入src文件夹中的main.js，main.js中会导入顶级单文件组件App.vue，App.vue中会通过组件嵌套或者路由来引用其他页面组件文件，页面组件也可以嵌套或者路由引用的方式加载子组件。

组件有两种：脚本化组件、单文件组件

脚本化组件的缺点：

  1. 脚本化组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
  2. 脚本化组件只是整合了js和html，但是css代码被剥离出去了。使用组件时还要另外引入css文件。

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“Home.vue”。

  1. 在template 编写html代码，script编写vue.js代码，style编写当前组件的样式代码
  2. 从上面可以看到，虽然我们现在使用了单文件组件，但是之前我们在脚本化阶段学习过的所有语法，在这里都是通用的。
posted @   呼长喜  阅读(73)  评论(0)  编辑  收藏  举报
相关博文：
·  VUE框架安装vue cli
·  VUE框架
·  vue项目各文件说明
·  vue---创建vue项目，项目目录结构，es6导入导出，单页面组件写法，vue-router路由使用，vue中使用bookstrap，jquery和elementui
·  Vue-cli创建项目
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手