OnlyT 项目启动与配置教程

1. 项目目录结构及介绍

OnlyT 项目的目录结构如下：

OnlyT/
├── .gitignore
├── .vscode
│   └── settings.json
├── bin
│   └── release
├── build
│   ├── build.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── dist
│   └── index.html
├── node_modules
├── package.json
├── src
│   ├── assets
│   │   ├── css
│   │   ├── fonts
│   │   └── images
│   ├── components
│   ├── pages
│   ├── App.vue
│   ├── main.js
│   └── router.js
└── test

目录说明：

• .gitignore：Git 忽略文件列表，指定哪些文件不应该被提交到版本控制系统中。
• .vscode：Visual Studio Code 的配置目录，包含编辑器的配置文件。
• bin：存放可执行文件的目录，这里的 release 是发布版本的目录。
• build：构建脚本和配置文件目录，包含 Webpack 的配置文件。
• dist：构建后的生产环境文件目录，包含最终生成的 HTML 文件。
• node_modules：项目依赖的第三方模块目录。
• package.json：项目配置文件，定义项目的依赖、脚本和元数据。
• src：源代码目录，包含组件、页面、样式和主应用文件。
• test：测试目录，用于存放测试相关文件。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，这是 Vue 应用的入口文件。以下是文件的主要部分：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

这段代码导入了 Vue 库、根组件 App.vue 和路由配置 router。然后创建了一个 Vue 实例，并将 App 作为根组件，使用 router 进行页面路由。最后，将这个 Vue 实例挂载到 HTML 文档中的 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件主要是 build/webpack.base.conf.js，这是 Webpack 的基础配置文件。以下是文件的主要内容：

const path = require('path')

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(__dirname, 'src')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    // 插件配置
  ]
}

这个配置文件定义了 Webpack 的基本设置，包括模块解析、加载规则和插件配置。它处理 .vue、.js 和图片文件，使它们可以被 Webpack 正确处理。

以上是 OnlyT 项目的启动和配置文档的基本内容。按照这些步骤，您可以成功启动并运行 OnlyT 项目。