目录结构说明

  • 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 ⽬录，存储⼀些样式资源


最终目录结构

element ui 下一步_Vue




再次提交至 gitee



# 查看版本
$ git status

# 添加全部代码
$ git add .

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

# 同步至远程仓库
$ git push