Vue2学习笔记2 - vuecli4目录结构说明

最新推荐文章于 2024-06-20 10:26:21 发布

Myron.Maoyz

最新推荐文章于 2024-06-20 10:26:21 发布

阅读量429

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/justflow/article/details/109502224

版权

Vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

1.目录结构

在用vue-cli4成功创建项目后，项目目录下就多出来很多文件和文件夹，我们对这些文件和文件夹来进行一个基本的认识。

目录	说明
dist	打包输出目录
node_modules	第三方依赖，我们安装的各种依赖都在个文件件里面，包含vue,vuex,eslint所有的依赖包
public	存放公共资源的地方，里面有一个index.html
-- index.html	打包后的入口文件
src	这个是重点，我们的源码以及开发的静态资源等都在里面
-- api (默认无)	所有后台请求
-- assets	静态资源，css、img、js、font等
-- compoments	自定义的公共组件
-- icons (默认无)	项目所有 svg icons
-- layout (默认无)	全局Layout
-- router	路由配置，用于页面的跳转配置
--styles (默认无)	通常用来存放全局样式
-- views	视图组件
-- store （没有加载vuex就没有）	是vuex的文件，主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
-- utils (默认无)	通常用来存放全局公用方法
-- App.vue	首页组件（默认组件）,也叫根组件
-- main.js	入口文件，一切的入口
.browserslistrc	配置使用CSS兼容性插件的使用范围
.eslintrc.js	配置ESLint
babel.config.js	使用一些预设
package.json	项目描述既依赖
package-lock.json	版本管理使用的文件

2.文件说明

src/main.js，如果在创建项目的时候，加载了更多的依赖包，例如vuex，store等需要在初始化就加载的，也在main.js中加载

new Vue()就是启动模块，render: h => h(App) 是用来渲染组件的，h()里面可以传入任意想渲染的组件，上面定义了App为./App.vue，那么App.vue就是根组件，$mount('#app)表示挂载的地方，针对的是public目录下/index.html文件中 id为app的对象

import Vue from 'vue'    // 指向node_modules\vue目录，第三方依赖就是这种加载
import App from './App.vue'    // 加载 App.vue文件，这个是Vue的根组件
import router from './router'  // 加载 router目录，这是引用router路由

Vue.config.productionTip = false

// 开始启动
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

public/index.html,作为静态文件的入口文件，可以在文件中将系统引用的vue等资源文件，用CDN方式加载进这个文件。还有跨域调用接口时需要用到的JS全局变量，都可以在这个文件中定义。

<!DOCTYPE html>
<html lang="en">
  <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>

src/App.vue，项目的根组件入口，部分全局用到的Css，Js都可以在这里定义加载。每个vue文件由三部分组成<template></template>,<srcipt></script>,<style></style>。

<template>
<div id="app">
    <div id="nav">
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>
    <router-view />
</div>
</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>

src/route/index.js,用来存放所有组件的路由,路由之间可以通过children来嵌套，也可以通过redict跳转，各组件之间的关系，基本都是通过这个router来实现。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

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 = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

注：

参考资源

https://blog.csdn.net/qq_40298902/article/details/107352869

https://blog.csdn.net/qq_36410795/article/details/103701754

Myron.Maoyz

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记2 - vuecli4目录结构说明

1.目录结构在用vue-cli4成功创建项目后，项目目录下就多出来很多文件和文件夹，我们对这些文件和文件夹来进行一个基本的认识。目录说明 dist 打包输出目录 node_modules 第三方依赖，我们安装的各种依赖都在个文件件里面，包含vue,vuex,eslint所有的依赖包 public 存放公共资源的地方，里面有一个index.html -- index.html 打包后的入口文件 src 这个是重点，我们的源码以及开发的静态资
复制链接

扫一扫

专栏目录