CLI

Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so much!

### A) Installation - top

Follow the following step to install the vue cli in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide

    <!-- copy the following folder-->
    /admin/template/assets/css
    /admin/template/assets/img

    <!-- paste it into react folder -->
    /admin/template/template_vue/src/assets/css
    /admin/template/template_vue/public/assets/img

    <!-- run the following command -->
    cd /your-path-url/template_vue
    npm install
    npm run serve

    <!-- browse the url -->
    http://localhost:8081/

    cd /your-path-url/template_vuejs
    npm install
    npm run serve

Verify that you are running at least node `10.9.x` or later and `npm 6.x.x` by running `node -v` and `npm -v` in a terminal/console window. Older versions produce errors, but newer versions are fine.

### B) File Structure - top

File structure overview for Vue JS Version

    template_vue/
    ├── package.json
    ├── babel.conf.js
    ├── public/
    └── src/
        ├── App.vue
        ├── main.js
        ├── assets/
        ├── components/
        ├── config/
        ├── pages/
        ├── plugins/
        └── scss/

### C) Page Structure - top

Below is the code from `App.vue` which include the header, sidebar, right sidebar, top menu, page content and footer. You may remove the component if you are not using it.

    <template>
      <div class="fade page-sidebar-fixed page-header-fixed show page-container" v-if="!pageOptions.pageEmpty" v-bind:class="{
        'page-sidebar-minified': pageOptions.pageSidebarMinified,
        'page-content-full-height': pageOptions.pageContentFullHeight,
        'page-without-sidebar': pageOptions.pageWithoutSidebar,
        'page-with-right-sidebar': pageOptions.pageWithRightSidebar,
        'page-with-two-sidebar': pageOptions.pageWithTwoSidebar,
        'page-with-wide-sidebar': pageOptions.pageWithWideSidebar,
        'page-with-light-sidebar': pageOptions.pageWithLightSidebar,
        'page-with-top-menu': pageOptions.pageWithTopMenu,
        'page-sidebar-toggled': pageOptions.pageMobileSidebarToggled,
        'page-right-sidebar-toggled': pageOptions.pageMobileRightSidebarToggled || pageOptions.pageRightSidebarToggled,
        'page-right-sidebar-collapsed': pageOptions.pageRightSidebarCollapsed,
        'has-scroll': pageOptions.pageBodyScrollTop
      }">
        <Header />
        <TopMenu v-if="pageOptions.pageWithTopMenu" />
        <Sidebar v-if="!pageOptions.pageWithoutSidebar" />
        <SidebarRight v-if="pageOptions.pageWithTwoSidebar" />
        <div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
          <router-view></router-view>
          <vue-ins-progress-bar></vue-ins-progress-bar>
        </div>
        <Footer v-if="pageOptions.pageWithFooter" />
      </div>
      <div v-else>
        <router-view></router-view>
        <vue-ins-progress-bar></vue-ins-progress-bar>
      </div>
    </template>

### D) Components - top

List of components inside the components folder

    components/
    ├── footer/
    ├── header
    ├── sidebar/
    ├── sidebar-right/
    ├── top-menu/
    └── vue-chartjs/

### E) Page Options - top

File to configure the default page options & page routes

    config/
    ├── PageOptions.vue
    └── PageRoutes.vue

Example of how to change page options in single page

    <script>
    import PageOptions from '../config/PageOptions.vue'

    export default {
      created() {
        PageOptions.pageWithTopMenu = true;
        PageOptions.pageWithoutSidebar = true;
      },
      beforeRouteLeave (to, from, next) {
        // change back to default
        PageOptions.pageWithTopMenu = false;
        PageOptions.pageWithoutSidebar = false;
        next();
      }
    }
    </script>

List of options:

    <script>
    const pageOptions = {
      pageSidebarMinified: false,
      pageContentFullWidth: false,
      pageContentInverseMode: false,
      pageContentFullHeight: false,
      pageWithLanguageBar: false,
      pageWithFooter: false,
      pageWithoutSidebar: false,
      pageWithRightSidebar: false,
      pageWithTwoSidebar: false,
      pageWithWideSidebar: false,
      pageWithLightSidebar: false,
      pageWithMegaMenu: false,
      pageWithTopMenu: false,
      pageSidebarTransparent: false,
      pageEmpty: false,
      pageMobileSidebarToggled: false,
      pageMobileRightSidebarToggled: false,
      pageMobileTopMenu: false,
      pageMobileMegaMenu: false,
      pageRightSidebarToggled: false,
      pageBodyScrollTop: 0
    }

    export default pageOptions;
    </script>

### F) Using SCSS - top

You may include the color admin theme scss file from `/admin/src/scss/default/` as well.

    <!-- copy the following folder -->
    /admin/src/scss/default/

    <!-- paste & replace the file inside the following folder -->
    /admin/template/template_vue/src/scss/

change the following code in `/template_vue/src/main.js`

    <!-- from LINE 46 -->
    import './assets/css/default/app.min.css'
    import './scss/vue.scss'
    import 'bootstrap-social/bootstrap-social.css'

    <!-- to -->
    import './scss/styles.scss'
    import 'bootstrap-social/bootstrap-social.css'

add the following code to `/template_vue/src/scss/styles.scss`

    @import 'vue';

after you done all the steps before this, you may run the following command to start your vue project.

    npm run serve

### G) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. `https://www.npmjs.com/package/``bootstrap-vue`

    {
      "name": "color-admin",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "@agametov/vueditor": "^0.4.1",
        "@chenfengyuan/vue-countdown": "^1.1.2",
        "apexcharts": "^3.8.3",
        "bootstrap": "^4.3.1",
        "bootstrap-social": "^5.1.1",
        "bootstrap-vue": "^2.0.0-rc.27",
        "chart.js": "^2.8.0",
        "flag-icon-css": "^3.3.0",
        "ionicons": "^4.6.2",
        "moment": "^2.24.0",
        "node-sass": "^4.12.0",
        "sass-loader": "^7.1.0",
        "simple-line-icons": "^2.4.1",
        "v-autocomplete": "^1.8.2",
        "vue": "^2.6.10",
        "vue-apexcharts": "^1.4.0",
        "vue-bootstrap-datetimepicker": "^5.0.1",
        "vue-chartjs": "^3.4.2",
        "vue-custom-scrollbar": "^1.1.0",
        "vue-event-calendar": "^1.5.2",
        "vue-full-calendar": "^2.7.0",
        "vue-good-table": "^2.17.4",
        "vue-hljs": "^1.1.2",
        "vue-input-tag": "^2.0.6",
        "vue-ins-progress-bar": "^1.0.0",
        "vue-maskedinput": "^0.1.3",
        "vue-notification": "^1.3.16",
        "vue-nvd3": "^1.0.0",
        "vue-pop-colorpicker": "^1.0.2",
        "vue-router": "^3.0.7",
        "vue-select": "^3.1.0",
        "vue-slider-component": "^3.0.33",
        "vue-sparklines": "^0.1.9",
        "vue-sweetalert2": "^2.1.1",
        "vue2-google-maps": "^0.10.7",
        "vuejs-datepicker": "^1.6.2"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "^3.9.2",
        "@vue/cli-plugin-eslint": "^3.9.2",
        "@vue/cli-service": "^3.9.3",
        "vue-template-compiler": "^2.6.10"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/essential",
          "eslint:recommended"
        ],
        "rules": {},
        "parserOptions": {
          "parser": "babel-eslint"
        }
      },
      "postcss": {
        "plugins": {
          "autoprefixer": {}
        }
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }