VueStrap 项目教程

VueStrap 项目教程

vuestrapVuestrap Javascript wrapper for Bootstrap 4 components.项目地址:https://gitcode.com/gh_mirrors/vu/vuestrap

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

VueStrap 项目的目录结构如下：

vuestrap/
├── build/
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config/
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── App.vue
│   └── main.js
├── static/
├── .babelrc
├── .editorconfig
├── .gitignore
├── index.html
├── package.json
└── README.md

目录结构介绍

• build/：包含项目的构建配置文件。
• config/：包含项目的配置文件。
• src/：包含项目的源代码。
  • assets/：存放静态资源文件。
  • components/：存放 Vue 组件。
  • router/：存放路由配置文件。
  • App.vue：主应用组件。
  • main.js：入口文件。
• static/：存放静态文件。
• .babelrc：Babel 配置文件。
• .editorconfig：编辑器配置文件。
• .gitignore：Git 忽略文件配置。
• index.html：项目的主 HTML 文件。
• package.json：项目的依赖和脚本配置。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/main.js，它是整个 Vue 应用的入口点。以下是 main.js 的示例代码：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

启动文件介绍

• import Vue from 'vue'：引入 Vue 库。
• import App from './App'：引入主应用组件。
• import router from './router'：引入路由配置。
• Vue.config.productionTip = false：关闭生产环境提示。
• new Vue({...})：创建 Vue 实例，挂载到 #app 元素上。

3. 项目的配置文件介绍

项目的配置文件主要位于 config/ 目录下，其中最重要的是 config/index.js。以下是 config/index.js 的示例代码：

'use strict'

const path = require('path')

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost',
    port: 8080,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,

    // Use Eslint Loader?
    useEslint: true,
    showEslintErrorsInOverlay: false,

    // Source Maps
    devtool: 'cheap-module-eval-source-map',

    // CSS Source maps
    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // Production Source Maps
    productionSourceMap: true,
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run

vuestrapVuestrap Javascript wrapper for Bootstrap 4 components.项目地址:https://gitcode.com/gh_mirrors/vu/vuestrap