拼團不中返利商城系統

拼團不中返利商城系統開發找廣州許生

1. main.js 專案的基本配置以及掛載

//↓微電↓引入專案所需要的基礎元件import 'babel-polyfill'import Vue from 'vue'import App from './App'import router from './router'import fastclick from 'fastclick'import VueLazyload from 'vue-lazyload'import store from './store'//引入所需要的公共的樣式import 'common/stylus/index.styl'/* eslint-disable no-unused-vars */
//17340689890 import vConsole from 'vconsole'fastclick.attach(document.body)
Vue.use(VueLazyload, {
  loading: require('common/image/default.png')
})
//初始化vue，el-掛載的元素;router-路由;store-VueX元件間傳值和資料的本地化儲存
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})12345678910111213141516171819202122232425262728

2.App.vue入口頁面的

<template>
  <div id="app" @touchmove.prevent>
  //頭部檔案    <m-header></m-header>
    <tab></tab> //導航欄    <keep-alive>
      <router-view></router-view> //    </keep-alive>
    <player></player>
  </div></template><script type="text/ecmascript-6">
  import MHeader from 'components/m-header/m-header'
  import Player from 'components/player/player'
  import Tab from 'components/tab/tab'
  export default {
    components: {
      MHeader,
      Tab,
      Player
    }
  }</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>12345678910111213141516171819202122232425262728

3.元件內程式碼的編寫 
vue是元件化的管理，一個元件的頁面結構：

<template>
  <footer class="footer">
    <ul class=" ui-rows ui-rows-bottom footer-menu">
     <!-- <li class="ui-cols">
        <router-link to="/memberStore">
          <i class="iconfont icon-huiyuantuijian">
          </i>
          <div>優選推薦</div>
        </router-link>
      </li>-->
      <li class="ui-cols">
        <router-link to="/more">
          <i class="iconfont icon-gengduoshangpin">
          </i>
          <div>更多商品</div>
        </router-link>
      </li>
      <li class="ui-cols" ref="shopcart">
        <router-link to="/cart">
          <i class="iconfont icon-gouwuche">
          </i>
          <div>購物車</div>
        </router-link>
      </li>
      <li class="ui-cols">
        <router-link to="/my">
          <i class="iconfont icon-wode">
          </i>
          <div>我的</div>
        </router-link>
      </li>
    </ul>
  </footer></template><script type = "text/ecmascript-6"></script><style lang='less' rel="stylesheet/less">
  @import "./less/footer.less";</style>12345678910111213141516171819202122232425262728293031323334353637383940414243

<template></template>編寫html檔案， <script></script>編寫檔案， <style></style>樣式檔案； 
**在專案中一般使用預編譯性的語言如less/sass,因此需要配置預編譯性檔案所需要的執行環境，我使用的是webstrom編輯器