iView Project 实战指南

iView Project 实战指南

iview-projectThis project is build for Vue.js 2 + vue-router + webpack2 + iView 3项目地址:https://gitcode.com/gh_mirrors/iv/iview-project

项目目录结构及介绍

根目录概览

iview-project
│
├── build                    # 构建相关脚本
│   ├── dev-server.js        # 开发环境服务器启动脚本
│   └── ...
├── config                   # 配置文件夹
│   ├── index.js             # 主配置文件，包含端口、路径等基本配置
│   └── paths.js             # 路径配置
├── src                      # 源码文件夹
│   ├── assets               # 静态资源文件，如图片、图标
│   ├── components           # 自定义Vue组件
│   │   └── HelloWorld.vue   # 示例组件
│   ├── router               # 路由配置
│   │   └── index.js         # 主路由器文件
│   ├── store                 # Vuex状态管理仓库
│   │   └── index.js         # 主状态管理文件
│   ├── App.vue               # 应用主组件
│   ├── main.js               # 应用入口文件
│   └── utils                 # 工具函数集合
└── index.html               # HTML模板入口文件

说明：

• build: 包含Webpack相关的编译和开发服务器启动脚本。
• config: 存放项目的构建配置文件，包括开发和生产环境的设置。
• src: 应用的核心部分，分为多个子目录分别负责不同功能，如组件、路由、状态管理等。
• index.html: 浏览器加载的第一个HTML文件，包含基础的Vue运行环境设置。

项目的启动文件介绍

main.js

这是Vue应用的启动文件，它负责初始化Vue实例，并挂载到DOM元素上。同时也包含了所有必要的插件引入，例如Vue Router和Vuex。示例内容如下：

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

Vue.config.productionTip = false

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

关键作用：

• 加载Vue实例及其依赖（App组件、路由、状态管理）。
• 设置应用运行环境提示。
• 将Vue实例绑定到DOM元素上。

项目的配置文件介绍

config/index.js

这个文件是项目构建过程的主要配置中心，其中包含了开发服务器的基本配置，比如host、port以及编译的相关路径等。一个典型的配置片段可能如下：

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {}, // 代理设置，用于跨域
    host: 'localhost', // 可以被覆盖
    port: 8080, // 端口号
    autoOpenBrowser: true,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // 是否启用WebSocket
    ...
  },
  build: {
    env: require('./dev.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/，
    productionSourceMap: true,
    ...
  }
}

关键配置项解释：

• assetsSubDirectory: 静态资源存放的子目录。
• assetsPublicPath: 静态资源的公共URL路径。
• proxyTable: 开发环境下用于API代理的设置。
• host, port: 开发服务器的主机名和端口号。

通过这样的配置，开发者可以灵活地调整开发和构建的行为，满足不同项目的特定需求。

iview-projectThis project is build for Vue.js 2 + vue-router + webpack2 + iView 3项目地址:https://gitcode.com/gh_mirrors/iv/iview-project