2021搭建企业级后台（Vue + TS + Element Plus ）～ 3.目录结构说明及初始化

目录结构说明

• node_modules 第三⽅包存储⽬录
  
  

• public 静态资源⽬录，任何放置在 public ⽂件夹的静态资源都会被简单的复制，⽽不经过 webpack

  • favicon.ico 浏览器标签页图标
  • index.html 单页面
    
    

• src 源文件

  • assets 公共资源⽬录，放图⽚等资源
  • components 公共组件⽬录
  • router 路由相关模块
  • store 容器相关模块
  • views 路由⻚⾯组件存储⽬录
  • App.vue *根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
  • main.ts 整个项⽬的启动⼊⼝模块
  • shims-tsx.d.ts ⽀持以 .tsc 结尾的⽂件，在 Vue 项⽬中编写 jsx 代码
  • shims-vue.d.ts 让 TypeScript 识别 .vue 模块
    
    

• .browserslistrc 指定了项⽬的⽬标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer ⽤来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀

• .editorconfig EditorConfig 帮助开发⼈员定义和维护跨编辑器（或IDE）的统⼀的代码⻛格

• .eslintrc.js ESLint 的配置⽂件

• .gitignore Git 的忽略配置⽂件，告诉Git项⽬中要忽略的⽂件或⽂件夹

• babel.config.js Babel 配置⽂件

• package-lock.json 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm install 时⼤家的依赖能保证⼀致

• package.json 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容

• README.md 说明⽂档

• tsconfig.json TypeScript 配置⽂件
  
  

入口文件 main.ts

// 加载 Vue App根组件 router store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 关闭生产环境的提示
Vue.config.productionTip = false

// 初始化 Vue 根实例
new Vue({
  // 将 router 和 store 配置到 Vue 根实例当中
  router,
  store,
  // 通过 render 方法将 App 根组件, 渲染到 #app 根节点这里(public/indexedDB.html)
  render: h => h(App)
}).$mount('#app')

根组件 App.vue

<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 lang="scss">
...
</style>

views 组件 App.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<!-- 使用 TS 语法 -->
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import HelloWorld from '@/components/HelloWorld.vue' // @ is an alias to /src

@Component({
  components: {
    HelloWorld
  }
})

<!-- 用 class 类的方式 来描述组件 -->
export default class Home extends Vue {}
</script>

router 路由组件 index.ts

// 加载 Vue VueRouter Home 组件
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

// 挂载插件
Vue.use(VueRouter)

// 定义了一个路由表: 定义了一个名为 routes 的路由表, 路由的类型为 Array, 里面的每一项都要符合 RouteConfig 这个类型
const routes: Array<RouteConfig> = [
  {
    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')
  }
]

// new 一个 Vue 实例
const router = new VueRouter({
  // 把路由表配置到这个路由选项当中
  routes
})

// 最后将 router 导出
export default router

---

目录结构初始化

根组件 App.vue

<template>
  <div id="app">
    <h1>Hello World</h1>

    <!-- 根路由出口 -->
    <router-view/>
  </div>
</template>

<style lang="scss" scoped></style>

router 路由组件 index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'

Vue.use(VueRouter)

// 路由配置规则
const routes: Array<RouteConfig> = []

const router = new VueRouter({
  routes
})

export default router

删除文件

• src/views/About.vue
• src/views/Home.vue
• src/components/HelloWorld.vue
• src/assets/logo.png
  
  

新增文件

• src/services ⽬录，接⼝模块
• src/utils ⽬录，存储⼀些⼯具模块
• src/styles ⽬录，存储⼀些样式资源

最终目录结构

---

再次提交至 gitee

# 查看版本
$ git status

# 添加全部代码
$ git add .

# 提交日志
$ git commit -m "初始化目录结构"

# 同步至远程仓库
$ git push