Vue & Fis3 项目教程

1. 项目的目录结构及介绍

vue-fis3/
├── README.md
├── fis-conf.js
├── package.json
├── src/
│   ├── components/
│   │   ├── Hello.vue
│   │   └── ...
│   ├── App.vue
│   ├── main.js
│   └── ...
└── ...

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• fis-conf.js: 项目的配置文件，用于配置 Fis3 的构建规则和插件。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• src/: 源代码目录，包含项目的所有源代码文件。
  • components/: Vue 组件目录，包含项目的所有 Vue 组件。
  • App.vue: 项目的根组件。
  • main.js: 项目的入口文件。

2. 项目的启动文件介绍

main.js

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

new Vue({
  el: '#app',
  render: h => h(App)
});

• main.js: 项目的入口文件，负责初始化 Vue 实例并挂载到 DOM 中。
• import Vue from 'vue': 引入 Vue 库。
• import App from './App.vue': 引入根组件 App.vue。
• new Vue({...}): 创建 Vue 实例，并使用 render 函数渲染根组件 App.vue。

3. 项目的配置文件介绍

fis-conf.js

fis.match('*.{js,css,png}', {
  useHash: true
});

fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

fis.match('*.css', {
  optimizer: fis.plugin('clean-css')
});

fis.match('*.png', {
  optimizer: fis.plugin('png-compressor')
});

• fis-conf.js: 项目的配置文件，用于配置 Fis3 的构建规则和插件。
• fis.match('*.{js,css,png}', { useHash: true }): 对所有 js、css 和 png 文件启用哈希命名。
• fis.match('*.js', { optimizer: fis.plugin('uglify-js') }): 对所有 js 文件使用 UglifyJS 插件进行压缩。
• fis.match('*.css', { optimizer: fis.plugin('clean-css') }): 对所有 css 文件使用 CleanCSS 插件进行压缩。
• fis.match('*.png', { optimizer: fis.plugin('png-compressor') }): 对所有 png 文件使用 PNG 压缩插件进行压缩。

以上是基于开源项目 vue-fis3 的教程，包含了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助！